0 0 0 8 - CSS样式文件

不二如是 · 发表于 2017-1-9 10:11:16

购买主题 已有 66 人购买 本主题需向作者支付 2 鱼币 才能浏览

lyzklkl · 发表于 2017-3-31 15:27:39

交作业啦。其实我感觉信息量还是挺大的，，需要消化一下，最近每天至少做5个左右以上的作业，加晚上复习

MSK · 发表于 2017-7-5 17:01:48

交！作！业！

css：

@charset 'utf-8';
html{
                height:100%;
            }
            body{
                background: url(http://img2.imgtn.bdimg.com/it/u=330117910,1717224124&fm=26&gp=0.jpg) center center;
                background-size:cover;
                text-align: center;
                margin:0;
                padding:0;
                color:red;
                position:relative;
                top:50%;
            }
            #link{
                width:100%;
                position:absolute;
                transform: translateY(-50%)
            }
            h1{
                font-family: 宋体;
                font-size:80px;
                margin-bottom:5px;
            }
            p{
                margin-bottom:60px;
                color:orange;
                font-size:20px;
            }
            a{
                color:#FFF;
                border:5px solid aqua;/*边框高度与颜色*/
                border-radius:15px;/*圆角弯曲度*/
                padding:15px 99px;/*边框大小*/
                text-decoration: none;
                font-size:16px;
                background:cyan;/*填充色*/
            }

html：

<!doctype html>
<html>
    <head>
        <title>可爱的超链接</title>
        <meta charset='utf-8'>
        <link href='008.css' rel='stylesheet'>
        </style>
    </head>
    <body>
        <div id='link'>
            <h1>我爱鱼C</h1>
            <p>让编程改变世界</p>
            <a href='http://www.fishc.com'>传送门</a>
        </div>
    </body>
</html>

aswyamato1989 · 发表于 2017-7-5 22:26:57

交作业：

易改乌江水 · 发表于 2018-1-21 23:29:58

本帖最后由易改乌江水于 2021-6-10 11:49 编辑

@charset "UTF-8"; 
html{
        height: 100%;
        color: #5599FF;
        font-family: sans-serif;
        }
body{
        background: url(background.jpg);
        background-size: cover;
        background: url(background.jpg) center center;
        }
#ha
        {
        width: 100%;
        text-align: center;
        }
h1
        {
        font-size: 66px;
        margin-bottom: 22px;
        }
a
        {
        font-size: 20px;
        background: #FFDD55;
        padding:9px 22px;
        text-decoration: none;
        color: #FFF;
        border:3px solid #FFDD55;
        border-radius: 3px;
        margin: 5px 33px 5px 33px;

这是CSS

<!doctype html>
<html>
        <head>
                <meta charset="utf-8">
                <title>易改乌江水鱼C学习</title>
                <link href="yucxue.css" rel="stylesheet">
        </head>
        <body>
                <div id="ha">
                        <h1>易改乌江水爱鱼C</h1>
                        <p>WWW.FishC.com</p>
                        <a href="http://bbs.fishc.com/thread-81254-1-1.html">HTML5-庖丁解牛-0008</a>
                        <a href="http://bbs.fishc.com">
                                <img src="fishc.png" width="359" height="84" />
                        </a>
        </body>
</html>

这是HTML（专门为了学不二老师的课写的）
-----------------------------------------------------2021\6\10高考over-----------------------------------------
我当年写了个啥，我不认识当时的我，怎么可以这么拉跨啊（）

ttyhtg · 发表于 2018-2-3 21:57:34

就因为第一行一个星号不小心达成了中文符号，让我玩了半天的找不同游戏，这要是在学校估计得挨一巴掌
QQ截图20180203215347.png

小人 · 发表于 2017-1-9 12:01:12

我发现好多鱼油都喜欢看视频教程而不喜欢看文字的

不二如是 · 发表于 2017-1-9 12:24:56

小人发表于 2017-1-9 12:01
我发现好多鱼油都喜欢看视频教程而不喜欢看文字的

文字，做得好看，一样滴～

会魔法的魔法 · 发表于 2017-1-9 16:48:24

大家比较懒还是视频比较好些

不二如是 · 发表于 2017-1-9 18:48:45

会魔法的魔法发表于 2017-1-9 16:48
大家比较懒还是视频比较好些

其实，像这种设计类，图片比视频好些，一张图说明重点～

不二如是 · 发表于 2017-1-9 18:48:48

会魔法的魔法发表于 2017-1-9 16:48
大家比较懒还是视频比较好些

其实，像这种设计类，图片比视频好些，一张图说明重点～

Forever_slient · 发表于 2017-2-21 21:38:34

调用css之后，文字和图片全部向上移动了，为什么呢？

不二如是 · 发表于 2017-2-21 21:43:57

Forever_slient 发表于 2017-2-21 21:38
调用css之后，文字和图片全部向上移动了，为什么呢？

上传代码。。。

Forever_slient · 发表于 2017-2-21 21:50:02

html

<!doctype html>
<html>
        <head>
                <meta charset="utf-8">
                <title>欢迎来到HTML世界</title>
                <link href="003-CSS.css" rel="stylesheet">
        </head>
        <body>
                <div id="contatiner">
                        <h1>我爱鱼C</h1>
                        <p>WWW.FihsC.com - 让编程改变世界</p>
                        <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
                </div>
        </body>
</html>

css

@charset "UTF-8"
html,body{
        height: 100%;
        color: #FF0088;
        font-family: sans-serif;
}
body{
        background: url(asdf.jpg) center center;
        background-size: cover;
        margin: 0; /*养成初始化好习惯*/
        padding: 0;
        position: relative;
}
#contatiner{
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
}
h1{
        font-size: 66px;
        margin-bottom: 22px;
}
p{
        font-size: 33px;
        margin-bottom: 22px;
}
a{
        font-size: 55px;
        color: #00AA00;
        border: 1px solid #00AA00;
        border-radius: 10px;
        padding: 10px 66px;
        text-decoration: none;
}

不二如是 · 发表于 2017-2-21 21:55:02

Forever_slient 发表于 2017-2-21 21:50
html

原封不动，你是啥浏览器？

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢迎来到HTML世界</title>
    <style type="text/css">
        html,body{
            height: 100%;
            color: #FF0088;
            font-family: sans-serif;
        }
        body{
            background: url(asdf.jpg) center center;
            background-size: cover;
            margin: 0; /*养成初始化好习惯*/
            padding: 0;
            position: relative;
        }
        #contatiner{
            width: 100%;
            text-align: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        h1{
            font-size: 66px;
            margin-bottom: 22px;
        }
        p{
            font-size: 33px;
            margin-bottom: 22px;
        }
        a{
            font-size: 55px;
            color: #00AA00;
            border: 1px solid #00AA00;
            border-radius: 10px;
            padding: 10px 66px;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="contatiner">
    <h1>我爱鱼C</h1>
    <p>WWW.FihsC.com - 让编程改变世界</p>
    <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>
</html>

效果图；

Forever_slient · 发表于 2017-2-21 21:57:57

不二如是发表于 2017-2-21 21:55
原封不动，你是啥浏览器？

ie和google都是一样的

Forever_slient · 发表于 2017-2-21 22:07:27

都写在html中没有问题，可以正常显示，但将css设置放置在.css文件中，在html中调用.css后，显示就不正常了

不二如是 · 发表于 2017-2-21 22:12:02

Forever_slient 发表于 2017-2-21 21:57
ie和google都是一样的

代码没问题

你发个网页效果图我看看

Forever_slient · 发表于 2017-2-21 22:22:03

不二如是发表于 2017-2-21 22:12
代码没问题

你发个网页效果图我看看

Forever_slient · 发表于 2017-2-21 22:42:53

解决了，在css文件中@charset "UTF-8"后忘记写分号了。
谢谢您的帮忙！！！

longwutian004 · 发表于 2017-3-2 17:56:38

赞赞赞！！！

345127857 · 发表于 2017-3-7 13:55:34

交作业的时候怎么贴图片呀

逢源try一try · 发表于 2017-4-13 21:44:51

<link href = "SCss.css" rel = "stylesheet">

其中，rel = "stylesheet" 是啥意思？

shishunfu · 发表于 2017-4-18 09:16:05

逢源try一try 发表于 2017-4-13 21:44
其中，rel = "stylesheet" 是啥意思？

rel:规定当前文档与被链接文档之间的关系。
stylesheet:样式表
整句的意思大概就是被链接的文件是当前文件的样式表文件

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 57321 狗仔卡	发表于 2017-1-9 10:11:16 \| 显示全部楼层 \|阅读模式购买主题已有 66 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 37
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 0 8 - CSS样式文件

本帖被以下淘专辑推荐:

点评

评分

点评

评分

点评

评分

点评

评分

点评

评分