zoukankan html css js c++ java

前端开发之css篇

一、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>

View Code

还可以在父级添加伪类，修改子级标签，这种情况应用也很广泛

<!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>

View Code

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>

View Code

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>

View Code

在这个例子中，在父级标签c2下面的c1标签被c2的子标签覆盖，同时父级标签坍缩成一条线

出现这个问题的原因是两个子元素浮动起来后，脱离了正常文档流，父标签没有内容，也没有被两个有内容的子元素撑开，因此坍缩成了一条线，解决方法：

首先想到的应该是给父级标签加一个固定高度，这样不管有没有内容，位置反正都已经占好了。但是这个高度应该加多少呢，至少要能包含住子元素，又不能高出很多，这是个问题，而且这个方法很笨重，一点都不优雅

2.清除浮动

这里用到一个新的属性：清除浮动 clear，有四个属性值

none:　默认值，允许两边有浮动元素

left: 　左边不允许有浮动的元素

right:　右边不允许有浮动元素

both: 　两边都不允许有浮动元素

clear只会对自身起作用，不会影响其他元素。

有了这个属性，我们在c1标签中添加这个属性，就可以解决现在的问题

但是问题还是没有彻底解决，首先c2还是坍缩成了一条线，另外还有个问题，c1标签添加margin属性的时候会发现，margin失效了

在父级标签中再加一个有内容的块级标签，对这个标签清除浮动，有内容但是不能对整体布局造成影响，所以内容设置为空

<!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>

View Code

可以看到，问题已经完美的解决了，再优化一下，实际应用中我们的代码肯定会很长，不可能对每个有需求的父级标签都添加一个新的子标签，我们可以用一个类，对这个类添加样式，哪个标签需要，就在类中添加这个类名，就可以了

<!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>

View Code

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>

View Code

练习：抽屉网首页

<!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>旗下站点 &copy2017 chouti.com</span>
                        <span><a href="#">京ICP备052302号-3 京公网安备 397272979</a></span>
                    </div>
                    <div class="row2">
                        <span>违法和不良信息举报： 电话： 13021552997 &nbsp邮箱：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>

图片都是本地图片

View Code

查看全文

相关阅读:
HDU 2433 Travel （最短路，BFS，变形）
HDU 2544 最短路（最短路，spfa）
HDU 2063 过山车（最大匹配，匈牙利算法）
HDU 1150 Machine Schedule (最小覆盖，匈牙利算法)
290 Word Pattern 单词模式
 289 Game of Life 生命的游戏
 287 Find the Duplicate Number 寻找重复数
 283 Move Zeroes 移动零
 282 Expression Add Operators 给表达式添加运算符
 279 Perfect Squares 完美平方数

原文地址：https://www.cnblogs.com/zhang-can/p/7301267.html