HTML+CSS提升小实战
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>几米简介</title>
5 <style type="text/css">
6 *{
7 margin:0px;padding:0px;
8 }
9 #header{
10 background:url(images/banner.gif) no-repeat;
11 margin:0 auto auto 0;
12 width:760px;
13 height:90px;
14 text-align:right;
15 }
16 #header a{
17 text-decoration:none;/*删除下划线*/
18 color:white;
19 font-family:"宋体";
20 font-size:10px;
21 margin:0 5px;
22
23 }
24 #header a:hover{
25 text-decoration:underline;/*鼠标落下显示下划线*/
26 }
27 .ma{/*设置整体居中显示*/
28 margin:0 auto;
29 width:760px;
30 border:3px solid blue;
31 }
32 .im{
33 background:url(images/t_profile.gif) no-repeat;
34 }
35 .bo{
36 background-color:#eff9f9;
37 width=760px;
38 height:440px;
39 border:1px solid #eff9f9;
40 font-family:"楷体";
41 font-size:16px;
42
43 }
44 h2{
45 margin:40px auto 10px auto;
46 font-size:20px;
47 font-family:"宋体";
48 }
49 p{
50 text-indent:26px;/*此标签的作用是段落*/
51 }
52 img{
53 border:1px solid #eff9f9;
54 margin:40px 0 0 0;
55 }
56 .con{
57 background:url(images/t_book.gif) no-repeat;
58 /*border-bottom:6px solid pink;*/
59 }
60 .book{
61 background-color:#eff9f9;
62 width:760px;
63 }
64 .footer{
65 text-align:center;
66 background-color:yellow;
67 width:760px;
68 height:30px;
69 font-size:13px;
70 font-family:"宋体";
71 }
72 </style>
73 </head>
74
75 <body>
76 <div class="ma">
77 <div id="header">
78 <a href="#">联系我们</a>
79 <a href="#">站点地图</a>
80 </div>
81 <div class="bo im">
82 <h2>:: 关于幾米 ::</h2>
83 <p>幾米，一位用画笔描绘梦想、吸引无数读者画迷为之疯狂，知名度迅速窜升的当红绘本作家，同时却也是一个腼腆善良的中年男子，偏好简单的居家生活，低调而淡泊。</p>
84 <p>幾米的个性害羞内向，不擅长用言语表达，他用敏锐细腻的心去感受周遭的人与事，将情感、思绪藉由「绘画」传达他对大千世界的看法，作品风貌多变，创作力源源不绝，因此看幾米的作品，就像是走入他的内在，幾米的故事引领着每一位欣赏他作品的人看到并相信世界上的美与善，同时也反应了现代人生活中的点点滴滴，因此每个人都能在他的故事找到一个映照和寄托，或许这就是幾米作品的迷人之处。</p>
85 <p>幾米，绘本作家，文化大学美术系毕业，曾在广告公司工作十二年，后来为报纸、杂志等各种出版品画插画 。1998年开始创作，发表《森林里的秘密》和《微笑的鱼》，拿下当年度中国时报开卷最佳童书、
86 民生报好书大家读年度最佳童书，以及联合报读书人最佳童书奖。 1999年出版《向左走．向右走》，开创出成人绘本的新型式，兴起一股绘本创作风潮。本书获选为1999年金石堂十大最具影响力的书，并已改
87 编成电影、电视剧。之后陆续推出《听幾米唱歌》、《月亮忘记了》、《森林唱游》、《我的心中每天开出一朵花》等作品，展现惊人的创作力和多变的叙事风格。 2001年出版《地下铁》，获选2002年金鼎奖
88 推荐优良图书，并改编成音乐剧和电影。次年《照相本子》、《1.2.3.木头人》和《我只能为你画一张小卡片》获选2002年行政院新闻局推介中小学生优良课外读物图书类推荐读物。2002年《布瓜的世界》甫上
89 市便登上各大书店畅销排行榜第一名。 2003、2004年陆续出版《幸运儿》、《你们我们他们》、《又寂寞又美好》、《履历表》、《遗失了一只猫》等作品，内容风格上更形突破。2005年的《小蝴蝶小披风》
90 和《失乐园》开始经营角色，多变的故事节奏有不同于以往的阅读趣味。 作品风靡两岸三地，美、法、德、希腊、韩、日、泰等国皆有译本。学界和媒体多次以「幾米现象」为主题分析评论。 2003年Studio Voice杂
91 志选为亚洲最有创意的五十五人之一。 </p>
92 </div>
93 <div class="con book">
94 <img src="data:images/book1.jpg"/>
95 <img src="data:images/book2.jpg"/>
96 <img src="data:images/book3.jpg"/>
97 <img src="data:images/book4.jpg"/>
98 <img src="data:images/book5.jpg"/>
99 </div>
100 <div class="footer">
101 copyright © 2004-2012 Jimmyspa.com All Rights Reserved.
102 </div>
103 </div>
104 </body>
105 </html>
亲自实战的HTML+CSS案例
CSS+HTML开发经验
1：大模块，也具有唯一性，所以在开头的div使用id选择器header;
中间层使用id选择器mainbody,底层使用id选择器footer;
2:先布局，后填充
3: 为三个层设置一个包裹层，使内容居中,方法技巧，使用width设置一下宽度，然后使用margin:0 auto;自动居中
(自动居中一列布局需要设置 margin 左右值设置为 auto，而且一定要设置width为一个定值。)
特别提醒，设置了浮动float或者设置了绝对定位position也是无法实现自动居中的
CSS+HTML的案例
(CSS 规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。)
1：自动居中
列布局案列，盒子模型的使用方法
自动居中与列布局：
三个技能点：标准文档流，块级元素，margin属性
2：浮动布局案例
2.1：float属性，解决浮动影响的方法
2.2：网页布局最常见的方式之一
主要应用技能：float属性，使纵向排列的块级元素，横向排列
margin属性，设置两列之间的间距
3：绝对定位布局案例
绝对定位实现横向两列或多列布局
4:标准文档流(Normal flow)
4.1：特点：从上到下，从左到右，输出文档内容
由块级元素和行级元素组成
4.2：块级元素
特点：从左到右撑满页面，独占一行
触碰到页面边缘时，会自动换行
常见的块级元素，如
div,ul,li,dl,dt,p...
4.3:行级元素
特点:能在同一行内显示
不会改变html文档结构
常见的行级标签如
span,strong,img,input...
4.4:块级元素和行级元素都是盒子模型
盒子模型=网页布局的基石，由4部分组成：
(1)：边框(border)
(2)：外边距(margin):上(top) 右(right) 下(bottom) 左(left)
margin顺时针设置方向：三个值代表上，左右，下
两个值代表上下，左右
一个值代表四个属性值相同
(3)：内边距(padding):设置三个值代表：上，左右，下
上右下左的顺序设置值
(4)：盒子中的内容(content)
盒子3D模型有外到内margin>background-color>background-image>padding+content>border
从第一层到第五层依次为：border、content+padding、background-image、background-color、margin。
从第五层到第一层依次为：margin、background-color、、background-image、content+padding、border。
盒子模型的尺寸=边框+外边距+内边距+盒子中的内容尺寸
5:浮动布局
5.1：css中规定的第二种定位机制，能够实现横向多列布局。
5.2：通过float属性实现。含三个属性值，left左浮动，right右浮动，none不浮动
特点：元素会左移，或右移，直至碰触到容器为止
设置了浮动的元素，仍旧处于标准文档流中
注意：当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化
5.3：清除浮动的常用方法
(1):clear属性：常用clear:both或者clear:left或者clear:right;
(2):同时设置width:100%(或固定宽度)+overflow:hidden;
(对受到浮动影响的元素设置清除浮动clear:both或者width:100%+overflow:hidden;)
当父包含块缩成一条时，用clear:both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动
6:绝对定位
6.1：通过设置position属性实现，css中规定的第三种定位机制
6.2：position属性
拥有3种定位形式：
(1)静态定位，
(2)相对定位：
特点：相对于自身原有位置进行偏移，仍处于标准文档流中，随即拥有偏移量和z-index属性
(3)绝对定位(属性值含absolute和fixed)
特点：建立了以包含块为基准的定位，完全脱离了标准文档流，随即拥有偏移属性和z-index属性;
未设置偏移量特点：无论是否存在已定位祖先元素，都保持在元素初始位置，脱离了标准文档流
设置偏移量特点，偏移参照基准：无已定位祖先元素，以html为偏移参照基准，有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
可设置4个属性值：(1)static静态定位，(2)relative相对定位，(3)absolute绝对定位，(4)fixed固定定位
6.3：横向两列布局
使用绝对定位实现横向两列布局，应用比较少
优势：使用absolute实现横向两列布局，常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能
relative:父元素相对定位
absolute:自适应宽度元素绝对定位
注意：固定宽度列的高度>自适应宽度的列
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动布局--横向两列</title>
<style type="text/css">
*{margin:0;padding:0;font-family:Verdana, Geneva, sans-serif,"宋体";}
a{text-decoration:none;}
a:hover{text-decoration:underline;} h2{line-height:28px;border-bottom:1px solid yellow;margin-top:12px;font-size:18px;}
h2 span{float:right;}
h2 span a{font-size:12px;font-weight:normal;} #wrap{width:50%;margin:0 auto;}/*wrap这层设置整体的宽度和居中显示*/
#header{width:100%;overflow:hidden;margin-bottom:10px;}/*清除浮动*/
#mainbody{width:100%;overflow:hidden;margin-bottom:10px;}
#footer{margin-top:10px;width:100%;padding:15px 0;} .logo{width:100%;overflow:hidden;margin-top:5px;}
.logo h1{float:left;background:url(images/logo.gif) no-repeat;height:80px;width:210px;cursor:pointer;text-indent:-9999px;}
.logo dl{float:right;margin-top:10px;}
.logo dt{font-weight:bold;color:black;line-height:26px;}
.logo dd{font-size:15px;line-height:24px;color:black;} #nav{width:100%;margin-top:2px;background:url(images/navbg.gif) no-repeat;height:36px;overflow:hidden;}
#nav ul{width:90%;margin:0 auto;overflow:hidden;}
#nav li{float:left;/*字体成行排列*/margin:0 20px;font-size:16px;font-weight:bold;line-height:34px;/*影响字体在中间的位置*/}
#nav a{color:black;}
#nav a:hover{text-decoration:none;}
#nav li.current{background:url(images/home.gif) 0 4px no-repeat;width:88px;/*白色图片的大小*/text-align:center;/*设置字体居中*/}
#nav li.qq_lab{background:url(images/arrow_r.gif) 0 8px no-repeat;float:right;padding-left:36px;/*设置箭头和汉字距离*/} .content{float:left;width:600px;}
.box{margin-bottom:15px;width:100%;/*设置为同一行显示效果*/overflow:hidden;} .sidebar{float:right;width:300px;} .softwerelist{width:100%;overflow:hidden;list-style:none;}
.softwerelist li{margin-bottom:15px;overflow:hidden;width:100%;/*清除浮动*/}
.softwerelist li dl{float:left;padding-left:45px;/*用于填充图片*/}
.softwerelist li span{float:right;font-size:12px;margin-top:5px;color:black;}
.softwerelist li span a{font-size:12px;text-decoration:underline;}
.softwerelist li span a:hover{text-decoration:none;}
.softwerelist li dt{font-size:16px;line-height:26px;color:blue;}
.softwerelist li dt a{text-decoration:underline;font-weight:bold;margin-right:10px;}
.softwerelist li dt a:hover{text-decoration:none;}
.softwerelist li dd{font-size:16px;font-family:"宋体"} .softwere1{background:url(images/icon_1.gif) 0 5px no-repeat;}
.softwere2{background:url(images/icon_2.gif) 0 5px no-repeat;}
.softwere3{background:url(images/icon_3.gif) 0 5px no-repeat;}
.softwere4{background:url(images/icon_4.gif) 0 5px no-repeat;}
.softwere5{background:url(images/icon_5.gif) 0 5px no-repeat;}
.softwere6{background:url(images/icon_6.gif) 0 5px no-repeat;} .download{background:url(images/downicon.gif) 0 6px no-repeat;padding:3 0 0 15px;/*距离上右下左的距离*/} .newlist{font-family:"宋体";font-size:12px;width:100%;}
.newlist li{line-height:22px;} .downlist{width:100%;overflow:hidden;}
.downlist li{overflow:hidden;line-height:26px;/*设置行高*/padding-left:23px;margin-bottom:6px;}
.downlist li span{float:right;/*使字体靠右*/font-size:12px;color:purple;}
.downlist li span a{text-decoration:underline;}
.downlist li span a:hover{text-decoration:none;} .soft_r_1{background:url(images/soft_r_1.gif) 0 5px no-repeat;}
.soft_r_2{background:url(images/soft_r_2.gif) 0 5px no-repeat;}
.soft_r_3{background:url(images/soft_r_3.gif) 0 5px no-repeat;}
.soft_r_4{background:url(images/soft_r_4.gif) 0 5px no-repeat;}
.soft_r_5{background:url(images/soft_r_5.gif) 0 5px no-repeat;}
.soft_r_6{background:url(images/soft_r_6.gif) 0 5px no-repeat;} .fri_link{width:100%;}
.fri_link a{width:100px;float:left;/*宽度和浮动决定了排版*/font-size:12px;line-height:26px;/*决定了行高*/} .margin_btm_15{margin-bottom:15px;} #footer{text-align:center;background-color:white;margin-top:10px;padding:15px 0;width:100%;border:2px solid pink;}
#footer li{line-height:24px;font-size:13px;color:black;list-style:none;/*去除列表前的圆点，最好设置在*选择器中*/}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="logo">
<h1><a href="#">腾讯软件中心</a></h1>
<dl>
<dt>腾讯软件中心，腾讯精品软件展示平台</dt>
<dd>我们会不断提升产品的性能和体验，为您提供最好用的软件！</dd>
</dl>
</div>
<div id="nav">
<ul>
<li class="current"><a href="#">首页</a></li>
<li><a href="#">pc产品大全</a></li>
<li><a href="#">mac产品大全</a></li>
<li><a href="#">企业产品大全</a></li>
<li><a href="#">联系我们</a></li>
<li class="qq_lab"><a href="#">QQ实验室</a></li>
</ul>
</div>
</div> <div id="mainbody">
<div class="content">
<img src="data:images/banner.png" width=600px height=200px class=margin_btm_15}
>
<div class="box">
<h2><a href="#">腾讯软件</a>
<span><a href="#">更多>></a></span>
</h2>
<ul class="softwerelist">
<li>
<dl class="softwere1">
<dt><a href="#">QQ 5.2</a>更新日期：2016-08-22</dt>
<dd>免费的即时通讯平台，带来更多沟通乐趣</dd>
</dl>
<span><a href="#" class="download">下载</a>|<a href="#">官方网站</a></span>
</li>
<li>
<dl class="softwere2">
<dt><a href="#">腾讯电脑管家</a>更新日期：2016-08-22</dt>
<dd>专业的免费杀毒软件，全面便捷管理电脑</dd>
</dl>
<span><a href="#" class="download">下载</a>|<a href="#">官方网站</a></span>
</li>
<li>
<dl class="softwere3">
<dt><a href="#">软件管理</a>更新日期：2016-08-22</dt>
<dd>下载软件，就用软件管理</dd>
</dl>
<span><a href="#" class="download">下载</a>|<a href="#">官方网站</a></span>
</li>
<li>
<dl class="softwere4">
<dt><a href="#">QQ音乐2016贺岁版</a>更新日期：2016-08-22</dt>
<dd>全新界面设计，视野更开阔，操作更简单</dd>
</dl>
<span><a href="#" class="download">下载</a>|<a href="#">官方网站</a></span>
</li>
<li>
<dl class="softwere5">
<dt><a href="#">QQ浏览器</a>更新日期：2016-08-22</dt>
<dd>全新设计，简约轻快，精巧易用</dd>
</dl>
<span><a href="#" class="download">下载</a>|<a href="#">官方网站</a></span>
</li>
<li>
<dl class="softwere6">
<dt><a href="#">QQ影像</a>更新日期：2016-08-22</dt>
<dd>管理、浏览、编辑、上传一站体验</dd>
</dl>
<span><a href="#" class="download">下载</a>|<a href="#">官方网站</a></span>
</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="box">
<h2>最新动态</h2>
<ul class="newlist">
<li>· <a href="#">腾讯电脑管家8.0正式版发布</a></li>
<li>· <a href="#">腾讯游戏平台首推强加速、LOL助手永久免费</a></li>
<li>· <a href="#">微云2.0六大终端全新出击，超强收藏功能</a></li>
<li>· <a href="#">腾讯手机管家(PC版)2.0新版 只为用户更好体验</a></li>
<li>· <a href="#">QQ影音3.7发布，提升转码速度</a></li>
<li>· <a href="#">QQ2012 Beta2(Q+)：全新Q+，更快更便捷</a></li>
<li>· <a href="#">Foxmail 7发布新版本，支持繁、简、英多语言</a></li>
</ul>
</div>
<div class="box">
<h2><a href="#">更多推荐</a>
<span><a href="#">更多>></a></span>
</h2>
<ul class="downlist">
<li class="soft_r_1"><a href="#">QQ旋风</a><span><a href="#" class="download">下载</a></span></li>
<li class="soft_r_2"><a href="#">腾讯视频播放器</a><span><a href="#" class="download">下载</a></span></li>
<li class="soft_r_3"><a href="#">QQ影音</a><span><a href="#" class="download">下载</a></span></li>
<li class="soft_r_4"><a href="#">小Q书桌</a><span><a href="#" class="download">下载</a></span></li>
<li class="soft_r_5"><a href="#">Foxmail</a><span><a href="#" class="download">下载</a></span></li>
<li class="soft_r_6"><a href="#">顽固木马克星</a><span><a href="#" class="download">下载</a></span></li>
</ul>
</div>
<div class="box">
<h2>合作伙伴</h2>
<div class="fri_link">
<a href="#">腾讯软件管理</a>
<a href="#">腾讯网下载</a>
<a href="#">下载吧</a>
<a href="#">IT168</a>
<a href="#">东坡下载</a>
<a href="#">完美下载</a>
<a href="#">腾牛网</a>
<a href="#">PC6下载站</a>
<a href="#">乡巴佬下载</a>
</div>
</div>
</div>
</div> <div id="footer">
<ul>
<li>Copyright © 1998 - 2012 Tencent. All Rights Reserved.</li>
<li>腾讯公司 版权所有</li>
</ul>
</div>
</div>
</body>
</html>
引用外部css文件的方法，将下面这句话添加到<head></head>标签中
<link href="css/*.css" type="text/css" rel="stylesheet" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位实现布局</title>
<style type="text/css">
*{margin:0;padding:0;font-size:12px; color:#333; font-family:Verdana, Geneva, sans-serif,"宋体";/*设置字体也很重要*/list-style:none;/*去除标签的圆点*/}
a{text-decoration:none;}
a:hover{text-decoration:underline;} #wrap{width:40%;margin:0 auto;/*宽度和margin设置整体居中显示*/padding:0 10px 10px;border-left:1px solid yellow;
border-right:1px solid yellow;}
h1{font-size:30px;background-color:pink;width:100%;height:88px;text-align:left;text-indent:30px;/*控制首行缩进*/
line-height:80px;/*控制行高*/font-family:"宋体";} .nav{width:100%;margin-top:10px;}
.nav li{float:left;/*设置浮动使字体聚在同行*/margin:0 32px;}
.nav li a{font-size:20px;text-decoration:none;padding-bottom:2px;display:block;}
.nav li a:hover{text-decoration:none;border-bottom:3px red solid;}
.nav li.current{border-bottom:3px red solid;}
.nav li.current a:hover{border-bottom:none;} #mainbody{width:100%;position:relative;/*相对定位*/margin-top:60px;}
.sidebar{width:100%;padding-bottom:10px;}
.sidebar dl{padding:0 0 5px;/*上，左右，下*/}
.sidebar dt{background-color:purple;font-size:24px;font-family:"宋体";font-weight:bold;width:180px;line-height:26px;
padding:5px 0 5px 15px;margin-bottom:15px;}
.sidebar dd{font-size:10px;font-family:"宋体";line-height:20px;padding-left:12px;}
.sidebar dd.current a{color:red;} #content{margin-left:200px;position:absolute;top:0px;/*调整布局，绝对定位*/width:70%;/*控制伸缩性，页面更加优化*/}
#content h1{background-color:white;font-size:24px;font-family:"宋体";font-weight:bold;margin:-23px auto;}
#content h3{font-family:"宋体";font-size:12px;margin:10px auto 10px 0;}
#content dl{margin-bottom:10px;}
#content dt{line-height:26px;font-weight:bold;}
#content dd{line-height:22px;} .learn a{text-decoration:underline;color:blue;padding-bottom:2px;font-size:16px;}
.learn a:hover{text-decoration:none;} .pageto{border-top:1px solid gray;border-bottom:3px solid gray;margin:5px auto;padding:15px 0;}
.pageto a{margin-left:20px;border:2px gray solid;padding:5px 20px;background-color:#f3f3f3;font-size:12px;color:#555;}
.pageto a:hover{text-decoration:none;color:#000;/*颜色高亮*/} .tips{color:gray;margin-top:20px;}
.disline{border-bottom:2px solid gray;margin-top:10px;line-height:26px;} #footer{text-align:center;background-color:#ddd;width:100%;height:40px;padding:15px 0;margin-top:15px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div>
<h1>前端开发教程</h1>
</div>
<div class="nav">
<ul>
<li class="current"><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</div>
</div>
<div id="mainbody">
<div class="sidebar">
<dl>
<dt>CSS 基础教程</dt>
<dd class="current"><a href="#">CSS 简介</a></dd>
<dd><a href="#">CSS 基础语法</a></dd>
<dd><a href="#">CSS 高级语法</a></dd>
<dd><a href="#">CSS 派生选择器</a></dd>
<dd><a href="#">CSS id 选择器</a></dd>
<dd><a href="#">CSS 类选择器</a></dd>
<dd><a href="#">CSS 属性选择器</a></dd>
<dd><a href="#">CSS 创建</a></dd>
</dl>
<dl>
<dt>CSS 样式</dt>
<dd><a href="#">CSS 背景</a></dd>
<dd><a href="#">CSS 文本</a></dd>
<dd><a href="#">CSS 字体</a></dd>
<dd><a href="#">CSS 链接</a></dd>
<dd><a href="#">CSS 列表</a></dd>
<dd><a href="#">CSS 表格</a></dd>
<dd><a href="#">CSS 轮廓</a></dd>
</dl>
<dl>
<dt>CSS 盒子模型</dt>
<dd><a href="#">CSS 盒子模型概述</a></dd>
<dd><a href="#">CSS 内边距</a></dd>
<dd><a href="#">CSS 边框</a></dd>
<dd><a href="#">CSS 外边距</a></dd>
<dd><a href="#">CSS 外边距合并</a></dd>
</dl>
<dl>
<dt>CSS 定位</dt>
<dd><a href="#">CSS 定位概述</a></dd>
<dd><a href="#">CSS 相对定位</a></dd>
<dd><a href="#">CSS 绝对定位</a></dd>
<dd><a href="#">CSS 浮动</a></dd>
</dl>
<dl>
<dt>CSS 选择器</dt>
<dd><a href="#">CSS 元素选择器</a></dd>
<dd><a href="#">CSS 选择器分组</a></dd>
<dd><a href="#">CSS 类选择器详解</a></dd>
<dd><a href="#">CSS ID 选择器详解</a></dd>
<dd><a href="#">CSS 属性选择器详解</a></dd>
<dd><a href="#">CSS 后代选择器</a></dd>
<dd><a href="#">CSS 子元素选择器</a></dd>
<dd><a href="#">CSS 相邻兄弟选择器</a></dd>
<dd><a href="#">CSS 伪类</a></dd>
<dd><a href="#">CSS 伪元素</a></dd>
</dl>
<dl>
<dt>CSS 高级</dt>
<dd><a href="#">CSS 对齐</a></dd>
<dd><a href="#">CSS 尺寸</a></dd>
<dd><a href="#">CSS 分类</a></dd>
<dd><a href="#">CSS 导航栏</a></dd>
<dd><a href="#">CSS 图片库</a></dd>
<dd><a href="#">CSS 图片透明</a></dd>
<dd><a href="#">CSS 媒介类型</a></dd>
<dd><a href="#">CSS 注意事项</a></dd>
<dd><a href="#">CSS 总结</a></dd>
</dl>
</div>
<div id="content">
<h1>CSS简介</h1>
<div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
<div class="disline">
<h3>你应该知道这些知识</h3>
<p>在继续学习之前，你应该有一个以下基本认识</p>
<p>· HTML / XHTML</p>
<p class="learn">如果您希望首先学习这些项目，我们的<a href="#">主页</a>上可以找到教程</p>
</div>
<div class="disline">
<h3>什么是CSS？</h3>
<p>CSS即级联样式表。 它是一种用来表现HTML（标准通用标记语言的一个应用）或
XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
</div>
<div class="disline">
<h3>基本信息</h3>
<p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，
CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样
式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理
解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
</div>
<div>
<h3>发展历史</h3>
<dl>
<dt>CSS1</dt>
<dd>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</dd>
</dl>
<dl>
<dt>CSS2</dt>
<dd>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</dd>
</dl>
<dl>
<dt>CSS3</dt>
<dd>CSS3 计划将 CSS 划分为更小的模块</dd>
</dl>
</div>
<p class="learn"><a href="#">亲自体验一下</a></p>
<div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
<p class="tips">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
</div>
</div>
<div id="footer">
柠檬学院©版权所有
</div>
</div>
</body>
</html>
HTML+CSS提升小实战的更多相关文章
- HTML+CSS小实战案例
HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图
技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...
- css的小技巧
前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...
- 一些常用的html/CSS效果---小技巧
我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- 第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- 通过css实现小三角形
下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...
- css样式小技巧
1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...
- CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅
首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
随机推荐
- golang--gopher北京大会(1)
大会感想:牛人真的很能写代码,实现很多功能,而且开源的精品越多,影响力越大,越能过上dream life.比如beego的作者,去了America,进入了Apple.另外,精英们特点是表达能力很强,也 ...
- Spark Streaming
Spark Streaming Spark Streaming 是Spark为了用户实现流式计算的模型. 数据源包括Kafka,Flume,HDFS等. DStream 离散化流(discretize ...
- VS2010安装异常中断后无法安装的解决方法（安装时发生严重错误）
最近,因为公司开发的需要,对开发环境进行全面的升级,在这其中也遇到了不少问题,在之后将陆续整理出来,以便以后查看. 之前开发环境:ArcGIS9.3,ArcEngine9.3,Oracle10g,Ar ...
- Java 读取Properties配置文件
1.img_url.properties imgurl=http://10.1.19.65:8090 2.Test.java InputStream inputStream = this.getCla ...
- Verilog之SOS信号-仿顺序操作
SOS信号:. . . _ _ _ . . . 1. module sos_module ( CLK, RSTn, Pin_Out, SOS_En_Sig ); input CLK; input RS ...
- nginx apache负载均衡测试
apache配置 (监听内网ip和端口) Listen 10.163.170.8:8001 Listen 10.163.170.8:8002 Listen 10.163.170.8:8003 < ...
- Remove Linked List Elements
Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...
- json jackson
1.引入依赖 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId&g ...
- 从一个Fragment跳转到另一个Fragment
我们知道Activity之间的跳转可以使用 startActivity(intent).但Fragment之间的跳转却不能使用该方法,那该怎么办呢? 直接上代码: 核心代码 @Override//核心 ...
- struts2--文件上传与下载
1.文件上传: --表单准备: > 需把HTML表单的enctype属性设置为multipart/form-data; > 需把HTML表单的method属性设置为post: > 需 ...