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 日志相册贡献荣誉积分 62755 狗仔卡	发表于 2017-1-9 10:11:16 \| 显示全部楼层 \|阅读模式购买主题已有 66 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 38
	小甲鱼最新课程 -> https://ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

点评

评分

点评

评分

点评

评分

点评

评分

点评

评分

浏览过的版块