zoukankan html css js c++ java

前端之css操作2

一伪类选择器

　伪类选择器就是在查找的后面加上冒号和状态

　hover：悬浮到上面就会变化一种状态

　link：没有接触的状态

　active：点击是触发的状态

　visited：点击后的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: #00b050;
        }

        a:hover{
            color:#fff59d;
        }

       a:active{
            color:#0b9efb;
        }

        a:visited{
            color:#2d98fc;
        }
    </style>
</head>
<body>

<a href="#">请点击</a>

</body>
</html>

二 css里面的属性补充

　图片属性：

　　verticar-algin：调图片底线的位置，可以调节文本和图片底线对齐。文本有四线，图片默认对应的是图片的基线，

　　background-image：背景图片

　　background-repeat：图片填充的放向

　　background-position：背景图片的位置。

　　background：上面三个结合起来

　　background-size：背景图片的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .i1{
            vertical-align: -3px;
        }

        .d1{
             100%;
            height:400px;
            /*background-image:url(111.png);*/
            /*background-repeat:no-repeat;*/
                    /*!*repeat-x;  行  repeat-y  竖*!*/
            /*background-position:50%;*/
            background:url(111.png) no-repeat 50%;
            background-size:contain;
        }
    </style>
</head>
<body>

<div class="d1">
    <span>美女</span>
    <img src="111.png" alt="" class="i1">
    
</div>
</body>
</html>

　display属性：将块级标签设置为内联标签，将内联标签设置为块级标签。

　　none值：将元素隐藏起来

　　block值：将内联标签设置为块级标签

　　inline值：将块级标签设置为内联标签

　　inline-block值：拥有了设置长宽，同时也可以在一行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            display: inline;
        }

        span{
            display: block;
        }

        .d{
        display:inline-block;
        }
    </style>
</head>
<body>

<div>div</div>
<div>div1</div>

<span>span</span>
<span>span1</span>


<div class="d">div2</div>
<div class="d">div3</div>

<span class="d">span2</span>
<span class="d">span3</span>
</body>
</html>

　边框属性：border属性

　　color：设置颜色

　　width：设置宽度

　　height：设置高度

　　style：设置线体（botted，dashed，：虚线；solid：实线；double：双层线；）

　　radius：调节形状

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            200px;
            height: 200px;
            border-color:#0C5404;
            border- 5px;
            border-style: groove;
            border-radius:30px;
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>

　列表属性：

　　list-style属性：列表样式（none值：去掉样式；circle：空心圆；armenian：特殊符号；decimal：序号；disc：实心圆）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style: georgian;
        }
    </style>
</head>
<body>


<ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ul>
</body>
</html>

　文本属性：

　　word-spacing：文本的边距

　　content：内容区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        
        span{
            word-spacing: 50px;
        }

    </style>
</head>
<body>

<span>hellasdfdso sadfs</span>

</body>
</html>

　content属性详细资料：http://www.runoob.com/cssref/pr-gen-content.html

三 float属性补充

　float属性和display属性的差别：1 float的浮动标签是需要根据上一个标签是否浮动决定的，内联标签加上float，就可以设置长宽，二display直接就可以设置为inlineblock，同时可以设置长宽，还可以同一行显示；2 display属性比float属性更加的容易操作。

　什么是正常文档流：从左到右，从上到下的正常解析顺序

　什么是非正常文档流：元素或者标签解析无规律

　什么是父级塌陷：当子标签右浮动时，父标签就会为空，就不会撑起父标签的位置，这就叫做父级塌陷。反之如果子标签没有浮动元素，就可以撑起父标签的面积。

　解决父级塌陷的方法：

　　after：给某些标签加上一个子标签（伪类），主要时为了解耦（常用单词：cleafix）

　清除浮动属性：clear属性

　　none：默认值，允许两边都可以右浮动元素

　　left：清除左浮动

　　right：清除右浮动

　　auth：清除两边有的浮动。注意：在解析清除浮动的标签时，他下一个标签还没有操作，所以后面的浮动效果还存在。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d2{
            border: 1px red solid;
        }

        .d1{
             30px;
            height:30px;
            margin-left: 10px;
            background-color: #0b9efb;
            float: left;
        }

        .clearfix:after{
            content: "sdas";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>


<div class="d2 clearfix">
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
</div>
</body>
</html>

　定位属性：position属性

　　relative：相对定位，top顶部距离；left：左部距离；buttom：下边距离；right：右边距离。空间位置依然存在，并未脱离文档流，参照物时之前自己的位置

　　absolute：绝对定位。完全脱离文档流，之前位置不存在，定位一是想上找一个已经定位了的父级标签

　　fixed：完全脱离文档流，参照物就是可视窗口，也就是当前屏幕。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }

        .d1{
             200px;
            height: 200px;
        }

        .d4{
            background-color: #0b9efb;
            position:fixed;
            bottom:20px;
            right:20px;

        }

        .d2{
            background-color: red;
            position:relative;
            top:200px;
           left:200px;
        }


        .d3{
            background-color: #0C5404;
            position:absolute;
            top:200px;
            left:200px;
        }

        .d5{
             100%;
            height: 2000px;
        }

        .d6{
            background-color: #00e676;
        }
    </style>
</head>
<body>

<div class="d5">
    <div class="d1 d6"></div>
    <div class="d1 d4"></div>
    <div class="d2 d1"></div>
    <div class="d3 d1"></div>
</div>
</body>
</html>

　　补充知识：

　　　overflow：hidden：在父级标签里面加上这个，元素超出的范围就会隐藏

　　　overflow（sceroll：显示滚动条；auto：溢出时显示滚动条）

　　　什么是响应式布局：在分辨率到达一个值的时候，换成该对应得到布局方式。

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }

        .title{
            width: 100%;
            height: 44px;
            background-color: #2459a2;
            position: fixed;
            top:0;
            left:0;
        }

        .drawer{
            width:80%;
            height:44px;
            margin: 0 auto;
            line-height:44px;
        }

        .drawer .igon{
            display: inline-block;
            width: 130px;
            height: 24px;
            background-color: #fffde7;
            margin-top: 10px;
            margin-right: 10px;
            background: url(111.png) no-repeat 0 0;
            float: left;
        }

        .guidelines .range{
            text-decoration: none;
            float: left;
            padding: 0 15px 0 15px ;
            color:#c0cddf;
        }

        .guidelines .range:hover{
            background-color: #396bb3;
            color: #fff;
        }

        .guidelines .default,.guidelines .default:hover{
            background-color: #204982;
            color:#fff;
        }

        .key_search{
            float:right;
            margin-top: 8px;
        }
        
        .key_search .search{
            width: 91px;
            height: 25px;
            float: left;
            border: solid 1px #fff;
        }

        .key_search .rable{
            float:left;
            width: 25px;
            height: 27px;
            background-color: #fff;
            text-align: center;
            line-height:27px;
            border-left:solid #ffffcc 0.5px ;
        }

        .rablecon{
            width: 12px;
            height:11px;
            display: inline-block;
            background-color: #fffde7;
            background:url(icon.png) no-repeat 0 -197px;
        }

        .user .username{
            text-decoration: none;
            float: right;
            padding: 0 15px 0 15px ;
            color:#fff;
        }

        .user .username:hover{
            background-color: #396bb3;
        }

        .window{
            width: 100%;
            height: auto;
            background-color: #ededed;
            margin-top: 44px;
        }

        .content{
            width: 80%;
            height:auto;
            background-color: #fff;
            margin: 0 auto;
        }

        .content .content_main{
            width: 70%;
            height: auto;
            float: left;
        }

        .operating{
            width: 100%;
            height: 30px;
            margin-top: 10px;
            padding-bottom: 20px;
        }

        .post_status{
            width: 220px;
            height:30px;
            float: left;
            margin-left: 30px;
            margin-top: 5px;
        }

        .fire{
            color: #333;
            text-decoration: none;
            font-weight: 700;
            font-size:13px;
            background: url(222.png) no-repeat 0 -299px;
            display: inline-block;
            width: 60px;
            height: 26px;
            text-align: center;
            line-height: 26px;
        }

        .text{
            text-decoration: none;
            color: #369;
            margin: 5px 10px 5px 15px;
            font-weight:700;
            font-size:13px;
        }

        .text:hover{
            text-decoration: underline;
        }

        .release{
            float: right;
            width: 120px;
            height: 30px;
            background-color: #84a42b;
            margin-right: 20px;
            text-decoration: none;
            line-height: 30px;
            text-align: center;
            color:#FFF;
        }

        .symbol{
            display: inline-block;
            width: 12px;
            height: 11px;
            background: url(icon.png) no-repeat 0 -185px;
        }

        .datatime{
            width: 200px;
            height: 30px;
            float: right;
            margin-top: 5px;
        }

        .sort{
            font-size: 13px;
            color: silver;
            margin: 5px 10px 5px 0;
        }

        .data_time{
            text-decoration: none;
            color:#84a42b;
            margin: 5px 10px 5px 10px;
            font-size: 13px;
        }

        .data_time:hover{
            text-decoration: underline;
        }

        .the_topic{
            width: 100%;
            height: auto;
        }

        .content_text{
            height: auto;
            margin:10px 10px 10px 30px;
            padding-bottom: 10px;
            border-bottom: solid #ededed 1px;
        }

        .top_line{
            border-top:solid 1px #ededed;
        }

        .main_article{
            width: 84.8%;
            height: auto;
            float: left;

        }

        .like{
            margin-top: 15px;
            margin-bottom: 10px;
        }

        .link_into_it{
            text-decoration: none;
            color:#369;
            font-weight: 700;
            font-size: 14px;
        }

        .link_into_it:hover{
            text-decoration: underline;
        }

        .link_url{
            color: #b4b4b4;
            font-size: 13px;
            margin-right: 10px;
            margin-left:10px;
        }

        .address{
            color:#b4b4b4;
            font-size: 13px;
        }

        .information{
            color: #888888;
            font-size: 13px;
        }

        .access{
            width: 118%;
            height: auto;
        }

        .read_operation{
            width:170px;
            height: 25px;
            float: left;
        }

        .thumbs_up{
            margin:2px 8px 2px 2px;
            float: left;
        }

        .thumbs_up_icon{
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url(444.png) no-repeat 0 -40px;
            margin-right: 4px;
            vertical-align: -4px;
        }

        .thumbs_up:hover .thumbs_up_icon{
            background: url(444.png) no-repeat 0 -20px;
        }

        .thumbs_up_text,.comment_text{
            font-size: 15px;
            font-weight: 700;
            color: #99accb;
            font-family: italic;
        }

        .thumbs_up:hover .thumbs_up_text,.comment:hover .comment_text,.collection:hover .collection_text{
            text-decoration: underline;
            color:#369;
        }

        .comment,.collection{
            margin:2px 8px 2px 8px;
            float: left;
        }

        .comment_icon{
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 4px;
            background: url(444.png) no-repeat 0 -100px;
            vertical-align: -4px;
        }

        .comment:hover .comment_icon{
            background: url(444.png) no-repeat 0 -80px;
        }

        .collection_icon{
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 4px;
            background: url(444.png) no-repeat 0 -160px;
            vertical-align: -4px;
        }

        .collection_text{
            font-size: 13px;
            color: #99accb;
            font-family: italic;
        }

        .collection:hover .collection_icon{
            background: url(444.png) no-repeat 0 -140px;
        }

        .publisher{
            width: 280px;
            height: 25px;
            float: left;
            margin-top: 3px;
        }

        .publisher_image{
            width: 16px;
            height: 16px;
            border: solid 1px #979797;
            vertical-align: -3px;
        }

        .nickname{
            text-decoration: none;
            font-size:13px;
            color: #99accb;
            margin-right: 6px;
        }

        .time{
            text-decoration: none;
            font-size:14px;
            color:#e59373;
        }

        .time:hover{
            text-decoration:underline;
        }

        .classification{
            font-size:13px;
            color: #ccc;
        }

        .nickname:hover{
            text-decoration: underline;
            color:#369 ;
        }

        .share_bar{
            width:170px;
            height:25px;
            margin-top: 3px;
            float: left;
        }

        .hide{
            display:none;
        }

        .content_text:hover .share_bar{
            display:inline-block;
        }

        .share_it{
            font-size: 14px;
            margin-right: 5px;
            color: #ccc;
            float: left;
            margin-top: 1px;
        }

        .sina_wiebo{
            float: left;
            margin-top: 3px;
            margin-left: 8px;
            width: 17px;
            height:16px;
            background-color:#FFFFFF;
            background: url(http://dig.chouti.com/images/share_icon.png?v=2.15) no-repeat 0 0px;
        }

        .sina_wiebo:hover{
            background: url(http://dig.chouti.com/images/share_icon.png?v=2.15) no-repeat 0 -89px;
        }

        .watercress{
            float: left;
            margin-top: 3px;
            margin-left: 8px;
            width: 17px;
            height:16px;
            background-color:#FFFFFF;
            background: url(http://dig.chouti.com/images/share_icon.png?v=2.15) no-repeat 0 -15px;
        }

        .watercress:hover{
            background: url(http://dig.chouti.com/images/share_icon.png?v=2.15) no-repeat 0 -104px;
        }

         .QQ_space{
            float: left;
            margin-top: 3px;
            margin-left: 8px;
            width: 17px;
            height:16px;
            background-color:#FFFFFF;
            background: url(http://dig.chouti.com/images/share_icon.png?v=2.15) no-repeat 0 -30px;
        }

        .QQ_space:hover{
            background: url(http://dig.chouti.com/images/share_icon.png?v=2.15) no-repeat 0 -119px;
        }

        .everyone_network{
            float: left;
            margin-top: 3px;
            margin-left: 8px;
            width: 17px;
            height:16px;
            background-color:#FFFFFF;
            background: url(http://dig.chouti.com/images/share_icon.png?v=2.15) no-repeat 0 -60px;
        }

        .everyone_network:hover{
            background: url(http://dig.chouti.com/images/share_icon.png?v=2.15) no-repeat 0 -149px;
        }

        .image{
            width: 15%;
            height: auto;
            float: left;
        }

        .picture_settings{
            width: 65px;
            height: 65px;
            margin-left: 20px;
            margin-top: 18px;
            margin-bottom: 15px;
            padding: 2px;
            border:solid 1px #979797;
        }

        .picture_settings:hover{
            width: 150px;
            height: 150px;
            position: relative;
            top: -50px;
            left: -50px;
        }

        .flip_pages{
            width: 100%;
            height: auto;
            margin-top: 20px;
            float: left;
            padding-bottom: 50px;
        }

        ul li{
            list-style: none;
            float: left;
            font-size: 13px;
            padding: 10px 15px;
            border:solid 1px #d7d5d5;
            border-radius: 15%;
            margin-right: 8px;

            color:#369;
        }

        ul li:hover{
            background-color:#369;
            color: #ffffff;
        }

        li.left{
            margin-left: 40px;
        }

        .content .content_negative{
            width: 30%;
            height: auto;
            float: right;
            margin-top: 20px;
        }

        .image_display{
            width: 300px;
            height:400px;
        }

        .subtitle{
            float: left;
            margin-top: 10px;
            font-size: 16px;
            font-weight: 700;
            font-family: "宋体",Arial,Helvetica,sans-serif;
        }

        .leaderboards{
            float: left;
            margin-top: 11px;
            color:#c30;
            font-weight: 600;
            font-size: 16px;
            margin-left: 15px;
        }

        .the_hottest{
            width: 280px;
            height: 35px;
            text-align:center;
            line-height: 35px;
            background-color: #4767b2;
            margin-top: 50px;
            margin-left: 20px;
        }

        .hottest_list{
            color: #f4f4f4;
            font-size: 14px;
            text-decoration: none;
        }

        .sharp_corners{
            display: block;
            background-color: #4767b2;
            margin-left: 145px;
            margin-right: 140px;
            border-color: #4767b2 #fff #fff;
            border-style: solid;
            border-width: 7px;
        }

        .with_content{
            margin-left: 20px;
            width: 280px;
            height: auto;
            border-bottom:dashed 1px #d0d0cf;
            padding-bottom: 10px;
        }

        .number{
            width: 35px;
            height: auto;
            float: left;
            margin-top:30px;
            text-align: center;
        }

        .number a{
            text-decoration: none;
            color: #666;
            padding: 5px;
            background-color: #f0f0f0;
        }

        .negative_text{
            width: 200px;
            height: auto;
            float: left;
            margin-left: 15px;
            margin-right: 30px;
            margin-top: 30px;
        }

        .negative_text a{
            color: #333;
            font-size: 13px;
            text-decoration: none;
        }

        .negative_text:hover a{
            color: #369;
            text-decoration: underline;
        }

        .image_displaypro{
            width: 270px;
            height: 280px;
            margin-left: 30px;
            margin-top: 50px;
        }

        .data{
            float: left;
            width: 80%;
            height: auto;
            background-color: #ffffff;
            padding-top: 20px;
            text-align: center;
            margin-left:10%;
        }

        .data div{
            font-size: 15px;
            color: #d0d0cf;
        }

        .top_lines{
            border-top:#ededed solid 1px ;
            margin-left: 30px;
            margin-right: 30px;
            padding-top: 20px;
        }

        .bottom{
            margin-bottom: 50px;
        }

        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }


    </style>
</head>
<body>
<div class="title">
    <div class="drawer">
        <a href="" class="igon"></a>
        <div class="guidelines">
            <a href="#" class="range default">全部</a>
            <a href="#" class="range">42区</a>
            <a href="#" class="range">段子</a>
            <a href="#" class="range">图片</a>
            <a href="#" class="range">挨踢1024</a>
            <a href="#" class="range">你问我答</a>
        </div>
        <div class="key_search">
            <form action="">
                <input type="text" class="search">
                <a href="" class="rable"><span class="rablecon"></span></a>
            </form>
        </div>
        <div class="user">
            <a href="" class="username">注册</a>
            <a href="" class="username">登陆</a>
        </div>
    </div>
</div>
<div class="window clearfix">
    <div class="content clearfix">
        <div class="content_main">
            <div class="operating">
                <div class="post_status">
                    <a href="" class="fire">最热</a>
                    <a href="" class="text">发现</a>
                    <a href="" class="text">人类发布</a>
                </div>
                <a href="#" class="release" >
                    <span class="symbol"></span>
                    <span>发布</span>
                </a>
                <div class="datatime">
                    <span href=""  class="sort">即时排序</span>
                    <a href=""  class="data_time">24小时</a>
                    <a href=""  class="data_time">3天</a>
                </div>
            </div>
            <div class="the_topic clearfix">
                <div class="content_text clearfix top_line">
                    <div class="main_article">
                        <div class="like">
                            <a href="" class="link_into_it">起点中文网小说排行榜提供最新、流士大夫精神多了行、经典、精品原创小说排行电风扇大师傅技术的开发榜,涵盖:玄幻小个好说排行榜,奇幻小说排行榜,武侠小说排行榜,仙侠小说排行榜,都市小说排行榜,历史小说排行榜...</a>
                            <span class="link_url">-www.sohu.com </span>
                            <a href="" class="address">42区</a>
                            <div class="information">017年最新小说排行榜,本行榜每小时自新一次,新时间:2:48:10关于我</div>
                        </div>
                        <div class="access">
                            <div class="read_operation">
                                <div class="thumbs_up"><span class="thumbs_up_icon"></span><a class="thumbs_up_text">10</a></div>
                                <div class="comment"><span class="comment_icon"></span><a class="comment_text">5</a></div>
                                <div class="collection"><span class="collection_icon"></span><a class="collection_text">私藏</a></div>
                            </div>
                            <div class="publisher">
                                <img src="555.png" alt="" class="publisher_image">
                                <a href="" class="nickname">18岁奋斗小青年</a>
                                <a href="" class="time">1小时26分钟前</a>
                                <span class="classification">如热榜</span>
                            </div>
                            <div class="share_bar hide">
                                <span class="share_it">分享到</span>
                                <a class="sina_wiebo"></a>
                                <a class="watercress"></a>
                                <a class="QQ_space"></a>
                                <a class="everyone_network"></a>
                            </div>
                        </div>
                    </div>
                    <div class="image">
                        <img src="333.png" alt="" class="picture_settings">
                    </div>
                </div>
                <div class="content_text clearfix">
                    <div class="main_article">
                        <div class="like">
                            <a href="" class="link_into_it">起点中文网小说排行榜提供最新、流行、经典、精品原创小发嘎的说排行榜,涵盖:三个玄幻小说排行噶榜,奇幻小说排行榜,武侠小说排行榜,仙侠小说排行榜,都市小说排行榜,历史小说排行榜...</a>
                            <span class="link_url">-www.sohu.com </span>
                            <a href="" class="address">42区</a>
                            <div class="information">017年最新小说排行榜,本小付款的啦苟富贵说排行榜每小给大家发点时自动刷新一次,最新更新时间:2017-10-29 22:48:10关于我</div>
                        </div>
                        <div class="access">
                            <div class="read_operation">
                                <div class="thumbs_up"><span class="thumbs_up_icon"></span><a class="thumbs_up_text">10</a></div>
                                <div class="comment"><span class="comment_icon"></span><a class="comment_text">5</a></div>
                                <div class="collection"><span class="collection_icon"></span><a class="collection_text">私藏</a></div>
                            </div>
                            <div class="publisher">
                                <img src="555.png" alt="" class="publisher_image">
                                <a href="" class="nickname">18岁奋斗小青年</a>
                                <a href="" class="time">1小时26分钟前</a>
                                <span class="classification">如热榜</span>
                            </div>
                            <div class="share_bar hide">
                                <span class="share_it">分享到</span>
                                <a class="sina_wiebo"></a>
                                <a class="watercress"></a>
                                <a class="QQ_space"></a>
                                <a class="everyone_network"></a>
                            </div>
                        </div>
                    </div>
                    <div class="image">
                        <img src="8888.png" alt="" class="picture_settings">
                    </div>
                </div>
                <div class="content_text clearfix">
                    <div class="main_article">
                        <div class="like">
                            <a href="" class="link_into_it">起点中文网小说排行榜榜,武侠小说排行榜,仙侠小说排行榜,都市小排行榜...</a>
                            <span class="link_url">-www.sohu.com </span>
                            <a href="" class="address">42区</a>
                            <div class="information">017年最新小说排行榜,本小说排行榜每小时自动刷新一次,最新卡的更新时间:2017-10-29 22:48:10关于我</div>
                        </div>
                        <div class="access">
                            <div class="read_operation">
                                <div class="thumbs_up"><span class="thumbs_up_icon"></span><a class="thumbs_up_text">10</a></div>
                                <div class="comment"><span class="comment_icon"></span><a class="comment_text">5</a></div>
                                <div class="collection"><span class="collection_icon"></span><a class="collection_text">私藏</a></div>
                            </div>
                            <div class="publisher">
                                <img src="555.png" alt="" class="publisher_image">
                                <a href="" class="nickname">18岁奋斗小青年</a>
                                <a href="" class="time">1小时26分钟前</a>
                                <span class="classification">如热榜</span>
                            </div>
                            <div class="share_bar hide">
                                <span class="share_it">分享到</span>
                                <a class="sina_wiebo"></a>
                                <a class="watercress"></a>
                                <a class="QQ_space"></a>
                                <a class="everyone_network"></a>
                            </div>
                        </div>
                    </div>
                    <div class="image">
                        <img src="999.png" alt="" class="picture_settings">
                    </div>
                </div>
                <div class="content_text clearfix">
                    <div class="main_article">
                        <div class="like">
                            <a href="" class="link_into_it">起点中文网小说排行榜提供就发卡号创小说排行榜,涵盖:玄幻小说排行榜,奇幻小说排哦上帝啊v啥行榜,武侠小说排行榜,仙侠小说排行榜,都市小说排行榜,历史小说排行榜...</a>
                            <span class="link_url">-www.sohu.com </span>
                            <a href="" class="address">42区</a>
                            <div class="information">017年最新小说排行榜,本小说排行榜每小时自动刷 法国发过囧啊本急啊快过年新一次,最新更新时间:2017-10-29 22:48:10关于我</div>
                        </div>
                        <div class="access">
                            <div class="read_operation">
                                <div class="thumbs_up"><span class="thumbs_up_icon"></span><a class="thumbs_up_text">10</a></div>
                                <div class="comment"><span class="comment_icon"></span><a class="comment_text">5</a></div>
                                <div class="collection"><span class="collection_icon"></span><a class="collection_text">私藏</a></div>
                            </div>
                            <div class="publisher">
                                <img src="555.png" alt="" class="publisher_image">
                                <a href="" class="nickname">18岁奋斗小青年</a>
                                <a href="" class="time">1小时26分钟前</a>
                                <span class="classification">如热榜</span>
                            </div>
                            <div class="share_bar hide">
                                <span class="share_it">分享到</span>
                                <a class="sina_wiebo"></a>
                                <a class="watercress"></a>
                                <a class="QQ_space"></a>
                                <a class="everyone_network"></a>
                            </div>
                        </div>
                    </div>
                    <div class="image">
                        <img src="1111.png" alt="" class="picture_settings">
                    </div>
                </div>
                <div class="content_text clearfix">
                    <div class="main_article">
                        <div class="like">
                            <a href="" class="link_into_it">起点中文网小说排行榜提供最新、流行、经典、啊关键啊关键阿房宫卡开发噶啊甘咯噶发噶快了嘎咯啊:玄幻小说噶发昊哥啊甘咯哈排行榜,奇幻小说排行榜,武侠小说排行榜,仙侠小说排行榜,都市小说排行榜,历史小说排行榜...</a>
                            <span class="link_url">-www.sohu.com </span>
                            <a href="" class="address">42区</a>
                            <div class="information">017年最新小说排行榜,本小说排行榜每小时自动刷新一次,最新更新时间啊傻瓜阿嘎啊开噶苏姑娘金卡啊立刻给卡号了发噶:2017-10-29 22:48:10关于我</div>
                        </div>
                        <div class="access">
                            <div class="read_operation">
                                <div class="thumbs_up"><span class="thumbs_up_icon"></span><a class="thumbs_up_text">10</a></div>
                                <div class="comment"><span class="comment_icon"></span><a class="comment_text">5</a></div>
                                <div class="collection"><span class="collection_icon"></span><a class="collection_text">私藏</a></div>
                            </div>
                            <div class="publisher">
                                <img src="555.png" alt="" class="publisher_image">
                                <a href="" class="nickname">18岁奋斗小青年</a>
                                <a href="" class="time">1小时26分钟前</a>
                                <span class="classification">如热榜</span>
                            </div>
                            <div class="share_bar hide">
                                <span class="share_it">分享到</span>
                                <a class="sina_wiebo"></a>
                                <a class="watercress"></a>
                                <a class="QQ_space"></a>
                                <a class="everyone_network"></a>
                            </div>
                        </div>
                    </div>
                    <div class="image">
                        <img src="2222.png" alt="" class="picture_settings">
                    </div>
                </div>
                <div class="content_text clearfix">
                    <div class="main_article">
                        <div class="like">
                            <a href="" class="link_into_it">起点中文网小说排行榜,都市小说排vnf个个个微软微软无关个人口味了个w/g微软我额外我我我说排行榜...</a>
                            <span class="link_url">-www.sohu.com </span>
                            <a href="" class="address">42区</a>
                            <div class="information">市小说排vnf个个个微软微软无关个市小说排vnf个个个微软微软无关个人口味了个w/g微软我人口味了个w/g微软我</div>
                        </div>
                        <div class="access">
                            <div class="read_operation">
                                <div class="thumbs_up"><span class="thumbs_up_icon"></span><a class="thumbs_up_text">10</a></div>
                                <div class="comment"><span class="comment_icon"></span><a class="comment_text">5</a></div>
                                <div class="collection"><span class="collection_icon"></span><a class="collection_text">私藏</a></div>
                            </div>
                            <div class="publisher">
                                <img src="555.png" alt="" class="publisher_image">
                                <a href="" class="nickname">18岁奋斗小青年</a>
                                <a href="" class="time">1小时26分钟前</a>
                                <span class="classification">如热榜</span>
                            </div>
                            <div class="share_bar hide">
                                <span class="share_it">分享到</span>
                                <a class="sina_wiebo"></a>
                                <a class="watercress"></a>
                                <a class="QQ_space"></a>
                                <a class="everyone_network"></a>
                            </div>
                        </div>
                    </div>
                    <div class="image">
                        <img src="3333.png" alt="" class="picture_settings">
                    </div>
                </div>
                <div class="content_text clearfix">
                    <div class="main_article">
                        <div class="like">
                            <a href="" class="link_into_it">起点中文网小说排行榜提供最新、流行、经典、精品原创小发嘎的说排行榜,涵盖:三个玄幻小说排行噶榜,奇幻小说排行榜,武侠小说排行榜,仙侠小说排行榜,都市小说排行榜,历史小说排行榜...</a>
                            <span class="link_url">-www.sohu.com </span>
                            <a href="" class="address">42区</a>
                            <div class="information">017年最新小说排行榜,本小付款的啦苟富贵说排行榜每小给大家发点时自动刷新一次,最新更新时间:2017-10-29 22:48:10关于我</div>
                        </div>
                        <div class="access">
                            <div class="read_operation">
                                <div class="thumbs_up"><span class="thumbs_up_icon"></span><a class="thumbs_up_text">10</a></div>
                                <div class="comment"><span class="comment_icon"></span><a class="comment_text">5</a></div>
                                <div class="collection"><span class="collection_icon"></span><a class="collection_text">私藏</a></div>
                            </div>
                            <div class="publisher">
                                <img src="555.png" alt="" class="publisher_image">
                                <a href="" class="nickname">18岁奋斗小青年</a>
                                <a href="" class="time">1小时26分钟前</a>
                                <span class="classification">如热榜</span>
                            </div>
                            <div class="share_bar hide">
                                <span class="share_it">分享到</span>
                                <a class="sina_wiebo"></a>
                                <a class="watercress"></a>
                                <a class="QQ_space"></a>
                                <a class="everyone_network"></a>
                            </div>
                        </div>
                    </div>
                    <div class="image">
                        <img src="4444.png" alt="" class="picture_settings">
                    </div>
                </div>
                <div class="content_text clearfix">
                    <div class="main_article">
                        <div class="like">
                            <a href="" class="link_into_it">起点中文网小说排行榜榜,武侠小说排行榜,仙侠小说排行榜,都市小排行榜...</a>
                            <span class="link_url">-www.sohu.com </span>
                            <a href="" class="address">42区</a>
                            <div class="information">017年最新小说排行榜,本小说排行榜每小时自动刷新一次,最新卡的更新时间:2017-10-29 22:48:10关于我</div>
                        </div>
                        <div class="access">
                            <div class="read_operation">
                                <div class="thumbs_up"><span class="thumbs_up_icon"></span><a class="thumbs_up_text">10</a></div>
                                <div class="comment"><span class="comment_icon"></span><a class="comment_text">5</a></div>
                                <div class="collection"><span class="collection_icon"></span><a class="collection_text">私藏</a></div>
                            </div>
                            <div class="publisher">
                                <img src="555.png" alt="" class="publisher_image">
                                <a href="" class="nickname">18岁奋斗小青年</a>
                                <a href="" class="time">1小时26分钟前</a>
                                <span class="classification">如热榜</span>
                            </div>
                            <div class="share_bar hide">
                                <span class="share_it">分享到</span>
                                <a class="sina_wiebo"></a>
                                <a class="watercress"></a>
                                <a class="QQ_space"></a>
                                <a class="everyone_network"></a>
                            </div>
                        </div>
                    </div>
                    <div class="image">
                        <img src="5555.png" alt="" class="picture_settings">
                    </div>
                </div>
                <div class="content_text clearfix">
                    <div class="main_article">
                        <div class="like">
                            <a href="" class="link_into_it">起点中文网小说排行榜提供就发卡号创小说排行榜,涵盖:玄幻小说排行榜,奇幻小说排哦上帝啊v啥行榜,武侠小说排行榜,仙侠小说排行榜,都市小说排行榜,历史小说排行榜...</a>
                            <span class="link_url">-www.sohu.com </span>
                            <a href="" class="address">42区</a>
                            <div class="information">017年最新小说排行榜,本小说排行榜每小时自动刷 法国发过囧啊本急啊快过年新一次,最新更新时间:2017-10-29 22:48:10关于我</div>
                        </div>
                        <div class="access">
                            <div class="read_operation">
                                <div class="thumbs_up"><span class="thumbs_up_icon"></span><a class="thumbs_up_text">10</a></div>
                                <div class="comment"><span class="comment_icon"></span><a class="comment_text">5</a></div>
                                <div class="collection"><span class="collection_icon"></span><a class="collection_text">私藏</a></div>
                            </div>
                            <div class="publisher">
                                <img src="555.png" alt="" class="publisher_image">
                                <a href="" class="nickname">18岁奋斗小青年</a>
                                <a href="" class="time">1小时26分钟前</a>
                                <span class="classification">如热榜</span>
                            </div>
                            <div class="share_bar hide">
                                <span class="share_it">分享到</span>
                                <a class="sina_wiebo"></a>
                                <a class="watercress"></a>
                                <a class="QQ_space"></a>
                                <a class="everyone_network"></a>
                            </div>
                        </div>
                    </div>
                    <div class="image">
                        <img src="7777.png" alt="" class="picture_settings">
                    </div>
                </div>
                <div class="content_text clearfix">
                    <div class="main_article">
                        <div class="like">
                            <a href="" class="link_into_it">起点中文网小说排行榜提供最新、流行、经典、啊关键啊关键阿房宫卡开发噶啊甘咯噶发噶快了嘎咯啊:玄幻小说噶发昊哥啊甘咯哈排行榜,奇幻小说排行榜,武侠小说排行榜,仙侠小说排行榜,都市小说排行榜,历史小说排行榜...</a>
                            <span class="link_url">-www.sohu.com </span>
                            <a href="" class="address">42区</a>
                            <div class="information">017年最新小说排行榜,本小说排行榜每小时自动刷新一次,最新更新时间啊傻瓜阿嘎啊开噶苏姑娘金卡啊立刻给卡号了发噶:2017-10-29 22:48:10关于我</div>
                        </div>
                        <div class="access">
                            <div class="read_operation">
                                <div class="thumbs_up"><span class="thumbs_up_icon"></span><a class="thumbs_up_text">10</a></div>
                                <div class="comment"><span class="comment_icon"></span><a class="comment_text">5</a></div>
                                <div class="collection"><span class="collection_icon"></span><a class="collection_text">私藏</a></div>
                            </div>
                            <div class="publisher">
                                <img src="555.png" alt="" class="publisher_image">
                                <a href="" class="nickname">18岁奋斗小青年</a>
                                <a href="" class="time">1小时26分钟前</a>
                                <span class="classification">如热榜</span>
                            </div>
                            <div class="share_bar hide">
                                <span class="share_it">分享到</span>
                                <a class="sina_wiebo"></a>
                                <a class="watercress"></a>
                                <a class="QQ_space"></a>
                                <a class="everyone_network"></a>
                            </div>
                        </div>
                    </div>
                    <div class="image">
                        <img src="6666.png" alt="" class="picture_settings">
                    </div>
                </div>
            </div>
            <div class="flip_pages">
                <ul class="">
                    <li class="left">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                    <li>下一页</li>
                </ul>
            </div>
        </div>
        <div class="content_negative clearfix">
            <img src="777.png" alt="" class="image_display">
            <em class="subtitle">24小时</em>
            <em class="subtitle">全部</em>
            <span class="leaderboards">TOP 10</span>
            <div class="the_hottest clearfix">
                <a href="" class="hottest_list">最热榜</a>
                <em class="sharp_corners"></em>
            </div>
            <div class="with_content clearfix">
                <div class="number"><a>602</a></div>
                <div class="negative_text"><a href="">过「AA学车」报名学驾驶,考无名者,参加我们的“免费学车“拉票活动,也文章关键词: 用车自媒体驾... 百</a></div>
            </div>
            <div class="with_content clearfix">
                <div class="number"><a>602</a></div>
                <div class="negative_text"><a href="">过「AA学车」报名学驾AA学车」平台报名者,参加我们的“免费机会免费领取～ 文章关键词驾... 百</a></div>
            </div>
            <div class="with_content clearfix">
                <div class="number"><a>602</a></div>
                <div class="negative_text"><a href="">过「AA学车」报名学驾驶,学员可免费申领“驾考无忧险”。非学车“拉票活动,也有机会键词: 用车自媒体驾... 百</a></div>
            </div>
            <div class="with_content clearfix">
                <div class="number"><a>602</a></div>
                <div class="negative_text"><a href="">过「AA学车」报名学驾驶,学员可免费申领“驾考无忧险”。非学车“拉票活动,也有机会键词: 用车自媒体驾... 百</a></div>
            </div>
            <div class="with_content clearfix">
                <div class="number"><a>602</a></div>
                <div class="negative_text"><a href="">过「AA学车」报名学驾驶,学员可免费申领“驾考无忧险”。非「AA学者,参加我们的“免费学车“拉票活动,也有机会免费领取～ 文章关键词: 用车自媒体驾... 百</a></div>
            </div>
            <div class="with_content clearfix">
                <div class="number"><a>602</a></div>
                <div class="negative_text"><a href="">过「AA学车」报名学驾驶,学员可免费申领“免费学车“拉票活动,也有机会免费领取～用车自媒体驾... 百</a></div>
            </div>
            <div class="with_content clearfix">
                <div class="number"><a>602</a></div>
                <div class="negative_text"><a href="">过「AA学车」报名学驾驶,学员可免」平台报名者,参加我们的“免费学车“拉票取～ 文章车自媒体驾... 百</a></div>
            </div>
            <div><img src="888.png" alt="" class="image_displaypro"></div>
        </div>
    </div>
    <div class="data">
        <div class="top_lines">关于我们|联系我们|服务条款|隐私政策|抽屉新热榜工具|下载客户端|意见与反馈|友情链接|公告 </div>
        <div> 违法和不良信息举报： 电话：010-58302039 邮箱：jubao@chouti.com </div>
        <div class="bottom">版权所有：北京格致璞科技有限公司</div>
    </div>
</div>
</body>
</html>

View Code

查看全文

相关阅读:
行内块块级元素行内元素
 3种飞翼布局
 emmit
Linux基础命令
 关于微信小程序下拉出现三个小点
 关于vue，angularjs1,react之间的对比
 微信小程序开发遇见的问题之一
 关于微信小程序的尺寸关系
 关于微信小程序的开发步骤
 关于前端基础知识的一些总结

原文地址：https://www.cnblogs.com/fangjie0410/p/7795370.html