0 0 0 8 - CSS样式文件,Web密训营,Web开发,鱼C论坛

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

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

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

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

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

交！作！业！{:9_237:}

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

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

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

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

不二如是 发表于 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

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

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

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

页: [1] 2 3

鱼C论坛's Archiver