称之为层叠样式单
它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小，颜色，以及元素的精确定位等
在传统的web网页设计里，使用CSS能让单调的HTML网页更富想象力
CSS的引入方式
CSS可以控制HTML文档的显示，但在控制文档显示之前，首先应在需要显示的HTML文档中引入CSS样式单，四种引入方式：
1. 使用内联样式：这种方式将样式内联定义到具体的HTML元素上，通常用于精确控制一个HTML元素的表现。
2. 使用内部样式定义：这种方式是通过在HTML文档头定义样式单部分来实现，在这种方式上，每批CSS样式只控制一份HTML文档
3.链接外部样式文件：这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式下，一份样式可控制多份文档
4. 导入外部样式文件：这种方式与第三种方式类似，只是使用@import来引入外部样式文件
**1. 使用内联样式**
* 是所有样式中最为直接的一种，它直接对HTML标签使用style属性<p style="color:#FF0000; font-size:20px; text-decoration:underline;"> Hello world </p>**2. 使用内部样式定义**
* 是将CSS写在<html>
<head>
<title> New Document </title>
<style type="text/css">
<!--
p{
color:#FF0000;
text-decoration:underline;
font-weight:bold;
font-size:25px
}
-->
</style>
</head>
<body>
<p> Hello world </p>
</body>
</html>**3.链接外部样式文件**
* 使用频率最高，让结构与表现分离 语法：<link type="text/css" rel="stylesheet" href="外部样式文件"><html>
<head>
<title> New Document </title>
<link type="text/css" rel="stylesheet" href="1.css">
</head>
<body>
<p> Hello world </p>
</body>
</html>p{
color:#FF0000;
text-decoration:underline;
font-weight:bold;
font-size:25px
}**4. 导入外部样式文件**
* 与link方式功能类似，就是语法不同，在<html>
<head>
<title> New Document </title>
<style type="text/css">
<!--
@import url(1.css);
-->
</style>
</head>
<body>
<p> Hello world </p>
</body>
</html><html>
<head>
<title> New Document </title>
<style type="text/css">
<!--
@import url(1.css);
-->
</style>
</head>
<body>
<p> Hello world </p>
</body>
</html>Selector{
property:value1;
property:value2;
}**1.标记选择器（元素选择器）**
*E{......} <!--其中E代表有效的HTML元素，已经设计好的标签，如P,div标签等等--> **2.类选择器**
*[E](可省略).classvalue(类名){....}<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style type="text/css">
.one{color:red; font-size:18px}; <!--谁都可以引用-->
div.two{color:green; font-size:30px}; <!--只有div标签引用class two时才能起作用-->
</style>
</head>
<body>
<p class="one"> Hello world </p>
<p> Hello world </p>
<p class="two"> Hello world </p> <!--不是div标签，所以引用无效，字体未改变-->
<div class="two">hello world</div>
<div class="one"> Hello world </div>
</body>
</html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style type="text/css">
.top{
background-color:gray;
}
.one{
color:red;
font-size:22px;
}
</style>
</head>
<body>
<p> Hello world </p>
<p class="one"> Hello world </p>
<p class="top"> Hello world </p>
<p class="top one"> Hello world </p> <!--同时使用top和one-->
</body>
</html>**3.ID选择器**
*[E]#idvalue(id选择器名){......}<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style type="text/css">
div#top{
background-color:gray;
}
#two{
font-weight:bold;
}
#one{
color:red;
font-size:22px;
}
</style>
</head>
<body>
<p> Hello world </p>
<p id="one"> Hello world </p>
<p id="two"> Hello world </p>
<p id="two one"> Hello world </p>
<div id="top">hello world</div>
</body>
</html>**4.选择器组合**
*Selector1.Selector2.Selector3{.......} <!--Selector1等都是有效的选择器--><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style type="text/css">
h1,h2,h3,p{
color:blue;
}
h2.special,.special,#one{
color:red;
}
</style>
</head>
<body>
<p> Hello world </p>
<p class="special"> Hello world </p>
<h2> Hello world </h2>
<h2 class="special"> Hello world </h2>
<p id="one"> Hello world </p>
</body>
</html>**5.选择器嵌套**
*Selector1 Selector2 {.......} <!--选择器之间是空格分割而不是逗号--><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style type="text/css">
p b{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<p>嵌套使<b>用<b>CSS</b></b>标记的方法</p>
嵌套之外的<b>标记</b>不生效
</body>
</html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style>
img{
border-left-style:dotted;
border-left-color:#FF990;
border-left-width:5px;
border-right-style:dotted;
border-right-color:#33CC33;
border-right-width:20px;
border-top-style:solid;
border-top-color:red;
border-top-width:10px;
border-bottom-style:groove;
border-bottom-color:green;
border-bottom-width:15px;
}
</style>
</head>
<body>
<img src="timg.jpg">
</body>
</html>img{
border-right:5px double red;
border-left:8px solid green;
}<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style>
body{
background-image:url(timg.jpg);
background-repeat:repeat;
}
p{color:white;}
</style>
</head>
<body>
<p>说唱会馆是国内风格规划最为明确，最超前的厂牌，最早开始
紧跟潮流大规模做TRAP音乐的，从14年底开始到16年国内厂牌大规模Trap，在国内圈子，
会馆基本是领先一年的理念。包括在youtube注册专门的频道，注重MV在国外圈子的发布，
和韩国，美国等等其他国家rapper合作，这一点都是领先国内厂牌的。至少从规划来说，
说唱会馆是最为清晰的一个。国内实力前5的rapper，说唱会馆占了两个（谢帝，马思唯）
以及其他都是全国顶尖实力的rapper.当然这是个人看法。和大部分人的看法不同，其实说
唱会馆成员，除了谢帝普通话一般般之外，其他人的普通话rap其实也是一样拿手，只是因
为四川话确实在rap方面有得天独厚的优势，加上会馆理念坚持方言，大家才不怎么出普通话歌曲而已。
自2012年起每年说唱会馆会举办数场专场演出，取得了良好的市场反应，于2015年10月1日
举办中国内地Hip Hop音乐首次万人演唱会（谢帝之"好耍"演唱会
</p>
</body>
</html><style>
a:link{
color:#005799;
text-decoration:none;
}
a:visited{
color:#000000;
text-decoration:none;
}
a:hover{
color:#FFFF00;
text-decoration:ubderline;
}
a:active{
color:#FF0000;
text-decoration:underline;
}
</style>一.盒子模型
我们可以把页面中的元素都可以看做一个盒子，占据着一定的页面空间，这些占据的空间往往比单纯的内容要大，换句话说，我们可以调整盒子的边框和距离的参数来调节盒子的位置
可以看出，一个盒子的宽度（或高度）是由content+padding+border+margin,并且对于任何一个盒子，都可以分别设定4条边各自的border,padding,margin。因此我们可以利用好盒子的属性，就能很好的实现各种各样的排版
border(边框)：
border属性主要有3个，分别为color,width,style（实现，虚线等）通常在设置border时常常将三个属性进行很好的配合
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style type="text/css">
div{
border-width:6px;
border-color:red;
margin:20px;
padding:5px;
background-color:gray;
}
</style>
</head>
<body>
<div style="border-style:dashed">hello world</div>
<div style="border-style:dotted">hello world</div>
<div style="border-style:double">hello world</div>
<div style="border-style:solid">hello world</div>
</body>
</html>dashed: 点划线
dotted: 点
double: 双划线
solid: 实心线
padding:
用于控制content(内容)和border（边框）之间的距离
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style type="text/css">
.outside{
padding:10px 30px 50px 200px;
border:1px solid #000000;
background-color:#fffcd3;
}
.inside{
background-color:#66b2ff;
border:1px solid #005dbc;
width:100%;
line-height:40px;
text-align:center;
font-family:Arial;
}
</style>
</head>
<body>
<div class="outside">
<div class="inside">hello world</div>
</div>
</body>
</html>
margin:
元素与元素之间的距离
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style type="text/css">
span{
background-color:#a2d2ff;
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
padding:10px;
}
span.left{
margin-right:30px;
background-color:#a9d6ff;
}
span.right{
margin-left:40px;
background-color:#eeb0b0;
}
</style>
</head>
<body>
<span class="left">hello</span><span class="right">world</span>
</body>
</html>
hello和world之间的距离是margin-left+margin-right=70px
但是两个块级元素（div）之间的距离不再是margin-top与margin-bottom的和，而是两者之中的较大者
元素定义
网页中各种元素都必须有自己的位置，从而搭建出整个页面的结构，我们介绍使用CSS的float,position和index属性来进行块元素的定位
float的定位是CSS排版中最重要的手段，属性float的值很简单，可以设置为left,right或者默认值none,当设置了元素向左或向右浮动时，元素会向其父元素的左侧或右侧靠紧
float标签:
1.不用float标签
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style type="text/css">
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
background-color:#fffea6;
border:1px solid #111111;
padding:25px;
}
.son1{
padding:10px;
margin:5px;
background-color:#70baff;
border:1px dashed #111111;
}
.son2{
padding:5px;
margin:0px;
background-color:#ffd270;
border:1px dashed #111111;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">float1</div>
<div class="son2">float2</div>
</div>
</body>
</html>
padding和margin的区别：
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
2.给son1中加入float:left
当加入这句话时，son1会尽可能向父容器的左边框靠拢，但此时son1并不会和父边框完全闭合，因为father设置了padding:25px,而son1设置了margin:5px,因此会相差30px
当一个子元素加入float后，这个子元素就不在属于父元素了
当son1设置了float以后，son1的宽度仅仅是它的内容本身加上自己的padding，对于父容器而言它已经不属于父块了，所以在其下面的son2会上来，它内部的内容绕在son1周围，并且保持着son1所设置的margin距离。
实例2：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style type="text/css">
body{
margin:5px;
font-family:Arial;
font-size:13px;
}
h3{
background-color:#a5d1ff;
border:1px dotted #222222;
}
.block1{
padding-left:10px;
margin-right:10px;
float:left;
}
</style>
</head>
<body>
<div class="block1"><img src="1timg.jpg" border="0"></div>
<div>rap是一个黑人俚语中的词语，相当于“谈话”（talking），中文意思为说唱。
即有节奏地说话的特殊唱歌形式。发源于纽约贫困黑人聚居区。它以在机械的节奏声的背景下，
快速地诉说一连串押韵的诗句为特征。这种形式来源之一是过去电台节目主持人在介绍唱片时
所用的一种快速的、押韵的行话性的语言。斥责或说唱音乐的节奏，布鲁斯音乐风格包括vocals
等巧妙得和音乐融合。陪同一般包括电子鼓敲打与样品（数字式地被隔绝的酣然的叮咬) 被结合
从其它音乐录音。1979 年第一斥责纪录被创造了并且风格上升了到突起在20年代中期。虽然期限
斥责互换性经常被使用与配合敲打并以节律唱诵的音乐，后者期限包含亚文化群，说唱音乐是简
单地一份。期限配合敲打并以节律唱诵的音乐rap</div>
<h3>说唱起源</h3>
<div>从最早期的词组的当中一个获得被使用在斥责，和可能被发现在精液录音"交谈者的欢欣"
(1979) 由Sugarhill 帮会。除说唱音乐之外，配合敲打并以节律唱诵的音乐亚文化群并且包括
其它形式表示，包括断裂跳舞和街道画艺术并且一个独特的俗话词汇量和流行观念。</div>
</body>
</html>
本来图片在块级标签中，应当占据一整行，但此时div设置了float：left，所以图片尽量向左边靠，文字内容就浮上来。
问题：设置了块1向左浮动，便产生了图文混排的效果，但是作为内容部分第二段的标题，以达到突显的目的，不想参与图文混排，想单独起一行，如何处理？
在CSS中可以通过设置块元素的clear属性来清除float的影响，主要可以设置一下三个值left,right,both
因此在h3中加入clear：left；
position定位：
*position和float一样，也是css排版中非常重要的概念。position从字面意思上看就是制定块的位置。即块相对于其父块的位置和相对它自身应该在的位置
1.设置position：absolute
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<style type="text/css">
#father{
background-color:black;
border:1px doshed #000000;
width:100%;
height:100%;
}
body{
margin:5px;
font-family:Arial;
font-size:13px;
}
#block{
background-color:#fff0ac;
border:1px doshed #000000;
padding:10px;
position:absolute;
left:20px;
top:40px;
}
</style>
</head>
<body>
<div id="father">
<div id="block">absolute</div>
</div>
</body>
</html>一个子元素设置position：absolute后，它就脱离了父元素。
其左边框设置的距离是相对页面body的距离，而不是父块的距离
2.设置position：relative
这时子块是相对于自身在父块的原先位置来进行定位的
将子块position设置为relative时，子块仍属于父块，只是相对于自己在父块中的原先位置有了移动的变化
3.z-index属性
用于调整定位时重叠块的上下位置，当块设置了position属性时，该值便可设置各块之间的重叠高低关系，默认值为0.值越大时，块就在越上面
CSS实战：
CSS的排版是一种流行的排版观念。它将页面首先在整体上进行<div>标记分块，然后对各个块进行css定位，最后再这个快中添加相应的内容。
设计网站思路：
1. 对页面进行整体分析
2. 确定整个页面主要分为几大块
3. 使用DIV标签进行结构化
4. 通过CSS来美化定位每个模块
写一个旅游网站：
1. 先将页面分块
HTML文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="新疆，美丽的地方">
<meta name="Description" content="新疆是一个美丽的地方，让人神往的地方，每年都有很多游人来此游玩">
<title>新疆旅游网</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--整体外层容器-->
<div id="container">
<!--banner条-->
<div id="banner">
<img src="a2.jpg">
</div>
<!--全局导航条-->
<div id="globllink">
</div>
<!--左侧栏-->
<div id="left">
</div>
<!--中间内容栏-->
<div id="middle">
</div>
<!--右侧栏-->
<div id="right">
</div>
<!--脚注-->
<div id="footer">
</div>
</body>
</html>CSS文件：
body{
background:#2286c6;
margin:0px;
padding:0px;
font-size:12px;
font-family:Arial;
}
#container{
margin:0px auto;
width:780px;
height:600px;
text-aligin:left;
background:white;
}
#banner{
margin:0px;
padding:0px;
background:yellow;
height:150px;
width:100%
}
#globllink{
margin:0px;
padding:0px;
background:black;
height:50px;
width:100%
}
#left{
width:200px;
height:370px;
background:pink;
margin:0px;
padding:0px 0px 5px 0px;
float:left;
}
#middle{
width:400px;
height:370px;
background:orange;
margin:0px 2px;
padding:5px 0px 5px 0px;
color:white;
float:left;
}
#right{
width:176px;
height:370px;
background:purple;
margin:0px ;
padding:0px 0px 5px 0px;
float:left;
}
#footer{
width:100%;
height:30px;
background:white;
margin:0px ;
padding:1px 0px;
clear:both;
}
2. 优化每个div模块
<1 全局导航条
html文件
<div id="globllink">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新疆简介</a></li>
<li><a href="#">风土人情</a></li>
<li><a href="#">吃在新疆</a></li>
<li><a href="#">路线选择</a></li>
<li><a href="#">自助行</a></li>
<li><a href="#">游记精选</a></li>
<li><a href="#">用户注册</a></li>
</ul>
</div>CSS文件
#globllink{
margin:0px;
padding:0px;
background:black;
}
#globllink ul{ /*globllink里的ul样式*/
list-style-type:none; /*取消list前面的小圆点*/
margin:0px;
padding:0px;
}
#globllink ul li{ /*globllink里的ul样式*/
float:left;
text-align:center;
width:95px;
}
#globllink ul li a{
display:block; /*本来a为行级标签，此设置将a改为块级标签*/
padding:9px 6px 11px 6px;
margin:opx;
background:url("button2.jpg") no-repeat;
}
#globllink a:link,#globllink a:visited{
color:#004a87;
text-decoration:underline;
}
#globllink a:hover{
color:#004a87;
text-decoration:none;
background:url("button3.jpg") no-repeat;
}
<2 左侧栏效果
左侧栏主要分为两个模块，天气查询和今日推荐，分块可以使用div标签
html文件
<!--左侧栏-->
<div id="left">
<div id="weather">
<h3><span>天气查询</span></h3>
<ul>
<li>乌鲁木齐 雷阵雨 20℃-31℃</li>
<li>吐鲁番 多云转晴 20℃-28℃</li>
<li>齐齐哈尔 晴 25℃-32℃</li>
<li>鲁尔勒 阵雨转阴 21℃-31℃</li>
<li>克拉玛依 雷阵雨 26℃-30℃</li>
</ul>
</div>
<div id="today">
<h3><span>今日推荐</span></h3>
<ul>
<li><a href="#"><img src="a7.jpg"></a></li>
<li><a href="#">喀纳斯河</a></li>
<li><a href="#"><img src="a8.jpg"></a></li>
<li><a href="#">布尔津</a></li>
<li><a href="#"><img src="a9.jpg"></a></li>
<li><a href="#">天山之路</a></li>
</ul>
</div>
</div>CSS文件
#left{
width:200px;
background:white;
margin:0px;
padding:0px 0px 0px 0px;
color:#d8ecff;
float:left;
}
#weather{
background:url("a6.jpg") no-repeat;
margin:0px 2px;
background-color:#035e8d;
}
#weather h3{
font-size:12px;
color:white;
padding:10px 0px 0px 74px;
}
#weather ul{
margin:8px 5px 0px 5px;
color:white;
padding:10px 0px 8px 5px;
list-style-type:none;
}
#today h3{
color:#003973;
font-size:12px;
padding:4px 0px 2px 15px;
margin:0px 0px 5px 0px;
background:#98d8f9;
}
#today{
background:#046ca2;
margin:0px 2px;
padding:0px 0px 10px 0px;
}
#today ul{
list-style-type:none;
padding:0px;
margin:-5px 0px 0px 0px;
}
#today ul li{
text-align:center;
}
#today ul li img{
margin:8px 0px 0px 0px;
}
#today ul li a:link,#today ul li a:visited{
color:#d8ecff;
text-decoration:none;
}
#today ul li a:hover{
color:#ffff00;
text-decoration:underline;
}
<3 实现内容栏效果
html文件
<!--中间内容栏-->
<div id="middle">
<div id="ghost"><a href="#" title="魔鬼城探秘"><img src="a10.jpg" border="0"></a></div>
<div id="beauty">
<h3><span>美景寻踪</span></h3>
<ul>
<li><a href="#"><img src="a11.jpg"></a></li>
<li><a href="#"><img src="b2.jpg"></a></li>
<li><a href="#"><img src="b3.jpg"></a></li>
<li><a href="#"><img src="b4.jpg"></a></li>
</ul>
</div>
<div id="route">
<h3><span>线路精选</span></h3>
<ul>
<li><a href="#">吐鲁番-库尔勒-库车-塔中-和田-喀什</a></li>
<li><a href="#">乌鲁木齐-天池-克拉玛依-乌伦古湖-喀纳斯</a></li>
<li><a href="#">乌鲁木齐-奎屯-乔尔玛-那拉提-巴音布鲁克</a></li>
<li><a href="#">乌鲁木齐-五彩城-将军戈壁-吉木萨尔</a></li>
</ul>
</div>
</div>CSS文件
#middle{
width:400px;
margin:0px 2px;
padding:5px 0px 5px 0px;
background:white;
color:white;
float:left;
}
#middle div{
margin:0px 5px;
}
#middle h3{
margin:0px;
padding:0px;
height:41px;
}
#middle h3 span{
display:none; /*去掉文字换为背景图片*/
}
#beauty{
margin:15px 0px 0px 0px;
padding:0px;
}
#beauty h3{
background:url("b1.jpg") no-repeat;
}
#beauty ul,#route ul{
list-style-type:none;
margin:3px 1px 0px 1px;
padding:0px;
}
#beauty ul li{
float:left;
width:92px;
text-align:center;
margin:0px 2px 0px 2px;
}
#beauty ul li img{
border:1px solid #4ab0ff;
}
#route{
clear:both;
margin:0px;
padding:5px 0px 15px 0px;
}
#route h3{
background:url("c1.jpg") no-repeat;
}
#route ul li{
padding:3px 0px 0px 30px;
}
#route ul li a:link,#route ul li a:visited{
text-decoration:none;
color:#004e8a;
}
#route ul li a:hover{
text-decoration:underline;
color:#000000;
}
<4 右侧栏
HTML文件
<!--右侧栏-->
<div id="right">
<div id="map">
<h3><span>新疆风光</span></h3>
<p><a href="#" title="点击查看大图"><img src="c2.jpg"></a></p>
<p><a href="#" title="点击查看大图"><img src="c3.jpg"></a></p>
</div>
<div id="food">
<h3><span>小吃推荐</span></h3>
<ul>
<li><a href="#">17号抓饭</a></li>
<li><a href="#">大盘鸡</a></li>
<li><a href="#">五一夜市</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
<div id="life">
<h3><span>宾馆酒店</span></h3>
<ul>
<li><a href="#">美丽华大饭店</a></li>
<li><a href="#">海德大饭店</a></li>
<li><a href="#">银都大饭店</a></li>
<li><a href="#">洪福大饭店</a></li>
</ul>
</div>
</div>CSS文件
#right{
width:176px;
background:white;
margin:0px ;
padding:0px 0px 5px 0px;
float:left;
}
#right div{
margin:0px 4px;
background:#046ca2;
}
#right div h3{
font-size:12px;
padding:4px 0px 2px 15px;
color:#003973;
margin:0px 0px 5px 0px;
background:#98d8f9;
}
#map p{
text-align:center;
margin:0px;
padding:2px 0px 5px 0px;
}
#map p img{
border:1px solid #ffffff;
}
#food,#life{
padding-top:3px;
}
#food ul,#life ul{
list-style-type:none;
padding:0px 0px 10px 0px;
margin:10px 10px 0px 10px;
}
#food ul li,#life ul li{
color:white;
padding:3px 0px 3px 12px;
border-bottom:1px dashed #eeeeee;
}
#food ul li a:link,#food ul li a:visited,#life ul li a:link,#life ul li a:visited{
color:white;
text-decoration:none;
}
#food ul li a:hover,#life ul li a:hover{
color:yellow;
text-decoration:underline;
}
<5 脚注
HTML文件
<div id="footer">
<p>艾萨克 © 版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></p>
</div>CSS文件
#footer{
height:30px;
background:white;
margin:1px 0px 0px 0px;
padding:1px 0px;
clear:both;
}
#footer p{
text-align:center;
padding:0px;
margin:4px 5px 4px 5px;
background:#98d8f9;
}整体界面：
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
