一、css简介
css（Cascading Style Sheets）层叠样式表，是一种为html文档添加样式的语言，主要有两个功能：渲染和布局。使用css主要关注两个点：查找到标签，属性操作
二、css的引入方式
（1）行内式引入：
<div style="color:red;font-size: 16px">hello</div>
直接在html语句的属性中设置，这种方法的缺点是html代码和css代码混合在一起，耦合性太强，维护困难
（2）嵌入式引入：
<style> div{ color: red; font-size: 16px; background: grey; } </style>
在html中head部分添加css样式
（3）链接式引入：
单独写一个css文件，在html的头文件中引入。这种方式最常用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel="stylesheet" href="index.css">
（4）导入式：
在style标签中引入外部的css文件
<style type="text/css"> @import "index.css"; </style>
导入式和链接式引入有区别：
a.加载方式不同：导入式会先导入html,再用css渲染，如果此时网络卡了，在浏览器上显示的就是没有样式的内容，然后再一点点渲染，而链接式是一块加载的
b.链接式链接文件数量没有上限，但是导入式有上限
三、css选择器
上面四种引入css样式的方法中，除了缺点最明显的行内式，其他三种方法都需要先找到标签，才能对标签样式进行操作
1.基本选择器
- 通配选择器 *{color：red}
- 标签选择器 div{background:green}
- id选择器 #user{font-size:12px}
- class选择器 .user{border:1px solid red}
我们在html那篇博客里提到过id，id唯一标识一个标签，但是如果我们想对一系列标签添加同样的样式，肯定不能都用id,可以用class，从字面上理解就是一类具有类似作用的标签，在选择这些标签时用“点类名”的方式，而且class 也没有不能重名的限制
通用选择器一般用在预处理，初识化的时候
2.组合选择器
有时只用基本选择器并不能让我们准确找到标签，还需要用到一些组合标签
- c1,c2 多元素选择器，同时匹配所有的c1元素和c2元素
- c1 c2 后代选择器，匹配所有属于c1后代的c2元素
- c1 > c2 子代选择器，用后代选择器有个问题，所有属于c1的后代都会被选择，包括孙子代，用子代选择器就不会有这个问题，子代选择器只会选择自己的儿子这一层级
- c1+c2 毗邻元素选择器，匹配所有紧挨着c1元素之后的同级元素
- c1~c2 普通兄弟元素，这个和毗邻元素选择器的区别就是，没有了紧挨着的限制
3.属性选择器
对于标签的固有属性，如id和class，可以通过#或.的方式找到。
如果是自定义属性，就要通过中括号的方式
<style> #cl1{ color: #000; } .c1{ font-size: 12px; } div[zhang]{ background: red; } </style> </head> <body> <div class="c1" id="cl1" zhang="123">123</div> </body>
当有多个相同的自定义属性时，还可以用属性值区分，如div[zhang="123"]{}
四、伪类
1.anchor伪类：
我们浏览网页的时候，有时会遇到鼠标放在一个元素上时，元素会发生变化的情况，这就是通过anchor伪类实现的，不止有鼠标悬浮的样式，还可以设置点击时，以及点击后的样式
a:link 默认状态
a:hover 鼠标悬浮在元素上的样式
a:visited 点击过的元素的样式
a:active 在元素上按下鼠标时的样式
这四个标签是针对于a标签用的，但不限于a标签，其中hover是最常用的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .out{ width: 300px; height: 300px; background: greenyellow; } .out:hover{ background: red; } .out:visited{ background: white; } .out:active{ background: black; } </style> </head> <body> <div class="out"> <div class="c1"></div> <div class="c2"></div> </div> </body> </html>
还可以在父级添加伪类，修改子级标签，这种情况应用也很广泛
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .out{ width: 300px; height: 300px; background: greenyellow; } .c1{ width: 100px; height: 100px; background: gold; } .out:hover .c1{ background: red; } .out:visited{ background: white; } .out:active{ background: black; } </style> </head> <body> <div class="out"> <div class="c1"></div> <div class="c2"></div> </div> </body> </html>
2.before after伪类
这个伪类的作用是在选择的标签的前面或者后面加一个内容
<style> p:after{ content: 'world'; color: #2b99ff; } </style> </head> <body> <p>hello</p> </body>
这样会在浏览器中显示helloworld，但是从网页的html源码中是找不到world的，这个伪类的主要作用就是把一些会让读者看不懂的代码，写到伪类中，比如布局的时候需要一个空的div标签，如果写到源码中，读者读到这个位置可能会造成误解。所以就写到伪类中。content的属性值，更多的时候是空的。
五、选择器的优先级
如果我们不小心用不同的选择器，选定了同一个标签，那这个标签的样式，应该取决于哪个选择器呢，这就用到了选择器的优先级。
不同的选择器，有不同的权重值，
行内式： 1000
id： 100
class： 10
element（标签）： 1
还有两种，一种是在样式后面加！import的，这种是不看规则的，他的权重最高，惹不起
另一种就是默认继承的样式，这种最怂，权重值最低
遇到子类，权重值是相加的
那种差十倍的，咱们就不比较了，就比较个差一个权重的，意思意思就行了
<style> .c3{ background: red; } .c2 .c3{ background: green; } .c1 .c2 .c3{ background: gold; } </style> </head> <body> <div class="c1"> <div class="c2"> <div class="c3">123</div> </div> </div> </body>
这个例子，.c3的权重值是10，
.c2 .c3的权重是10+10=20，
.c1 .c2 .c3 的权重值是10+10+10=30
所以最终结果，背景颜色一定是金黄色，通过这个例子就能明白选择器的优先级
以后如果遇到样式改不了的情况，就要考虑是否在之前有比它优先级更高的标签
六、css属性
1.字体的属性
（1）颜色：设置颜色有三种方式：
- 十六进制值，如#3e3e3e
- RGB值，如RGB（255,255,0）
- 颜色的英文名称，如red，green
- rgba :在RGB的时候，还可以指定透明度，如 RGBa（255,120,120,0,5）
（2）对齐方式：默认是左对齐
对齐方式的属性是text-align,属性值：
- left 左对齐
- center 居中
- right 右对齐
- justify 两端对齐
（3）其他属性
font-size: 12px;文本字体大小
font-weight: 500;字体粗细，100-900
font-family: Arial;字体库
font-style: italic;斜体;
line-height: 20px;行高
vertical-align: middle;设置元素的垂直对齐方式，对块级元素无效
text-decoration: none;这个主要用于去除a标签的下划线，当然也可以添加下划线
text-indent: 100px;首行缩进
word-spacing: 10px;单词间距
letter-spacing:20px;字符间距
text-shadow:2px 2px #ff000;文字阴影
text-transform:uppercase; 文本转换属性，把所有字母变成大写
重点说一下vertical-align和line-heigh,这两个属性在对齐的时候经常会用到
（1）vertical-align
每一个元素自身都会有四条线，顶线，中线，基线，底线
让图片和文字在一行显示的时候，默认是按照基线对齐的，我们可以在图片标签的样式中设置按中线对齐或者底线
（2）line-height
对于块级标签，把行高设置成和块级元素的高度一样，就会垂直居中了。
2.背景
我们知道可以在标签的样式中加背景色，其实背景不仅可以是纯色，还可以是图片
background: url("logo.png") no-repeat 0 0;
- url后面放的是图片的地址，可以是本地地址，也可以是网络地址
- no-repeat是设置图片的的填充方式，还可以设置成横向填充（repeat-x），纵向填充（repeat-y）
- 最后两个值是图片位置，以像素为单位，0 0 就表示在页面的左上角，可以设置成center center 就在页面中心了
把背景设置成图片，应用最多的是网页上的小图标，大部分这些图标并不是一张张小的图片，而是一整张大的图片，包含很多小图标，通过移动位置让他们在希望的位置显示想要的部分。
3.边框
有三个属性：border-1px边框宽度
border-style:solid边框样式，可以是实心也可以是虚线、点实线。。。
border-color:red 边框颜色
使用的时候一般都简写成 border：1px solid red 这三个属性值没有顺序
还可以单独设置四个方向的边框
可以用边框的性质画一个三角形：
<style> div{ width: 0; height: 0; border:50px solid green; border-bottom-color: red; border-top:none;; } </style>
4.列表属性
在html中，列表的每一项前面的圆点我们没办法修改，在css中就可以了
list-style-type 设置列表项标志的类型，disc是实心圆点，square是正方形实心块。。
list-style-image 用图片当作列表项的标志
list-style-position 设置列表项标志的位置
但是，以上用的都不多，用的最多的是取消列表项标志
list-type:none
七、display属性
有四个属性值：none，block,inline ,inline-block
1.none
display:none 隐藏标签，这个隐藏的意思是不仅这个标签看不到了，而且这个标签在页面中占据的位置也没有了，其他内容会来占据这个位置，比如京东天猫这些网站的首页中那个轮播图，其实是好多张图片都在同一个位置，但是同一时刻只显示一张，其他的都隐藏 了
2.block 把内联标签变成块级标签
块级标签在页面中是独占一行的，可以设置宽度和高度
而内联标签是并排显示，除非一行放不下了才会换行，内联标签设置宽高无效
3.inline 把块级标签变成内联标签
4.inline-block，这个才是最常用的，这个属性可以让标签既能并排显示，又有块级标签可以设置宽高的特性
八、盒子模型
网页上的每个元素，都可以理解为一个盒子，盒子有自己的空间，有宽度（width）和高度（height），盒子里面存放东西（content）,存放的东西与盒子间的距离就是内边距（padding），盒子有自己的边框（border），盒子与盒子之间的距离叫做外边距（margin）
事实上，我们也应该把每个块级元素都当作一个盒子，不指定宽高的话，默认宽度是浏览器宽度，默认高度是内容高度
可以单独设置四个方向的边距，分别为top,right,bottom,left
设置maigin或者padding时，后面的值可以设置一个，也可以设置多个，顺序是上，右，下，左
margin:10px; 表示盒子上下左右四个边距都是10px
margin:10px,20px; 表示盒子上下边距是10px，左右是20px
margin:10px,20px,30px; 上边距10px,右边距20px,下边距30px
如果两个同级盒子的上下边距设置分别为10px和20px，最终两个并列的盒子之间的距离是20px，会取两个值的最大值，而不是两个值相加
我们来看一下父级塌陷问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> *{ margin:0; } .c1{ width: 300px; height: 100px; background: gold; } .c2{ background: purple; } .c3 { width: 100px; height: 100px; background: green; } .c4{ width: 100px; height: 100px; background: #2b99ff; } </style> </head> <body> <div class="c1"></div> <div class="c2"> <div class="c3"></div> <div class="c4"></div> </div> </body> </html>
看一下这个例子，c1和c2是兄弟关系，c3，c4是c2的子级，现在在浏览器中是这样的：
现在给c3加一个margin-top：30px;再来看效果：
可以看到，c3的父亲c2也跟着向下移动了，这就是父级塌陷现象
这显然不是我们想要的，出现这个问题的原因是这个父级标签没有内容，当子级标签加上margin-top这个属性后，他会往自己的上方找。如果找到的是兄弟标签，那没有问题。但是如果找到的是父级标签，就要看这个父亲是不是合格的父亲（有没有内容），如果没有内容，就不认这个父亲了，就会以自己代码之上的另一个标签为基准，修改自己的上边距，如果上面没有元素，就会以body为准。
解决这个问题的方法就是：给父级标签加上内容，有几个方法：有边界border可以，有内边距padding可以，有内容content也可以。
还有一个方法，在父级标签的样式中加上 overflow:hidden 这种方法算是掩耳盗铃吧，虽然能解决问题，但不推荐用
margin还有一个常用的地方，就是调整子元素 在父标签左右居中
margin:0 auto; 第一个值是上边距，可以根据需要调整
九、float属性
正常情况下，我们写的标签在网页中是自动按照从左到右，从上到下的顺序依次排列的，其中内联标签是并列摆列，块级元素是独占一行，这就是正常文档流
如果将元素浮动起来，从普通排版中拿开，那么其他元素在定位的时候就会忽略这些元素，这些元素就叫脱离正常文档流
float属性就是会让元素浮在正常文档流之上，可以向左飘或者向右飘，如果所有的标签都浮动起来，那就既可以调宽高，又可以在一排显示了，和display：inline-block;的效果一样
当块级标签在定位的时候，如果他的上一个标签是正常文档流，就贴到他的垂直下方
如果是浮动流，就并排贴到它的右边
问题又来了，看这个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> *{ margin:0; } .c2{ border: 1px solid red; } .c1{ width: 300px; height: 200px; background: gold; } .c3 { width: 100px; height: 100px; background: green; float: left; } .c4{ width: 100px; height: 100px; background: #2b99ff; float: left; } </style> </head> <body> <div class="c2"> <div class="c3"></div> <div class="c4"></div> </div> <div class="c1"></div> </body> </html>
在这个例子中， 在父级标签c2下面的c1标签被c2的子标签覆盖，同时父级标签坍缩成一条线
出现这个问题的原因是两个子元素浮动起来后，脱离了正常文档流，父标签没有内容，也没有被两个有内容的子元素撑开，因此坍缩成了一条线，解决方法：
1.
首先想到的应该是给父级标签加一个固定高度，这样不管有没有内容，位置反正都已经占好了。但是这个高度应该加多少呢，至少要能包含住子元素，又不能高出很多，这是个问题，而且这个方法很笨重，一点都不优雅
2.清除浮动
这里用到一个新的属性：清除浮动 clear，有四个属性值
none: 默认值，允许两边有浮动元素
left: 左边不允许有浮动的元素
right: 右边不允许有浮动元素
both: 两边都不允许有浮动元素
clear只会对自身起作用，不会影响其他元素。
有了这个属性，我们在c1标签中添加这个属性，就可以解决现在的问题
但是问题还是没有彻底解决，首先c2还是坍缩成了一条线，另外还有个问题，c1标签添加margin属性的时候会发现，margin失效了
3.
在父级标签中再加一个有内容的块级标签，对这个标签清除浮动，有内容但是不能对整体布局造成影响，所以内容设置为空
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> *{ margin:0; } .c2{ border: 1px solid red; } .c1{ width: 300px; height: 200px; background: gold; clear: both; margin-top: 10px; } .c3 { width: 100px; height: 100px; background: green; float: left; } .c4{ width: 100px; height: 100px; background: #2b99ff; float: left; } .c5{ content: ""; clear: both; } </style> </head> <body> <div class="c2"> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> </div> <div class="c1"></div> </body> </html>
可以看到，问题已经完美的解决了，再优化一下，实际应用中我们的代码肯定会很长，不可能对每个有需求的父级标签都添加一个新的子标签，我们可以用一个类，对这个类添加样式，哪个标签需要，就在类中添加这个类名，就可以了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> *{ margin:0; } .c2{ border: 1px solid red; } .c1{ width: 300px; height: 200px; background: gold; clear: both; margin-top: 10px; } .c3 { width: 100px; height: 100px; background: green; float: left; } .c4{ width: 100px; height: 100px; background: #2b99ff; float: left; } .clearfix{ content: ""; display: block; clear: both; } </style> </head> <body> <div class="c2 clearfix"> <div class="c3"></div> <div class="c4"></div> </div> <div class="c1"></div> </body> </html>
4.还有一种方法：overflow:hidden；在父级标签的样式中添加这个就行了，但是这个有兼容性问题，不推荐用
十、position属性
设置position属性后，通过上下左右（top,buttom,left,right）四个位置设定的距离进行偏移
1.static 默认值
2.relative相对定位
相对定位以元素自己的原始位置为参照物，但是relative属于半脱离正常文档流，因为他的原始位置还在，其他元素无法侵占。这个属性主要与absolute配合使用
3.absolute绝对定位
设置为绝对定位的元素会以最近的已定位的上级元素定位，如果所有的上级元素都没有定位，则以body为基准位置偏移。绝对定位属于完全脱离文档流，自己的原始位置会被其他元素占据。
应用中可以对父级标签设置成相对定位，但不必偏移，这样子级元素就可以以父级标签为基准移动位置了
4.fixed 完全脱离
以窗口为参照物，即使出现滚动的情况，设置为fixed的元素也不会随着滚动，需要注意，设置为fixed的元素不能在设置float，这是两个不同的文档流
比如浏览网页时，右下角有个返回顶部的按钮，就是用的这个属性
十一、响应式布局
响应式就是当我们的浏览器分辨率发生变化的时候，页面布局保持不变，所以需要判断分辨率，根据不同的分辨率设置不同的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> @media screen and (max- 1200px) { div{ width: 100%; height: 100px; background: red; } } @media screen and (max- 900px){ div{ width: 100%; height: 100px; background: green; } } @media screen and (max- 600px) { div{ width: 100%; height: 100px; background: black; } } </style> </head> <body> <div> </div> </body> </html>
练习：抽屉网首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> *{ margin:0; padding:0; } .clearfix{ content: ''; display: block; clear: both; } .header{ width: 100%; height: 44px; background: #2459a2; } .header_box{ width: 1016px; height: 44px; /*border:1px red solid;*/ margin:0 auto; } .logo{ /*line-height: 44px;*/ float: left; margin-top: 11px; } .option{ float: left; line-height: 44px; background: #2459a2; /*margin: 0 20px;*/ padding-left: 16px; padding-right:13px;; } .option:hover{ background:#396bb3 } .header_box .left .option a{ text-decoration: none; color: white; } .header_box .right input{ height: 30px; float: right; margin-top: 3px; } .header_box .right a{ text-decoration: none; color: white; float: right; text-align: center; line-height: 44px; padding-left: 16px; padding-right:13px;; } .header_box .right form{ float: right; margin-top: 7px; width: 160px; height: 30px; /*border:1px green solid;*/ background: whitesmoke; } .header_box .right form input{ /*background: ;*/ width: 130px; height: 30px; float: left; margin: 0; /*padding: 0;*/ border: 0px white; } .header_box .right form a{ width: 30px; height: 30px; float: right; /*background: red;*/ margin:0; padding:0; } .header_box .right form span{ width: 13px; height: 13px; float: right; /*background: red;*/ background: url("icon.png") no-repeat 0 -197px; margin-top: 8px; margin-right: 8px; padding: 0; } .body{ width: 100%; height: 1160px; /*background: red;*/ margin:0 auto; overflow: hidden; background: #ededed; } .body_box{ /*margin: 25px;*/ width: 1016px; height: 1160px; margin: 10px auto; background: #fff; margin-top: 0; /*background: green;*/ } .body_box .left{ float: left; width: 630px; height: 1010px; } .body .body_box .left .top{ width: 630px; height: 43.2px; /*background: gold;*/ border-bottom: 1px #dec7f4 solid; margin-left: 15px; } .body .body_box .left .top a{ text-decoration: none; color: #369; font-size: 14px; text-align: center; line-height: 26px; } .body .body_box .left .top a.title_left{ float: left; margin-left:15px; width: 60px; height: 26px; margin-top:8px ; font-size: 13px; font-weight: 700; /*margin-right: 5px;*/ } .body .body_box .left .top a.title_right{ float: right; margin:10px auto; margin-right: 15px; font-size: 13px; color: #390; } .body .body_box .left .top a.最热{ background: #f0f4f8; border-radius:25px; color: #333; } .body .body_box .left .top a.即时排序{ color: #b4b4b4; } .body .body_box .left .top a.发布{ width: 100px; height: 26px; background: #84a42b; color: #fff; margin-right: 0; } .article li{ margin-left: 15px; width: 630px; height:120px; border-bottom: 1px #dec7f4 solid; list-style: none; display: inline-block; margin-top: 5px; /*position: relative;*/ } li>a img{ float: right; } .article .artical_content{ /*margin-right: 0;*/ float: left; width:546.88px; height: 38.4px; } .qu{ font-size: 12px!important; text-decoration: underline!important; color: grey!important; } .article .artical_content a{ text-decoration: none; color: #369; font-weight: 600; font-size: 15px; } .article .artical_content a:hover{ text-decoration:underline; } .article .artical_content span{ font-size: 12px; color: grey; } .artical_bottom{ display: inline-block; width: 630px; height: 26.8px; /*background: red;*/ float: left; margin-top:21px; font-size: 13px; color: #777777; } .artical_bottom:hover .share{ display: inline-block; } .label{ float: left; margin-top:6px;; margin-right: 10px; width:36px; height:16px; /*background: grey;*/ } label:hover{ } .like_img{ /*line-height: 26.8px;*/ /*margin-right: 15px;*/ float: left; width: 17px; height: 18px; background: url("like.png") no-repeat 0 -41px; /*margin:18px auto;*/ } .like_img:hover{ background: url("like.png") no-repeat 0 -21px; } .count{ float: left; margin-left: 4px; font-size: 16px; margin-top: -1px; color: #99accb; } .count:hover{ text-decoration: underline; color: #369; } .comment .like_img{ background: url("like.png") no-repeat 0 -100px; } .comment .like_img:hover{ background: url("like.png") no-repeat 0 -80px; } .favorite{ width: 56px; } .favorite .like_img{ background: url("like.png") no-repeat 0 -160px; } .favorite .like_img:hover{ background: url("like.png") no-repeat 0 -140px; } .favorite .text{ color: #99accb; font-weight: 400; } .favorite .text:hover{ color: #369; text-decoration: underline; } .issue_time{ margin-top: 4px; width: 100px; } .origin{ float: left; margin-top:6px;; margin-right: 5px; width:66px; height:16px; } .origin img{ float: left; } a .text{ float: left; margin-top:2px; font-size: 12px; } .origin b{ margin-top:1px;; color: #99accb; font-weight: 400; } .origin b:hover{ color: #369; text-decoration: underline; } .issue_time .time{ color: #e59373; font-weight: 400; } .issue_time .time:hover{ text-decoration: underline; } .issue_time .issue{ color: #ccc; font-weight: 400px; } .share{ font-size: 12px; float: left; width: 180px; height: 17px; margin-left: 20px; display: none; /*background: honeydew;*/ } .share_text{ float: left; } .share_img{ width: 17px; height:15px; float: left; /*background: red;*/ background: url("share_icon.png") no-repeat 0 1px; margin-left: 7px; } .sina:hover{ background: url("share_icon.png") no-repeat 0 -89px; } .douban{ background: url("share_icon.png") no-repeat 0 -14px; } .douban:hover{ background: url("share_icon.png") no-repeat 0 -103px; } .qq{ background: url("share_icon.png") no-repeat 0 -30px; } .qq:hover{ background: url("share_icon.png") no-repeat 0 -119px; } .renren{ background: url("share_icon.png") no-repeat 0 -60px; } .renren:hover{ background: url("share_icon.png") no-repeat 0 -150px; } .page .page_box{ width:532px; height: 34px; /*background: beige;*/ /*position: absolute;*/ /*top:12px;*/ float: left; margin:20px auto; margin-left: 15px; } .page li { list-style: none; float: left; } .page li a{ } .page li .page_count{ text-decoration: none; float: left; margin-right:6px; height: 34px; width: 34px; text-align: center; border: 1px #e1e1e1 solid; border-radius: 8px; line-height: 34px; color: #369; } .page li .nextpage{ width: 77px; } .page li .pagefirst{ border: none; color: #333; font-weight: 700; } .body_box>.right{ width:320px; height: 1000px; /*background: #2459a2;*/ float: right; } .body_box .right li{ list-style: none; margin-top: 5px; } .body_box>.bottom{ width: 980px; height: 150px; /*background: green;*/ float: left; margin-left: 20px; margin-top: 35px; border-top:1px solid #ccdcef;; } .body_box>.bottom .outer_link{ width: 800px; height: 20px; margin:10px auto; } .body_box>.bottom li{ list-style: none; float: left; font-size: 12px; color: #369; margin-left: 10px; margin-right: 10px; line-height: 20px; } .body_box>.bottom li a{ text-decoration: none; } .body_box>.bottom li a img{ margin-top:1px;; } /*.body_box>.bottom .outer_link{*/ /*margin-top: 64px;*/ /*}*/ .body_box>.bottom .outer_link span{ float: left; } .body_box>.bottom .lower_item div{ /*float: left;*/ width: 800px; height: 20px; margin:5px auto; text-align: center; font-size: 12px; } .body_box>.bottom .lower_item a{ text-decoration: none; color: #333; } .gozap_logo{ vertical-align: -2px; } .turn2top a{ position: fixed; bottom: 60px; right: 200px; text-decoration: none; font-size: 19px; font-weight: 800; width: 38px; height: 38px; background: url("Back-to-the-top_38_78.png") no-repeat 0 0; } .turn2top a:hover{ background: url("Back-to-the-top_38_78.png") no-repeat 0 -40px; } </style> </head> <body> <div id="start"></div> <div class="header clearfix"> <div class="header_box clearfix"> <div class="left"> <div class="logo"><img src="抽屉logo.png" alt=""></div> <div class="option"><a href="#">全部</a></div> <div class="option"><a href="#">42区</a></div> <div class="option"><a href="#"> 段子</a></div> <div class="option"><a href="#">图片</a></div> <div class="option"><a href="#">挨踢1024</a></div> <div class="option"><a href="#"> 你问我答</a></div> </div> <div class="right"> <form action="" > <a href="#"><span></span></a> <input type="text" > </form> <!--<span></span>--> <a href="#">登录</a> <a href="#">注册</a> </div> </div> </div> <div class="body clearfix"> <div class="body_box clearfix"> <div class="left"> <div class="top clearfix"> <a href="#" class="title_left 最热">最热</a> <a href="#" class="title_left 发现">发现</a> <a href="#" class="title_left 人类发布">人类发布</a> <a href="#" class="title_right 发布">+ 发布</a> <a href="#" class="title_right 3天">3天</a> <a href="#" class="title_right 24小时">24小时</a> <a href="#" class="title_right 即时排序">即时排序</a> </div> <div class="article"> <ul> <li> <div class="artical_content"> <a href="#" class="artical_title"> [杂技孤儿]32个孩子，从6岁到7岁，想离开就离开，走到记忆之外，没有什么需要膜拜。想回来就回来，旅行后才明白，我把从前留在境外。我不看将来，也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。 </a> <span class="artical_address" >-international.caixin.com</span> <a href="#" class="qu">42区</a> </div> <a href="#"><img src="1.jpg" alt=""></a> <a href="#" class="artical_bottom"> <span class="like label"> <span class="like_img"></span> <b class="count">3</b> </span> <span class="comment label"> <span class="like_img"></span> <b class="count">1</b> </span> <span class="favorite label" > <span class="like_img"></span> <b class="text">私藏</b> </span> <span class="origin label"> <img src="origin.jpg" alt=""> <b class="text">财新网</b> </span> <span class="issue_time label"> <b class="text time">2小时6分钟前</b> <b class="text issue" >发布</b> </span> <span class="share label"> <b class="share_text">分享到</b> <span class="share_img sina"></span> <span class="share_img douban"></span> <span class="share_img qq"></span> <span class="share_img renren" ></span> </span> </a> </li> <li> <div class="artical_content"> <a href="#" class="artical_title"> [杂技孤儿]32个孩子，从6岁到7岁，想离开就离开，走到记忆之外，没有什么需要膜拜。想回来就回来，旅行后才明白，我把从前留在境外。我不看将来，也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。 </a> <span class="artical_address" >-international.caixin.com</span> <a href="#" class="qu">42区</a> </div> <a href="#"><img src="1.jpg" alt=""></a> <a href="#" class="artical_bottom"> <span class="like label"> <span class="like_img"></span> <b class="count">3</b> </span> <span class="comment label"> <span class="like_img"></span> <b class="count">1</b> </span> <span class="favorite label" > <span class="like_img"></span> <b class="text">私藏</b> </span> <span class="origin label"> <img src="origin.jpg" alt=""> <b class="text">财新网</b> </span> <span class="issue_time label"> <b class="text time">2小时6分钟前</b> <b class="text issue" >发布</b> </span> <span class="share label"> <b class="share_text">分享到</b> <span class="share_img sina"></span> <span class="share_img douban"></span> <span class="share_img qq"></span> <span class="share_img renren" ></span> </span> </a> </li> <li> <div class="artical_content"> <a href="#" class="artical_title"> [杂技孤儿]32个孩子，从6岁到7岁，想离开就离开，走到记忆之外，没有什么需要膜拜。想回来就回来，旅行后才明白，我把从前留在境外。我不看将来，也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。 </a> <span class="artical_address" >-international.caixin.com</span> <a href="#" class="qu">42区</a> </div> <a href="#"><img src="1.jpg" alt=""></a> <a href="#" class="artical_bottom"> <span class="like label"> <span class="like_img"></span> <b class="count">3</b> </span> <span class="comment label"> <span class="like_img"></span> <b class="count">1</b> </span> <span class="favorite label" > <span class="like_img"></span> <b class="text">私藏</b> </span> <span class="origin label"> <img src="origin.jpg" alt=""> <b class="text">财新网</b> </span> <span class="issue_time label"> <b class="text time">2小时6分钟前</b> <b class="text issue" >发布</b> </span> <span class="share label"> <b class="share_text">分享到</b> <span class="share_img sina"></span> <span class="share_img douban"></span> <span class="share_img qq"></span> <span class="share_img renren" ></span> </span> </a> </li> <li> <div class="artical_content"> <a href="#" class="artical_title"> [杂技孤儿]32个孩子，从6岁到7岁，想离开就离开，走到记忆之外，没有什么需要膜拜。想回来就回来，旅行后才明白，我把从前留在境外。我不看将来，也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。 </a> <span class="artical_address" >-international.caixin.com</span> <a href="#" class="qu">42区</a> </div> <a href="#"><img src="1.jpg" alt=""></a> <a href="#" class="artical_bottom"> <span class="like label"> <span class="like_img"></span> <b class="count">3</b> </span> <span class="comment label"> <span class="like_img"></span> <b class="count">1</b> </span> <span class="favorite label" > <span class="like_img"></span> <b class="text">私藏</b> </span> <span class="origin label"> <img src="origin.jpg" alt=""> <b class="text">财新网</b> </span> <span class="issue_time label"> <b class="text time">2小时6分钟前</b> <b class="text issue" >发布</b> </span> <span class="share label"> <b class="share_text">分享到</b> <span class="share_img sina"></span> <span class="share_img douban"></span> <span class="share_img qq"></span> <span class="share_img renren" ></span> </span> </a> </li> <li> <div class="artical_content"> <a href="#" class="artical_title"> [杂技孤儿]32个孩子，从6岁到7岁，想离开就离开，走到记忆之外，没有什么需要膜拜。想回来就回来，旅行后才明白，我把从前留在境外。我不看将来，也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。 </a> <span class="artical_address" >-international.caixin.com</span> <a href="#" class="qu">42区</a> </div> <a href="#"><img src="1.jpg" alt=""></a> <a href="#" class="artical_bottom"> <span class="like label"> <span class="like_img"></span> <b class="count">3</b> </span> <span class="comment label"> <span class="like_img"></span> <b class="count">1</b> </span> <span class="favorite label" > <span class="like_img"></span> <b class="text">私藏</b> </span> <span class="origin label"> <img src="origin.jpg" alt=""> <b class="text">财新网</b> </span> <span class="issue_time label"> <b class="text time">2小时6分钟前</b> <b class="text issue" >发布</b> </span> <span class="share label"> <b class="share_text">分享到</b> <span class="share_img sina"></span> <span class="share_img douban"></span> <span class="share_img qq"></span> <span class="share_img renren" ></span> </span> </a> </li> <li> <div class="artical_content"> <a href="#" class="artical_title"> [杂技孤儿]32个孩子，从6岁到7岁，想离开就离开，走到记忆之外，没有什么需要膜拜。想回来就回来，旅行后才明白，我把从前留在境外。我不看将来，也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。 </a> <span class="artical_address" >-international.caixin.com</span> <a href="#" class="qu">42区</a> </div> <a href="#"><img src="1.jpg" alt=""></a> <a href="#" class="artical_bottom"> <span class="like label"> <span class="like_img"></span> <b class="count">3</b> </span> <span class="comment label"> <span class="like_img"></span> <b class="count">1</b> </span> <span class="favorite label" > <span class="like_img"></span> <b class="text">私藏</b> </span> <span class="origin label"> <img src="origin.jpg" alt=""> <b class="text">财新网</b> </span> <span class="issue_time label"> <b class="text time">2小时6分钟前</b> <b class="text issue" >发布</b> </span> <span class="share label"> <b class="share_text">分享到</b> <span class="share_img sina"></span> <span class="share_img douban"></span> <span class="share_img qq"></span> <span class="share_img renren" ></span> </span> </a> </li> <li> <div class="artical_content"> <a href="#" class="artical_title"> [杂技孤儿]32个孩子，从6岁到7岁，想离开就离开，走到记忆之外，没有什么需要膜拜。想回来就回来，旅行后才明白，我把从前留在境外。我不看将来，也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。 </a> <span class="artical_address" >-international.caixin.com</span> <a href="#" class="qu">42区</a> </div> <a href="#"><img src="1.jpg" alt=""></a> <a href="#" class="artical_bottom"> <span class="like label"> <span class="like_img"></span> <b class="count">3</b> </span> <span class="comment label"> <span class="like_img"></span> <b class="count">1</b> </span> <span class="favorite label" > <span class="like_img"></span> <b class="text">私藏</b> </span> <span class="origin label"> <img src="origin.jpg" alt=""> <b class="text">财新网</b> </span> <span class="issue_time label"> <b class="text time">2小时6分钟前</b> <b class="text issue" >发布</b> </span> <span class="share label"> <b class="share_text">分享到</b> <span class="share_img sina"></span> <span class="share_img douban"></span> <span class="share_img qq"></span> <span class="share_img renren" ></span> </span> </a> </li> </ul> </div> <div class="page clearfix"> <div class="page_box "> <ul> <li><span class="page_count pagefirst">1</span></li> <li><a href="#" class="page_count">2</a></li> <li><a href="#" class="page_count">3</a></li> <li><a href="#" class="page_count">4</a></li> <li><a href="#" class="page_count">5</a></li> <li><a href="#" class="page_count">6</a></li> <li><a href="#" class="page_count">7</a></li> <li><a href="#" class="page_count">8</a></li> <li><a href="#" class="page_count">9</a></li> <li><a href="#" class="page_count">10</a></li> <li><a href="#" class="page_count nextpage">下一页</a></li> </ul> </div> </div> </div> <div class="right"> <ul> <li><img src="report_right.jpg" alt="" class="right_img"></li> <li><img src="homepage_right.png" alt="" class="right_img"></li> <li><img src="chen_right.jpg" alt="" class="right_img"></li> <li><img src="erwema_right.jpg" alt="" class="right_img"></li> </ul> </div> <div class="bottom"> <div class="outer_link"> <ul> <li><a href="#" class="bottom_text">关于我们</a></li> <span>|</span> <li><a href="#" class="bottom_text">联系我们</a></li> <span>|</span> <li><a href="#" class="bottom_text">服务条款</a></li> <span>|</span> <li><a href="#" class="bottom_text">隐私政策</a></li> <span>|</span> <li><a href="#" class="bottom_text">抽屉新热榜工具</a></li> <span>|</span> <li><a href="#" class="bottom_text">下载客户端</a></li> <span>|</span> <li><a href="#" class="bottom_text">意见与反馈</a></li> <span>|</span> <li><a href="#" class="bottom_text">友情链接</a></li> <span>|</span> <li><a href="#" class="bottom_text">公告</a></li> <li><a href="#" class="bottom_text"><img src="rss.png" alt=""></a></li> </ul> </div> <div class="lower_item"> <div class="row1"> <a href="#"><img src="gozap-logo.png" alt=""class="gozap_logo"></a> <span>旗下站点 ©2017 chouti.com</span> <span><a href="#">京ICP备052302号-3 京公网安备 397272979</a></span> </div> <div class="row2"> <span>违法和不良信息举报： 电话： 13021552997  邮箱：zhangcan121@163.com</span> </div> <div class="row3"> <span>版权所有：北京格物致知科技有限公司</span> </div> </div> </div> </div> </div> <div class="turn2top"> <a href="#start"></a> </div> </body> </html> 图片都是本地图片