2、css的引进格局,2、css的引进格局

一、css简介

一、css简介

  css(Cascading Style
Sheets)层叠样式表,是一种为html文书档案增多样式的言语,重要有八个作用:渲染和布局。使用css首要关切五个点:查找到标签,属性操作  

  css(Cascading Style
Sheets)层叠样式表,是一种为html文书档案增添样式的语言,首要有五个职能:渲染和布局。使用css重要关切多个点:查找到标签,属性操作  

2、css的引进情势

二、css的引入形式

(一)行内式引进:

(壹)行内式引进:

<div style="color:red;font-size: 16px">hello</div>
<div style="color:red;font-size: 16px">hello</div>

直白在html语句的个性中安装,那种措施的败笔是html代码和css代码混合在一块,耦合性太强,维护困难

直接在html语句的品质中装置,那种格局的瑕疵是html代码和css代码混合在1块儿,耦合性太强,维护困难

(2)嵌入式引进:

(二)嵌入式引进:

 <style>
        div{
            color: red;
            font-size: 16px;
            background: grey;
        }
    </style>
 <style>
        div{
            color: red;
            font-size: 16px;
            background: grey;
        }
    </style>

在html中head部分增添css样式

在html中head部分加多css样式

(叁)链接式引进:

(3)链接式引进:

独自写三个css文件,在html的头文件中引进。那种方法最常用

独自写多少个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">
<!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)导入式:

(4)导入式:

在style标签中引进外部的css文件

在style标签中引进外部的css文件

 <style type="text/css">
        @import "index.css";
    </style>
 <style type="text/css">
        @import "index.css";
    </style>

导入式和链接式引进有分别:

导入式和链接式引进有分别:

a.加载格局各异:导入式会伊始入html,再用css渲染,即便那时候网络卡了,在浏览器上海展览中心示的就算未有样式的始末,然后再一小点渲染,而链接式是1块加载的

a.加载方式各异:导入式会初始入html,再用css渲染,即使此时互联网卡了,在浏览器上海展览中心示的即使从未样式的剧情,然后再一小点渲染,而链接式是一块加载的

b.链接式链接文件数量未有上限,但是导入式有上限

b.链接式链接文件数量并未有上限,可是导入式有上限

 

 

三、css选择器

三、css选择器

地点二种引进css样式的主意中,除了缺点最显明的行内式,其余三种艺术都急需先找到标签,才干对标签样式举办操作

地点多种引进css样式的主意中,除了缺点最醒目标行内式,别的二种办法都亟需先找到标签,技艺对标签样式进行操作

一.中央采用器

1.主干选择器

  • 通配接纳器  *{color:red}
  • 标签选拔器 div{background:green}
  • id选择器  #user{font-size:12px}
  • class选择器  .user{border:1px solid red}
  • 通配选择器  *{color:red}
  • 标签选用器 div{background:green}
  • id选择器  #user{font-size:12px}
  • class选择器  .user{border:1px solid red}

大家在html那篇博客里关系过id,id唯一标识一个标签,可是倘诺大家想对1多级标签增多一样的体裁,肯定无法都用id,能够用class,从字面上通晓正是一类具有类似作用的竹签,在挑选那几个标签时用“点类名”的艺术,而且class
也尚无不可能重名的限量

我们在html那篇博客里关系过id,id唯1标志二个标签,不过如果我们想对1密密麻麻标签加多一样的体制,鲜明不能够都用id,能够用class,从字面上精晓就是一类具备类似意义的价签,在选取这么些标签时用“点类名”的方法,而且class
也一直不不能够重名的限制

通用选择器一般用在预管理,初识化的时候

通用选用器一般用在预处理,初识化的时候

二.组合选取器

2.组合选用器

有时候只用基本采取器并无法让我们可相信找到标签,还亟需选拔一些结合标签

有时只用基本选用器并无法让我们可信找到标签,还索要动用一些结缘标签

  • c一,c二    多成分选用器,同时包容全数的c一成分和c二成分
  • c一 c二    后代采用器,相配全体属于c1后代的c2成分
  • c一 > c2 子代选拔器,用后代采纳器有个难题,全体属于c壹的后人都会被挑选,包蕴儿子代,用子代选用器就不会有其壹标题,子代选用器只会选择本人的外甥这一层级
  • c壹+c二    毗邻成分选用器,相称全体紧挨着c一要素之后的同级成分
  • c1~c二  
     普通兄弟元素,那几个和毗邻成分选用器的界别就是,未有了紧挨着的限定
  • c壹,c二    多元素选用器,同时相称全体的c一成分和c二成分
  • c1 c2    后代选拔器,相称所有属于c一后代的c贰成分
  • c一 > c2 子代选用器,用后代选拔器有个难题,全数属于c一的后生都会被增选,包罗外孙子代,用子代选用器就不会有这些主题材料,子代选拔器只会挑选自个儿的幼子那一层级
  • c1+c贰    毗邻成分选用器,匹配全体紧挨着c一要素之后的同级成分
  • c1~c贰  
     普通兄弟成分,这些和毗邻成分选择器的区分便是,未有了紧挨着的限量

叁.属性选取器

三.属性选用器

对于标签的固有属性,如id和class,能够通过#或.的不二秘诀找到。

对于标签的原本属性,如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>
 <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″]{}

当有三个一律的自定义属性时,还能用属性值区分,如div[zhang=”123″]{}

四、伪类

四、伪类

1.anchor伪类:

1.anchor伪类:

  大家浏览网页的时候,有时会蒙受鼠标放在二个成分上时,成分会发生变化的景色,那正是经过anchor伪类落成的,不止有鼠标悬浮的体制,还可以安装点击时,以及点击后的体裁

  我们浏览网页的时候,有时会越过鼠标放在贰个因素上时,成分会发生变化的境况,那正是通过anchor伪类完毕的,不止有鼠标悬浮的体制,还能安装点击时,以及点击后的体裁

  a:link   暗许状态

  a:link   私下认可状态

  a:hover    鼠标悬浮在要素上的体裁

  a:hover    鼠标悬浮在要素上的体裁

  a:visited   点击过的因素的体裁

  a:visited   点击过的成分的体制

  a:active    在要素上按下鼠标时的体制

  a:active    在要素上按下鼠标时的体制

那两个标签是针对性于a标签用的,但不限于a标签,在那之中hover是最常用的

那多少个标签是本着于a标签用的,但不限于a标签,个中hover是最常用的

图片 1图片 2

图片 3图片 4

<!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;
        }
        .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

View Code

还是能在父级增添伪类,修改子级标签,那种场合采纳也很普及

还足以在父级增多伪类,修改子级标签,那种情状选取也很宽泛

图片 5图片 6

图片 7图片 8

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

View Code

2.before after伪类

2.before after伪类

那个伪类的功效是在挑选的价签的前方也许前边加1个剧情

以此伪类的功能是在挑选的价签的前头也许后边加1个内容

    <style>
        p:after{
            content: 'world';
            color: #2b99ff;
        }
    </style>
</head>
<body>
    <p>hello</p>
</body>
    <style>
        p:after{
            content: 'world';
            color: #2b99ff;
        }
    </style>
</head>
<body>
    <p>hello</p>
</body>

这么会在浏览器中显得helloworld,可是从网页的html源码中是找不到world的,那一个伪类的根本效率就是把部分会让读者看不懂的代码,写到伪类中,比如布局的时候须要八个空的div标签,要是写到源码中,读者读到那几个岗位大概会形成误解。所以就写到伪类中。content的属性值,更多的时候是空的。

如此那般会在浏览器中显得helloworld,但是从网页的html源码中是找不到world的,那几个伪类的机要效率正是把有个别会让读者看不懂的代码,写到伪类中,举个例子布局的时候须求1个空的div标签,如若写到源码中,读者读到这一个地点大概会招致误解。所以就写到伪类中。content的属性值,更多的时候是空的。

5、选择器的事先级

5、选拔器的预先级

  要是大家十分的大心用区别的选用器,选定了同3个标签,那这几个标签的样式,应该在于哪个选用器呢,那就用到了选择器的先期级。

  纵然我们非常的大心用不一致的选拔器,选定了同三个标签,那那么些标签的体制,应该在于哪个选用器呢,那就用到了选用器的事先级。

  分裂的选择器,有不一样的权重值,

  分化的选择器,有分裂的权重值,

  行内式:             1000

  行内式:             1000

          id:                    100

          id:                    100

    class:                     10

    class:                     10

 element(标签):    1

 element(标签):    1

再有二种,一种是在样式前边加!import的,那种是不看规则的,他的权重最高,惹不起

还有二种,一种是在体制前边加!import的,那种是不看规则的,他的权重最高,惹不起

另壹种就是默许传承的体制,那种最怂,权重值最低

另一种就是默许承袭的体制,这种最怂,权重值最低

遇见子类,权重值是相加的

遇上子类,权重值是相加的

那种差十倍的,我们就不可比了,就相比较个差2个权重的,意思意思就行了

那种差10倍的,我们就不可比了,就比较个差二个权重的,意思意思就行了

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

其一例子,.c叁的权重值是拾,

本条例子,.c三的权重值是10,

     .c2 .c3的权重是拾+10=20,

     .c贰 .c三的权重是10+10=20,

     .c一 .c2 .c3 的权重值是10+10+10=30

     .c一 .c二 .c3 的权重值是10+10+10=30

就此最后结果,背景颜色一定是白色褐,通过那些例子就能驾驭选拔器的先期级

从而最终结出,背景颜色一定是玫瑰杏黄,通过这几个事例就能精晓选用器的先行级

事后倘若境遇样式改不了的景况,将在思量是否在后面有比它预先级更加高的价签

以往纵然越过样式改不了的意况,将要思量是否在事先有比它预先级越来越高的竹签

六、css属性

六、css属性

1.字体的性质

一.字体的习性

(1)颜色:设置颜色有二种格局:

(①)颜色:设置颜色有三种艺术:

  • 十陆进制值,如#3e3e3e
  • RGB值,如RGB(255,255,0)
  • 水彩的英文名称,如red,green
  • rgba :在WranglerGB的时候,还能钦点发光度,如 PRADOGBa(255,120,120,0,五)
  • 十6进制值,如#3e3e3e
  • RGB值,如RGB(255,255,0)
  • 水彩的英文名称,如red,green
  • rgba :在翼虎GB的时候,仍是可以钦命发光度,如 逍客GBa(25伍,120,120,0,五)

(贰)对齐格局:默许是左对齐

(二)对齐方式:暗中认可是左对齐

  对齐方式的性质是text-align,属性值:

  对齐格局的脾性是text-align,属性值:

  • left  左对齐
  • center  居中
  • right  右对齐
  • justify  两端对齐
  • left  左对齐
  • center  居中
  • right  右对齐
  • justify  两端对齐

(三)其余质量

(三)别的质量

            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;  文本转换属性,把所有字母变成大写
            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,那两本个性在对齐的时候平日会用到

重中之重说一下vertical-align和line-heigh,那两性情子在对齐的时候日常会用到

(1)vertical-align

(1)vertical-align

每3个要素自己都会有4条线,顶线,中线,基线,底线

每二个要素本人都会有4条线,顶线,中线,基线,底线

图片 9

图片 10

让图片和文字在一行显示的时候,默许是依据基线对齐的,大家能够在图片标签的体制中设置按中线对齐恐怕底线

让图片和文字在壹行展现的时候,暗中认可是遵守基线对齐的,大家得以在图纸标签的体制中设置按中线对齐或许底线

 (2)line-height

 (2)line-height

对此块级标签,把行高设置成和块级元素的冲天一样,就会笔直居中了。

对此块级标签,把行高设置成和块级成分的惊人同样,就会笔直居中了。

 2.背景

 2.背景

大家驾驭能够在标签的体裁中加背景象,其实背景不仅能够是纯色,还足以是图表

俺们精晓能够在标签的体制中加背景象,其实背景不仅能够是纯色,还是能是图片

background: url("logo.png") no-repeat 0 0;
background: url("logo.png") no-repeat 0 0;
  • url后边放的是图形的地址,能够是地面地址,也得以是互联网地址
  • no-repeat是设置图片的的填写方式,还是能够设置成横向填充(repeat-x),纵向填充(repeat-y)
  • 最后多少个值是图形地方,以像素为单位,0 0
    就象征在页面包车型客车左上角,可以安装成center center 就在页面中央了
  • url后边放的是图表的地方,可以是地点地址,也能够是网络地址
  • no-repeat是设置图片的的填充格局,仍是能够设置成横向填充(repeat-x),纵向填充(repeat-y)
  • 最终七个值是图表地方,以像素为单位,0 0
    就意味着在页面包车型客车左上角,能够安装成center center 就在页面中央了

把背景设置成图片,应用最多的是网页上的小Logo,大多数那些图标并不是一张张小的图片,而是1整张大的图纸,包涵众多小Logo,通过活动地方让他俩在期待的地点显得想要的一部分。

把背景设置成图片,应用最多的是网页上的小Logo,超过一半那么些Logo并不是一张张小的图片,而是1整张大的图纸,包涵众多小Logo,通过运动地方让他俩在期待的职位显得想要的有个别。

 3.边框

 3.边框

有多个属性:border-width:一px边框宽度

有5天性格:border-width:壹px边框宽度

      border-style:solid边框样式,可以是虔诚也足以是虚线、点实线。。。

      border-style:solid边框样式,可以是真心也能够是虚线、点实线。。。

      border-color:red 边框颜色

      border-color:red 边框颜色

动用的时候一般都简写成 border:一px solid red    那多个属性值未有各种

利用的时候一般都简写成 border:1px solid red    那八个属性值未有各样

仍是能够独立设置四个样子的边框

还足以独立设置八个样子的边框

能够用边框的性质画2个三角形:

能够用边框的属性画多个三角:

图片 11图片 12

图片 13图片 14

    <style>
        div{
            width: 0;
            height: 0;
            border:50px solid green;
            border-bottom-color: red;
            border-top:none;;
        }
    </style>
    <style>
        div{
            width: 0;
            height: 0;
            border:50px solid green;
            border-bottom-color: red;
            border-top:none;;
        }
    </style>

View Code

View Code

四.列表属性

四.列表属性

在html中,列表的每壹项前面包车型客车圆点大家不能修改,在css中就足以了

在html中,列表的每一项前边的圆点大家不可能修改,在css中就能够了

list-style-type   设置列表项标识的花色,disc是真心实意圆点,square是长方形实心块。。

list-style-type   设置列表项标识的类型,disc是实心圆点,square是长方形实心块。。

list-style-image 用图形当作列表项的标识

list-style-image 用图形当作列表项的标记

list-style-position    设置列表项标识的职责

list-style-position    设置列表项标识的岗位

而是,以上用的都不多,用的最多的是撤销列表项标识

不过,以上用的都不多,用的最多的是撤除列表项标记

list-type:none

list-type:none

 

 

七、display属性

七、display属性

有多少个属性值:none,block,inline ,inline-block

有八个属性值:none,block,inline ,inline-block

1.none

1.none

display:none
 隐藏标签,这几个隐形的情趣是不仅那么些标签看不到了,而且那一个标签在页面中据有的职责也远非了,其余情节会来攻克那么些职位,比如京东天猫百货店这么些网址的首页中那2个轮播图,其实是数不胜数张图片都在同2个岗位,然而一样时刻只体现一张,其余的都隐藏

display:none
 隐藏标签,那几个隐形的意趣是不仅这一个标签看不到了,而且那一个标签在页面中据为己有的地方也未曾了,其余内容会来据为己有那些职分,比方京东天猫那几个网址的首页中国和欧洲常轮播图,其实是过多张图纸都在同3个地方,可是同样时刻只展现一张,别的的都隐藏

 

 

二.block 把内联标签变成块级标签

二.block 把内联标签形成块级标签

块级标签在页面中是操纵1行的,能够设置宽度和惊人

块级标签在页面中是操纵1行的,能够安装宽度和惊人

而内联标签是并排突显,除非壹行放不下了才会换行,内联标签设置宽高无效

而内联标签是并排突显,除非一行放不下了才会换行,内联标签设置宽高无效

三.inline 把块级标签形成内联标签

3.inline 把块级标签形成内联标签

 

 

肆.inline-block,这一个才是最常用的,这些性情能够让标签既能并排展现,又有块级标签能够设置宽高的性状

四.inline-block,那一个才是最常用的,那几个天性能够让标签既能并排展现,又有块级标签能够设置宽高的风味

 

 

八、盒子模型

8、盒子模型

网页上的各样成分,都足以知晓为一个盒子,盒子有和谐的空间,有增长幅度(width)和可观(height),盒子里面存放东西(content),存放的东西与盒子间的相距正是内边距(padding),盒子有本人的边框(border),盒子与盒子之间的离开叫做外边距(margin)

网页上的各样成分,都足以清楚为二个盒子,盒子有温馨的长空,有增长幅度(width)和可观(height),盒子里面存放东西(content),存放的东西与盒子间的相距就是内边距(padding),盒子有投机的边框(border),盒子与盒子之间的离开叫做外边距(margin)

图片 15

图片 16

实在,大家也理应把各样块级成分都看作2个盒子,不钦命宽高的话,默许宽度是浏览器宽度,暗许中度是内容惊人

其实,大家也相应把各类块级元素都用作三个盒子,不钦赐宽高的话,暗中同意宽度是浏览器宽度,暗中认可高度是内容惊人

能够独立设置多个趋势的边距,分别为top,right,bottom,left

可以独自设置四个趋势的边距,分别为top,right,bottom,left

设置maigin可能padding时,前面包车型客车值可以安装二个,也足以安装多少个,顺序是上,右,下,左

安装maigin只怕padding时,前面包车型大巴值能够设置1个,也得以安装八个,顺序是上,右,下,左

margin:十px;         表示盒子上下左右多个边距都以拾px

margin:十px;         表示盒子上下左右三个边距都以拾px

margin:十px,20px;        表示盒子上上面距是十px,左右是20px

margin:十px,20px;        表示盒子上上边距是10px,左右是20px

margin:10px,20px,30px;    上边距10px,右边距20px,下边距30px

margin:10px,20px,30px;    上边距10px,右边距20px,下边距30px

一旦多少个同级盒子的左右侧距设置分别为10px和20px,最终四个并列的盒子之间的偏离是20px,会取多少个值的最大值,而不是五个值相加

假定三个同级盒子的前后面距设置分别为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>
<!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>

看一下以此例子,c壹和c二是弟兄关系,c三,c四是c二的子级,未来在浏览器中是这么的:

看一下那么些事例,c一和c二是弟兄关系,c3,c4是c二的子级,未来在浏览器中是如此的:

图片 17

图片 18

于今给c三加三个margin-top:30px;再来看成效:

现行反革命给c三加多个margin-top:30px;再来看成效:

图片 19

图片 20

能够观察,c3的阿爸c二也随着向下移动了,这就是父级塌陷现象

能够看看,c三的爹爹c贰也随着向下活动了,那就是父级塌陷现象

 那眼看不是我们想要的,出现这一个难点的来头是那个父级标签未有内容,当子级标签加上margin-top那脾本性后,他会往团结的上方找。假诺找到的是兄弟标签,那尚未难题。可是如果找到的是父级标签,将要看那一个爹爹是否合格的生父(有未有内容),假若未有内容,就不认那一个老爹了,就会以本人代码之上的另一个标签为尺度,修改自个儿的上边距,假使地方未有成分,就会以body为准。

 那显明不是大家想要的,现身这些难题的来由是以此父级标签未有内容,当子级标签加上margin-top那么些脾性后,他会往团结的顶端找。如果找到的是手足标签,那尚未难题。不过借使找到的是父级标签,就要看这一个阿爹是还是不是合格的阿爸(有未有内容),假诺未有内容,就不认这么些阿爹了,就会以友好代码之上的另二个标签为准绳,修改本身的上方距,若是地点未有成分,就会以body为准。

消除这几个主题素材的法子正是:给父级标签加上内容,有多少个法子:有境界border可以,有内边距padding能够,有内容content也能够。

杀鸡取卵这么些标题的艺术正是:给父级标签加上内容,有多少个形式:有边界border能够,有内边距padding能够,有内容content也得以。

再有一个办法,在父级标签的体制中增进   overflow:hidden
 那种艺术算是以偏概全吧,尽管能一下子就解决了难点,但不推荐用

再有四个办法,在父级标签的体制中加上   overflow:hidden
 那种格局算是一叶障目吧,即便能减轻难题,但不推荐用

 

 

margin还有二个常用的地点,便是调解子成分 在父标签左右居中

margin还有3个常用的地方,就是调度子成分 在父标签左右居中

margin:0 auto;  第二个值是下边距,能够依赖须求调动

margin:0 auto;  第3个值是下面距,能够凭借必要调治

 

 

九、float属性

九、float属性

 不荒谬状态下,我们写的竹签在网页中是半自动依照从左到右,从上到下的逐壹依次排列的,在那之中内联标签是同仁一视摆列,块级元素是独占壹行,那正是例行文书档案流

 平常状态下,大家写的价签在网页中是半自动遵照从左到右,从上到下的逐1依次排列的,个中内联标签是玉石俱焚摆列,块级成分是独占1行,那正是健康文书档案流

一旦将成分浮动起来,从平时排版中拿开,那么别的因素在固化的时候就会忽视这个成分,这么些成分就叫脱离平常文书档案流

设若将成分浮动起来,从一般排版中拿开,那么此外因素在向来的时候就会忽略这个成分,这么些因素就叫脱离平时文书档案流

float属性正是会让成分浮在不奇怪文书档案流之上,可以向左飘或然向右飘,倘诺具有的标签都转移起来,那就既能够调宽高,又足以在一排展现了,和display:inline-block;的职能等同

float属性正是会让成分浮在例行文档流之上,可以向左飘恐怕向右飘,假如持有的标签都生成起来,那就既能够调宽高,又足以在一排突显了,和display:inline-block;的法力一样

当块级标签在一定的时候,借使她的上一个标签是正规文书档案流,就贴到他的垂直下方

当块级标签在固定的时候,假使他的上1个标签是正规文书档案流,就贴到他的垂直下方

假使果浮动流,就并排贴到它的动手

即便是浮动流,就并排贴到它的左侧

主题素材又来了,看这一个例子

主题素材又来了,看那么些例子

图片 21图片 22

图片 23图片 24

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

View Code

在那一个事例中,
在父级标签c贰底下的c1标签被c2的子标签覆盖,同时父级标签坍缩成一条线

在这么些例子中,
在父级标签c二上边包车型客车c一标签被c2的子标签覆盖,同时父级标签坍缩成一条线

图片 25

图片 26

并发这一个主题素材的因由是三个子成分浮动起来后,脱离了常规文书档案流,父标签未有内容,也并未被几个有内容的子成分撑开,因而坍缩成了一条线,消除格局:

出现这些难点的原委是五个子成分浮动起来后,脱离了正规文书档案流,父标签未有内容,也不曾被七个有内容的子元素撑开,因而坍缩成了一条线,化解方法:

1.

1.

第三想到的相应是给父级标签加1个恒定高度,那样不管有未有内容,地方反正都已经占好了。不过这么些惊人应该增添少吧,至少要能包涵住子成分,又无法凌驾好些个,那是个难点,而且以此格局很笨重,一点都倒霉看

第1想到的相应是给父级标签加一个牢固中度,那样无论有未有内容,地点反正都已经占好了。然则这几个惊人应该增加少吧,至少要能包罗住子元素,又不可能当先大多,那是个难题,而且那几个主意很笨重,一点都不优雅

二.革除浮动

2.排除浮动

此地用到1个新的属性:清除浮动 clear,有多少个属性值

那边用到三个新的本性:清除浮动 clear,有四个属性值

none: 暗中同意值,允许两边有变化成分

none: 暗许值,允许两边有浮动成分

left:  左边不允许有变化的因素

left:  右边不相同意有浮动的因素

right: 左侧分裂意有变化成分

right: 右侧分化意有变动元素

both:  两边都分歧意有生成成分

both:  两边都不容许有变动成分

clear只会对本身起效果,不会潜移默化其余因素。

clear只会对作者起效果,不会潜移默化别的因素。

有了那天天性,大家在c壹标签中丰裕那性格格,就能够缓和现行反革命的难点

有了那特性格,大家在c1标签中增多那天性格,就可以减轻现行反革命的主题素材

图片 27

图片 28

不过难题照旧不曾通透到底搞定,首先c2照旧坍缩成了一条线,别的还有个难题,c一标签增加margin属性的时候会开掘,margin失效了

但是难题也许未有通透到底化解,首先c二照旧坍缩成了一条线,其余还有个难题,c壹标签增多margin属性的时候会意识,margin失效了

3.

3.

在父级标签中再加一个有内容的块级标签,对那个标签清除浮动,有内容不过不可能对全体布局导致影响,所以内容设置为空

在父级标签中再加2个有内容的块级标签,对那些标签清除浮动,有内容不过不能够对完全布局导致影响,所以内容设置为空

图片 29图片 30

图片 31图片 32

<!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;
        }
        .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

View Code

图片 33

图片 34

能够观看,难点早就完善的缓和了,再优化一下,实际行使中大家的代码料定会不长,不或许对种种有必要的父级标签都助长二个新的子标签,大家得以用二个类,对这一个类增添样式,哪个标签供给,就在类中增进那些类名,就足以了

能够见见,难点已经到家的消除了,再优化一下,实际应用中咱们的代码分明会非常短,不容许对种种有必要的父级标签都加上一个新的子标签,大家能够用三个类,对这一个类加多样式,哪个标签要求,就在类中丰硕这么些类名,就可以了

图片 35图片 36

图片 37图片 38

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

View Code

④.还有壹种方式:overflow:hidden;在父级标签的体裁中增加这么些就行了,然则那一个有包容性难题,不引入用

四.还有一种办法:overflow:hidden;在父级标签的体裁中加上这些就行了,然而那一个有包容性难题,不引入用

 

 

 十、position属性

 十、position属性

设置position属性后,通过内外左右(top,buttom,left,right)八个位置设定的距离举办偏移

设置position属性后,通过上下左右(top,buttom,left,right)八个岗位设定的偏离举办偏移

1.static  默认值

1.static  默认值

二.relative相对定点

二.relative相对稳住

周旋固化以成分和睦的原有地方为参照物,不过relative属于半退出常常文书档案流,因为她的原始地点还在,其余因素不恐怕侵夺。那一个天性重要与absolute合营使用

绝对固化以成分和谐的本来面目地点为参照物,可是relative属于半退出寻常文书档案流,因为她的原来地点还在,别的因素无法侵占。那特性情首要与absolute同盟使用

三.absolute相对定位

三.absolute纯属定位

安装为相对定位的因素会以目前的已定位的上司成分定位,借使具备的上边成分都尚未牢固,则以body为尺度地点偏移。相对定位属于完全退出文书档案流,本身的原来地点会被别的因素占领。

安装为相对定位的成分会以近期的已定位的上面元素定位,假设具有的上级成分都未有永远,则以body为原则地点偏移。相对定位属于完全剥离文书档案流,自身的原始地方会被其余因素并吞。

行使中得以对父级标签设置成相对牢固,但不用偏移,那样子级成分就足以以父级标签为尺度移动地方了

运用中能够对父级标签设置成相对稳固,但不要偏移,那样子级成分就足以以父级标签为尺度移动地方了

4.fixed 完全退出

四.fixed 截然剥离

以窗口为参照物,纵然出现滚动的情形,设置为fixed的成分也不会随着滚动,须要小心,设置为fixed的因素无法在安装float,那是多个不等的文书档案流

以窗口为参照物,固然出现滚动的动静,设置为fixed的要素也不会趁着滚动,必要小心,设置为fixed的元素无法在安装float,那是七个不等的文书档案流

比方浏览网页时,右下角有个重临顶部的按钮,就是用的那特性情

比方浏览网页时,右下角有个再次来到顶部的按键,正是用的那特天性

 

 

 101、响应式布局

 10壹、响应式布局

 响应式正是当我们的浏览器分辨率产生变化的时候,页面布局保持不改变,所以供给推断分辨率,依照差别的分辨率设置区别的体裁

 响应式正是当大家的浏览器分辨率发生变化的时候,页面布局保持不改变,所以须求推断分辨率,依据差异的分辨率设置差异的样式

图片 39图片 40

图片 41图片 42

<!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-width: 1200px) {
            div{
            width: 100%;
            height: 100px;
            background: red;
            }
        }


        @media screen and (max-width: 900px){
            div{
            width: 100%;
            height: 100px;
            background: green;
            }
        }

        @media screen and (max-width: 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>
        @media screen and (max-width: 1200px) {
            div{
            width: 100%;
            height: 100px;
            background: red;
            }
        }


        @media screen and (max-width: 900px){
            div{
            width: 100%;
            height: 100px;
            background: green;
            }
        }

        @media screen and (max-width: 600px) {
            div{
            width: 100%;
            height: 100px;
            background: black;
            }
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

View Code

View Code

 

 

演练:抽屉网首页

演练:抽屉网首页

图片 43图片 44

图片 45图片 46

<!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="图片 47"></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="#"></a>
                    <input type="text" >


                </form>

                        <!---->
                <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>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 48"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 49">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 50"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 51">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 52"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 53">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 54"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 55">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 56"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 57">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 58"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 59">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                         <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 60"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 61">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                     </ul>
                 </div>
                <div class="page clearfix">
                      <div class="page_box ">
                            <ul>
                                <li>1</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="图片 62" class="right_img"></li>
                    <li><img src="homepage_right.png" alt="图片 63" class="right_img"></li>
                    <li><img src="chen_right.jpg" alt="图片 64" class="right_img"></li>
                    <li><img src="erwema_right.jpg" alt="图片 65" class="right_img"></li>
                </ul>
            </div>
            <div class="bottom">
                <div class="outer_link">
                    <ul>
                    <li><a href="#" class="bottom_text">关于我们</a></li>
                    |
                    <li><a href="#" class="bottom_text">联系我们</a></li>
                    |
                    <li><a href="#" class="bottom_text">服务条款</a></li>
                    |
                    <li><a href="#" class="bottom_text">隐私政策</a></li>
                    |
                    <li><a href="#" class="bottom_text">抽屉新热榜工具</a></li>
                    |
                    <li><a href="#" class="bottom_text">下载客户端</a></li>
                    |
                    <li><a href="#" class="bottom_text">意见与反馈</a></li>
                    |
                    <li><a href="#" class="bottom_text">友情链接</a></li>
                    |
                    <li><a href="#" class="bottom_text">公告</a></li>
                    <li><a href="#" class="bottom_text"><img src="rss.png" alt="图片 66"></a></li>
                </ul>

                </div>
                <div class="lower_item">
                    <div class="row1">
                        <a href="#"><img src="gozap-logo.png" alt="图片 67"class="gozap_logo"></a>
                        旗下站点 &copy2017 chouti.com
                        <a href="#">京ICP备052302号-3 京公网安备 397272979</a>
                    </div>
                    <div class="row2">
                        违法和不良信息举报: 电话: 13021552997 &nbsp邮箱:zhangcan121@163.com
                    </div>
                    <div class="row3">
                        版权所有:北京格物致知科技有限公司
                    </div>

                </div>

            </div>
        </div>
    </div>
    <div class="turn2top">
        <a href="#start"></a>
    </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="图片 68"></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="#"></a>
                    <input type="text" >


                </form>

                        <!---->
                <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>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 69"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 70">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 71"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 72">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 73"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 74">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 75"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 76">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 77"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 78">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 79"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 80">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                         <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="图片 81"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="图片 82">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                     </ul>
                 </div>
                <div class="page clearfix">
                      <div class="page_box ">
                            <ul>
                                <li>1</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="图片 83" class="right_img"></li>
                    <li><img src="homepage_right.png" alt="图片 84" class="right_img"></li>
                    <li><img src="chen_right.jpg" alt="图片 85" class="right_img"></li>
                    <li><img src="erwema_right.jpg" alt="图片 86" class="right_img"></li>
                </ul>
            </div>
            <div class="bottom">
                <div class="outer_link">
                    <ul>
                    <li><a href="#" class="bottom_text">关于我们</a></li>
                    |
                    <li><a href="#" class="bottom_text">联系我们</a></li>
                    |
                    <li><a href="#" class="bottom_text">服务条款</a></li>
                    |
                    <li><a href="#" class="bottom_text">隐私政策</a></li>
                    |
                    <li><a href="#" class="bottom_text">抽屉新热榜工具</a></li>
                    |
                    <li><a href="#" class="bottom_text">下载客户端</a></li>
                    |
                    <li><a href="#" class="bottom_text">意见与反馈</a></li>
                    |
                    <li><a href="#" class="bottom_text">友情链接</a></li>
                    |
                    <li><a href="#" class="bottom_text">公告</a></li>
                    <li><a href="#" class="bottom_text"><img src="rss.png" alt="图片 87"></a></li>
                </ul>

                </div>
                <div class="lower_item">
                    <div class="row1">
                        <a href="#"><img src="gozap-logo.png" alt="图片 88"class="gozap_logo"></a>
                        旗下站点 &copy2017 chouti.com
                        <a href="#">京ICP备052302号-3 京公网安备 397272979</a>
                    </div>
                    <div class="row2">
                        违法和不良信息举报: 电话: 13021552997 &nbsp邮箱:zhangcan121@163.com
                    </div>
                    <div class="row3">
                        版权所有:北京格物致知科技有限公司
                    </div>

                </div>

            </div>
        </div>
    </div>
    <div class="turn2top">
        <a href="#start"></a>
    </div>
</body>
</html>

图片都是本地图片

View Code

View Code

 

 

相关文章