前端开发之css篇

2018-06-24 01:44:31来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、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-width: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的子标签覆盖,同时父级标签坍缩成一条线

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

1.

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

2.清除浮动

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

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

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

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

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

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

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

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

3.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        .c2{
            border: 1px solid red;
        }
        .c1{
            width: 300px;
            height: 200px;
            background: gold;
            clear: both;
            margin-top: 10px;
        }
        .c3 {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        .c4{
            width: 100px;
            height: 100px;
            background: #2b99ff;
            float: left;
        }
        .c5{
            content: "";
            clear: both;
        }
    </style>
</head>
<body>

    <div class="c2">
        <div class="c3"></div>
        <div class="c4"></div>
        <div class="c5"></div>
    </div>
    <div class="c1"></div>
</body>
</html>
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-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

 

练习:抽屉网首页

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:font_awesome的icon库的使用

下一篇:CSS多行文本垂直居中