QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 1976|回复: 35

[系列教程] 0 0 0 8 - CSS样式文件

[复制链接]
最佳答案
134 
累计签到:655 天
连续签到:183 天
不二如是 发表于 2017-1-9 10:11:16 197635 | 显示全部楼层 |阅读模式
购买主题 已有 43 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 
累计签到:6 天
连续签到:1 天
lyzklkl 发表于 2017-3-31 15:27:39 | 显示全部楼层
交作业啦。其实我感觉信息量还是挺大的,,需要消化一下,最近每天至少做5个左右以上的作业,加晚上复习
屏幕快照 2017-03-31 下午3.21.47.png
屏幕快照 2017-03-31 下午3.22.03.png
屏幕快照 2017-03-31 下午3.23.05.png

点评

我很赞同!: 5.0
我很赞同!: 5
加油,用吹水阁名言“尽精微,乐无穷”  发表于 2017-3-31 17:26

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

最佳答案
30 
累计签到:157 天
连续签到:1 天
MSK 发表于 2017-7-5 17:01:48 | 显示全部楼层
交!作!业!



  1. css:

  2. @charset 'utf-8';
  3. html{
  4.                 height:100%;
  5.             }
  6.             body{
  7.                 background: url(http://img2.imgtn.bdimg.com/it/u=330117910,1717224124&fm=26&gp=0.jpg) center center;
  8.                 background-size:cover;
  9.                 text-align: center;
  10.                 margin:0;
  11.                 padding:0;
  12.                 color:red;
  13.                 position:relative;
  14.                 top:50%;
  15.             }
  16.             #link{
  17.                 width:100%;
  18.                 position:absolute;
  19.                 transform: translateY(-50%)
  20.             }
  21.             h1{
  22.                 font-family: 宋体;
  23.                 font-size:80px;
  24.                 margin-bottom:5px;
  25.             }
  26.             p{
  27.                 margin-bottom:60px;
  28.                 color:orange;
  29.                 font-size:20px;
  30.             }
  31.             a{
  32.                 color:#FFF;
  33.                 border:5px solid aqua;/*边框高度与颜色*/
  34.                 border-radius:15px;/*圆角弯曲度*/
  35.                 padding:15px 99px;/*边框大小*/
  36.                 text-decoration: none;
  37.                 font-size:16px;
  38.                 background:cyan;/*填充色*/
  39.             }

  40. html:

  41. <!doctype html>
  42. <html>
  43.     <head>
  44.         <title>可爱的超链接</title>
  45.         <meta charset='utf-8'>
  46.         <link href='008.css' rel='stylesheet'>
  47.         </style>
  48.     </head>
  49.     <body>
  50.         <div id='link'>
  51.             <h1>我爱鱼C</h1>
  52.             <p>让编程改变世界</p>
  53.             <a href='http://www.fishc.com'>传送门</a>
  54.         </div>
  55.     </body>
  56. </html>
复制代码
temp6.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-7-5 17:05

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

最佳答案
0 
累计签到:703 天
连续签到:1 天
aswyamato1989 发表于 2017-7-5 22:26:57 | 显示全部楼层
交作业:
008.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-8-2 15:06

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

最佳答案
1 
累计签到:13 天
连续签到:1 天
易改乌江水 发表于 2018-1-21 23:29:58 | 显示全部楼层
本帖最后由 易改乌江水 于 2018-1-21 23:34 编辑
  1. @charset "UTF-8";
  2. html{
  3.         height: 100%;
  4.         color: #5599FF;
  5.         font-family: sans-serif;
  6.         }
  7. body{
  8.         background: url(background.jpg);
  9.         background-size: cover;
  10.         background: url(background.jpg) center center;
  11.         }
  12. #ha
  13.         {
  14.         width: 100%;
  15.         text-align: center;
  16.         }
  17. h1
  18.         {
  19.         font-size: 66px;
  20.         margin-bottom: 22px;
  21.         }
  22. a
  23.         {
  24.         font-size: 20px;
  25.         background: #FFDD55;
  26.         padding:9px 22px;
  27.         text-decoration: none;
  28.         color: #FFF;
  29.         border:3px solid #FFDD55;
  30.         border-radius: 3px;
  31.         margin: 5px 33px 5px 33px;
复制代码

这是CSS
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>易改乌江水鱼C学习</title>
  6.                 <link href="yucxue.css" rel="stylesheet">
  7.         </head>
  8.         <body>
  9.                 <div id="ha">
  10.                         <h1>易改乌江水爱鱼C</h1>
  11.                         <p>WWW.FishC.com</p>
  12.                         <a href="http://bbs.fishc.com/thread-81254-1-1.html">HTML5-庖丁解牛-0008</a>
  13.                         <a href="http://bbs.fishc.com">
  14.                                 <img src="fishc.png" width="359" height="84" />
  15.                         </a>
  16.         </body>
  17. </html>
复制代码

这是HTML(专门为了学不二老师的课写的)
截图.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-2-3 22:44

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 很漂亮~

查看全部评分

最佳答案
0 
累计签到:112 天
连续签到:1 天
ttyhtg 发表于 2018-2-3 21:57:34 | 显示全部楼层
就因为第一行一个星号不小心达成了中文符号,让我玩了半天的找不同游戏,这要是在学校估计得挨一巴掌
QQ截图20180203215347.png

360截图-358724515.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-2-3 22:44

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

最佳答案
7 
累计签到:632 天
连续签到:2 天
小人 发表于 2017-1-9 12:01:12 | 显示全部楼层
我发现好多鱼油都喜欢看视频教程  而不喜欢看文字的
最佳答案
134 
累计签到:655 天
连续签到:183 天
不二如是  楼主| 发表于 2017-1-9 12:24:56 | 显示全部楼层
小人 发表于 2017-1-9 12:01
我发现好多鱼油都喜欢看视频教程  而不喜欢看文字的

文字,做得好看,一样滴~
最佳答案
0 
累计签到:718 天
连续签到:1 天
会魔法的魔法 发表于 2017-1-9 16:48:24 | 显示全部楼层
  大家比较懒 还是视频比较好些
最佳答案
134 
累计签到:655 天
连续签到:183 天
不二如是  楼主| 发表于 2017-1-9 18:48:45 | 显示全部楼层
会魔法的魔法 发表于 2017-1-9 16:48
大家比较懒 还是视频比较好些

其实,像这种设计类,图片比视频好些,一张图说明重点~
最佳答案
134 
累计签到:655 天
连续签到:183 天
不二如是  楼主| 发表于 2017-1-9 18:48:48 | 显示全部楼层
会魔法的魔法 发表于 2017-1-9 16:48
大家比较懒 还是视频比较好些

其实,像这种设计类,图片比视频好些,一张图说明重点~
最佳答案
0 
累计签到:54 天
连续签到:1 天
Forever_slient 发表于 2017-2-21 21:38:34 | 显示全部楼层
调用css之后,文字和图片全部向上移动了,为什么呢?
最佳答案
134 
累计签到:655 天
连续签到:183 天
不二如是  楼主| 发表于 2017-2-21 21:43:57 | 显示全部楼层
Forever_slient 发表于 2017-2-21 21:38
调用css之后,文字和图片全部向上移动了,为什么呢?

上传代码。。。

Snip20170221_509.png
最佳答案
0 
累计签到:54 天
连续签到:1 天
Forever_slient 发表于 2017-2-21 21:50:02 | 显示全部楼层
html
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>欢迎来到HTML世界</title>
  6.                 <link href="003-CSS.css" rel="stylesheet">
  7.         </head>
  8.         <body>
  9.                 <div id="contatiner">
  10.                         <h1>我爱鱼C</h1>
  11.                         <p>WWW.FihsC.com - 让编程改变世界</p>
  12.                         <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  13.                 </div>
  14.         </body>
  15. </html>
复制代码


css
  1. @charset "UTF-8"
  2. html,body{
  3.         height: 100%;
  4.         color: #FF0088;
  5.         font-family: sans-serif;
  6. }
  7. body{
  8.         background: url(asdf.jpg) center center;
  9.         background-size: cover;
  10.         margin: 0; /*养成初始化好习惯*/
  11.         padding: 0;
  12.         position: relative;
  13. }
  14. #contatiner{
  15.         width: 100%;
  16.         text-align: center;
  17.         position: absolute;
  18.         top: 50%;
  19.         transform: translateY(-50%);
  20. }
  21. h1{
  22.         font-size: 66px;
  23.         margin-bottom: 22px;
  24. }
  25. p{
  26.         font-size: 33px;
  27.         margin-bottom: 22px;
  28. }
  29. a{
  30.         font-size: 55px;
  31.         color: #00AA00;
  32.         border: 1px solid #00AA00;
  33.         border-radius: 10px;
  34.         padding: 10px 66px;
  35.         text-decoration: none;
  36. }
复制代码
最佳答案
134 
累计签到:655 天
连续签到:183 天
不二如是  楼主| 发表于 2017-2-21 21:55:02 | 显示全部楼层

原封不动,你是啥浏览器?

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>欢迎来到HTML世界</title>
  6.     <style type="text/css">
  7.         html,body{
  8.             height: 100%;
  9.             color: #FF0088;
  10.             font-family: sans-serif;
  11.         }
  12.         body{
  13.             background: url(asdf.jpg) center center;
  14.             background-size: cover;
  15.             margin: 0; /*养成初始化好习惯*/
  16.             padding: 0;
  17.             position: relative;
  18.         }
  19.         #contatiner{
  20.             width: 100%;
  21.             text-align: center;
  22.             position: absolute;
  23.             top: 50%;
  24.             transform: translateY(-50%);
  25.         }
  26.         h1{
  27.             font-size: 66px;
  28.             margin-bottom: 22px;
  29.         }
  30.         p{
  31.             font-size: 33px;
  32.             margin-bottom: 22px;
  33.         }
  34.         a{
  35.             font-size: 55px;
  36.             color: #00AA00;
  37.             border: 1px solid #00AA00;
  38.             border-radius: 10px;
  39.             padding: 10px 66px;
  40.             text-decoration: none;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45. <div id="contatiner">
  46.     <h1>我爱鱼C</h1>
  47.     <p>WWW.FihsC.com - 让编程改变世界</p>
  48.     <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  49. </div>
  50. </body>
  51. </html>
复制代码

效果图;
Snip20170221_510.png
最佳答案
0 
累计签到:54 天
连续签到:1 天
Forever_slient 发表于 2017-2-21 21:57:57 | 显示全部楼层
不二如是 发表于 2017-2-21 21:55
原封不动,你是啥浏览器?

ie和google都是一样的
最佳答案
0 
累计签到:54 天
连续签到:1 天
Forever_slient 发表于 2017-2-21 22:07:27 | 显示全部楼层
都写在html中没有问题,可以正常显示,但将css设置放置在.css文件中,在html中调用.css后,显示就不正常了
最佳答案
134 
累计签到:655 天
连续签到:183 天
不二如是  楼主| 发表于 2017-2-21 22:12:02 | 显示全部楼层
Forever_slient 发表于 2017-2-21 21:57
ie和google都是一样的

代码没问题

你发个网页效果图我看看
最佳答案
0 
累计签到:54 天
连续签到:1 天
Forever_slient 发表于 2017-2-21 22:22:03 | 显示全部楼层
不二如是 发表于 2017-2-21 22:12
代码没问题

你发个网页效果图我看看

捕获.PNG
最佳答案
0 
累计签到:54 天
连续签到:1 天
Forever_slient 发表于 2017-2-21 22:42:53 | 显示全部楼层
解决了,在css文件中@charset "UTF-8"后忘记写分号了。
谢谢您的帮忙!!!
最佳答案
0 
累计签到:41 天
连续签到:1 天
longwutian004 发表于 2017-3-2 17:56:38 | 显示全部楼层
赞赞赞!!!
最佳答案
0 
累计签到:3 天
连续签到:1 天
345127857 发表于 2017-3-7 13:55:34 | 显示全部楼层
交作业的时候怎么贴图片呀
最佳答案
0 
累计签到:44 天
连续签到:1 天
逢源try一try 发表于 2017-4-13 21:44:51 | 显示全部楼层
  1. <link href = "SCss.css" rel = "stylesheet">
复制代码

其中,rel = "stylesheet" 是啥意思?
最佳答案
0 
累计签到:137 天
连续签到:1 天
shishunfu 发表于 2017-4-18 09:16:05 | 显示全部楼层
逢源try一try 发表于 2017-4-13 21:44
其中,rel = "stylesheet" 是啥意思?

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

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-5-20 18:04

快速回复 返回顶部 返回列表