Web前端：CSS

CSS概述：层叠样式表

是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS的四种引入方式：

行内式

<!--第一种引入放式：行内式-->
特点：在<body></body>中使用

<div style="color: red;background-color: gainsboro">hello world</div>

嵌入式

<!--第二种引入方式：嵌入式-->
特点：在<head></head>中使用

<style> p{color: rebeccapurple; font-size: 40px; } 
        a{ /*取消链接名称的下划线*/ text-decoration: none; }

</style>

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

<!--    第二种引入方式-->
<!--    <style>-->
<!--        p{color: rebeccapurple;-->
<!--            font-size: 40px;-->
<!--        }-->
<!--        a{  /*取消链接名称的下划线*/-->
<!--            text-decoration: none;-->
<!--        }-->
<!--    </style>-->

</head>
<body>

    <div>hello div</div>
    <p>hello p</p>
    <a href="">点我</a>

</body>
</html>

嵌入式

链接式

<!--    第三种引入方式:链接式-->

特点：按照html的语法规范进行引入；
     引入数量无限制；
     先准备好CSS，再加载HTML，页面内容及装饰一并出现。

<!--    <link href="test.css" rel="stylesheet">-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    第三种引入方式:链接式；按照html的语法规范进行引入；引入数量无限制；先准备好CSS，再加载HTML-->
<!--    <link href="test.css" rel="stylesheet">-->
</head>
<body>
<div>hello div</div>
    <p>hello p</p>
    <a href="">点我</a>


</body>
</html>

链接式的HTML

p{color: gold;
  font-size: 20px;
        }

链接式的CSS

导入式

<!--第四种引入方式：导入式-->
特点：按照CSS的语法规范进行引入；
     引入数量有限制；
     先html，再CSS。网络差时，可能出现只有文字数据，修饰的图片加载不出来的情况等，影响阅读

<!--    <style>-->
<!--        @import "test.css";-->
<!--    </style>-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--第四种引入方式：导入式；按照CSS的语法规范进行引入；引入数量有限制；先html，再CSS-->
<!--    <style>-->
<!--        @import "test.css";-->
<!--    </style>-->
</head>
<body>
<div>hello div</div>
    <p>hello p</p>
    <a href="">点我</a>


</body>
</html>

导入式HTML

p{color: gold;
  font-size: 20px;
        }

导入式的CSS

CSS的选择器：

基本选择器

/**************************四个基本选择器***************************/
        /*1.通用选择器(*)*/
/*  *选择器对所有的标签都起作用  */
        *{
            color: red;
        }

        /*2.标签选择器*/
    /*匹配所有使用E标签的元素*/
        p{color: yellow}

        /*3.id选择器(#)*/
        #littleP{
            background-color: gainsboro;
        }
        /*4.类选择器(.)*/
        .cuihua{
            color: aquamarine;
        }

组合选择器

/**************************组合选择器***************************/
    /*对单个元素进行操作，标签选择器+类选择器*/

        div.cuihua{color: #553bff}

    /*多元素选择器，对多个元素进行操作,逗号表示并列*/

        #littleP,div.ergou{
            color: orange;
        }

    /*后代元素选择器，每个后代都能找到，标签选择器嵌套时，可用空格定位到需要修饰的元素的位置*/

        .div1 div{color: cornflowerblue}
        .div1 .div2{color: darkgoldenrod}
        .div1 .P{color: aqua}

    /*子代选择器,只在自己的子代中找（孙子辈往后都不找）用大于号表示（>）*/

        .div1>.div2{background-color: black}
        /*.div的子代中没有.P,故修饰不成功*/
        .div1>.P{color:greenyellow}

    /*毗邻选择器，向下修饰一个相邻的元素,没找到则不修饰*/
        .div1+div{
            background-color: green;
        }
        /*下面紧邻的一个不是p标签选择器，则不修饰*/
        .div1+p{background-color: cyan}

属性选择器

/**************************属性选择器***************************/

/*1.[属性名]{修饰}，对相同的属性名进行修饰*/
[alex]{color: red}

/*2.[属性名="属性值"]{修饰}，对特定的属性值进行修饰*/
[alex="dasb"]{color:aqua}

/*3.标签[属性名="属性值"]{修饰},对某个标签下的特定属性值进行修饰*/
div[alex="dasb"]{color:saddlebrown}

/*4.[属性名～="属性值1 属性值2"]{修饰}，对属性名的属性值为属性值1或者属性值2的属性进行修饰*/
[alex~="LI"]{color: pink}

/*5.[属性名^="属性值1"]{修饰}，对以属性名的属性值是属性值1开头的属性进行修饰*/
[alex^="LI"]{color: green}

[alex^="sb"]{color: yellow} /*没有以sb开头的属性值，故此句无修饰的属性*/

/*6.[属性名$="属性值1"]{修饰}，对以属性名的属性值是属性值1结尾的属性进行修饰*/
[alex$="L"]{background-color: #553bff}

/*7.[属性名*="属性值1"]{修饰}，对以属性名对应的属性值中存在属性值1的属性进行修饰*/
[alex*="b"]{color: rebeccapurple}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/**************************四个基本选择器***************************/
        /*1.通用选择器(*)*/
/*  *选择器对所有的标签都起作用  */
        *{
            color: red;
        }

        /*2.标签选择器*/
    /*匹配所有使用E标签的元素*/
        p{color: yellow}

        /*3.id选择器(#)*/
        #littleP{
            background-color: gainsboro;
        }
        /*4.类选择器(.)*/
        .cuihua{
            color: aquamarine;
        }
/**************************组合选择器***************************/
    /*对单个元素进行操作，标签选择器+类选择器*/

        div.cuihua{color: #553bff}

    /*多元素选择器，对多个元素进行操作,逗号表示并列*/

        #littleP,div.ergou{
            color: orange;
        }

    /*后代元素选择器，每个后代都能找到，标签选择器嵌套时，可用空格定位到需要修饰的元素的位置*/

        .div1 div{color: cornflowerblue}
        .div1 .div2{color: darkgoldenrod}
        .div1 .P{color: aqua}

    /*子代选择器,只在自己的子代中找（孙子辈往后都不找）用大于号表示（>）*/

        .div1>.div2{background-color: black}
        /*.div的子代中没有.P,故修饰不成功*/
        .div1>.P{color:greenyellow}

    /*毗邻选择器，向下修饰一个相邻的元素,没找到则不修饰*/
        .div1+div{
            background-color: green;
        }
        /*下面紧邻的一个不是p标签选择器，则不修饰*/
        .div1+p{background-color: cyan}


/**************************属性选择器***************************/

/*1.[属性名]{修饰}，对相同的属性名进行修饰*/
[alex]{color: red}

/*2.[属性名="属性值"]{修饰}，对特定的属性值进行修饰*/
[alex="dasb"]{color:aqua}

/*3.标签[属性名="属性值"]{修饰},对某个标签下的特定属性值进行修饰*/
div[alex="dasb"]{color:saddlebrown}

/*4.[属性名～="属性值1 属性值2"]{修饰}，对属性名的属性值为属性值1或者属性值2的属性进行修饰*/
[alex~="LI"]{color: pink}

/*5.[属性名^="属性值1"]{修饰}，对以属性名的属性值是属性值1开头的属性进行修饰*/
[alex^="LI"]{color: green}

[alex^="sb"]{color: yellow} /*没有以sb开头的属性值，故此句无修饰的属性*/

/*6.[属性名$="属性值1"]{修饰}，对以属性名的属性值是属性值1结尾的属性进行修饰*/
[alex$="L"]{background-color: #553bff}

/*7.[属性名*="属性值1"]{修饰}，对以属性名对应的属性值中存在属性值1的属性进行修饰*/
[alex*="b"]{color: rebeccapurple}


    </style>
</head>
<body>
hello body
<div>div</div>

<p id="littleP">pppp</p>
<p id="littlePP">ppp</p>
<p class="cuihua">pp</p>
<p class="cuihua">p</p>
<div class="cuihua">divdiv</div>
<div class="ergou">divdiv</div>

<a href="">aaa</a>

<div>before div1</div>

<div class="div1">
    <div >
        <!--优先级原因   a标签不被修饰-->
        <a href="">a</a>
        <p class="P">ppp</p>
        <div>div3</div>
    </div>

    <p>p ele</p>

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

<div>after div1</div>
<div>after div1</div>
<p>after div1</p>


<div>hello1</div>
<div alex="sb">hello2</div>
<div alex="dasb">hello3</div>
<p alex="dasb">hello3</p>
<div>hello4</div>

<div alex="sb LI">hello5</div>
</body>
</html>

实例-->上述选择器的使用

伪类选择器

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：
:link 超链接点击之前
:visited 链接被访问过之后
PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
PS：以上三种样式，只能用于超链接。

在css中，这四种状态必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active

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

    <style type="text/css">
        a:link{
            color: red;
        }
        a:visited{
            color: blue;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: yellow;
        }
        .box{
            width: 100px;
        }
        .top,.bottom{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }
        /*鼠标移动到top块时背景颜色变red*/
        /*.top:hover{*/
        /*    background-color: red;*/
        /*}*/
        /*鼠标移动到盒子box上任意位置时，top块颜色变red*/
        .box:hover .top{
            background-color: red;
        }
        /*鼠标移动到top上悬浮时，毗邻的bottom改变背景色*/
        /*.top:hover+.bottom{*/
        /*    background-color: red;*/
        /*}*/

        .add:before{
            content: "帅气的";
            color:gold;
        }
        .add:after{
            content: "欢迎加入前端学习";
            color: red;
        }
    </style>
</head>
<body>
    <a href="CSS的引入方式.html">hello-world</a>
    <div class="box">
        <div class="top"></div>
        <div class="bottom"></div>


    </div>

    <div class="add">爸爸</div>

</body>
</html>

伪类的使用

选择器的寻找及优先级

/******************标签的寻找及优先级******************/

/*1、文内的样式优先级始终高于外部定义*/
/*2、有！important声明的规则高于一切*/
/*3、如果！important声明冲突，则比较优先级*/
/*4、如果优先权一样，则按照出现的顺序决定，后来者居上*/
/*5、由继承得到的样式的优先级低于其他规则*/
/*6、不是所有的样式都可以继承*/


/*内联样式    ===>    1000*/
/*ID         ===>    100*/
/*Class      ===>    10*/
/*普通标签    ===>    1*/

/*有!important优先级高于一切*/

/*优先级：内联>id>类>普通标签*/

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

/*优先级：内联>id>类>普通标签*/
        #id1{
            color: red;
        }

        div{
            color: yellow;
        }

        .div1{
            color: rebeccapurple;
        }
/*嵌套优先级,权值大的优先*/
        #id11 .div33{
            color: #553bff;
        }

        #id11 .div22 .div33{
            color: chartreuse;
        }

        .div33{color: cyan!important;}


        #id11{
            color: red;
        }

    </style>
</head>
<body>
    <div class="div1" id="id1" style="color: pink;">优先级</div>

    <div id="id11">
        hello11
        <div class="div22">
            hello22
            <div class="div33">
                嵌套优先级
            </div>
        </div>
    </div>
</body>
</html>

优先级实例

CSS的背景属性：

对于图片来说，若是图片大于盒子，则多余的部分会隐藏

对于多个盒子来说，若是子盒子大于父盒子，则会元素溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            /*内联标签无法控制大小，块级标签无法出现在同一行*/
            /*此句使得内联标签可以控制大小，块级标签可以出现在同一行*/
            display: inline-block;

            /*确定窗口大小*/
            width: 25px;
            height: 22px;

            /*确定图片*/
            background-image: url("https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/icon-20918e2591.png");

            /*确定使用图片的某个部分作为窗口背景，例如小图标*/
            background-position: 0 -50px;

        }
    </style>
</head>
<body>
    <span></span>
</body>
</html>

小图标

----------->>>>>>>长图中截取一部分作为图标

CSS的文本属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*设置盒子的高度*/
            height: 100px;
            /*设置盒子的背景颜色*/
            background: aquamarine;
            /*设置盒子横向居中对齐*/
            text-align: center;
            /*设置一行的高度*/
            line-height: 100px;
            /*设置首行缩进*/
            text-indent: 150px;
            /*设置字符的间距*/
            letter-spacing: 10px;
            /*设置单词的间距*/
            word-spacing: 100px;
            /*单词首字母大写*/
            text-transform: capitalize;
        }
    </style>
</head>
<body>
<div>
    介绍文本属性
    介绍文本属性
    介绍文本属性
    介绍文本属性
    介绍文本属性
    介绍文本属性
    介绍文本属性
    介绍文本属性
    介绍文本属性
    介绍文本属性
    介绍文本属性
    介绍文本属性
    介绍文本属性
    <p>hello hello hello hello hello hello hello hello hello hello hello hello </p>

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

文本属性的设置实例

CSS的边框属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            /*设置盒子的宽高*/
            width: 200px;
            height: 200px;

            /*设置边框的粗细、虚实线、颜色*/
            /*border-width: 5px;*/
            /*border-style: solid;*/
            /*border-color: blueviolet;*/

            /*简写*/
            border: 5px solid blueviolet;

            /*分方向控制*/
            border-left-color: #E46E26;
            border-left-width: 1px;
        }
    </style>
</head>
<body>
    <div class="div1">

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

边框属性的设置实例

CSS的列表属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ol,ul{
            /*circle:圆圈,square:正方形格子,none:啥都没有，可用于图片纵向排版*/
            list-style: square;
        }
    </style>
</head>
<body>

      <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>

    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

    <dl>
        <dt>第一章</dt>
        <dd>第一节</dd>
        <dd>第二节</dd>
        <dd>第三节</dd>
    </dl>
</body>
</html>

列表属性的设置实例

CSS的display属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1,p,a,span{
            /*块级标签定义宽高*/
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: #553bff;
            /*隐藏该标签*/
            display: none;
        }
        p{
            background: gainsboro;
            /*使块级标签既有自己的定义宽高功能，又有内联标签的同行显示功能，*/
            display: inline-block;
        }
        span{
            background-color: cyan;
            /*使内联标签既有自己的同行显示功能，又有块级标签的定义宽高功能*/
            display: inline-block;
        }
        a{
            background-color: pink;
            display: inline-block;
        }
        .div2{
            /*设置标签的间隙*/
            word-spacing: -5px;
        }
    </style>
</head>
<body>
    <div class="div1">divvvvvvvv</div>
    <p>ppppppppp</p>
    <div class="div2">
        <span>spannnnnnnn</span>
        <a href="#">click</a>
    </div>

</body>
</html>

display属性的设置实例

CSS的内外边距：

边界塌陷（边界重叠）：只发生在上下外边距

兄弟级div：
上面的div的margin-bottom（例如：20px）和下面的div的margin-top（例如：40px）会塌陷，
也就是取上下两者margin里的最大值（40px）

父子级div：
    if 父级div中没有border，padding，文本内容属性时，子级的div的margin会一直向上找，
直到找到某个标签包括border，padding，文本内容中的其中一个时，再以此标签为参照进行margin

边界结合：只发生在左右外边距
左边的div的margin-right（例如：20px）和右边的div的margin-left（例如：40px）会结合，
也就是60px

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

        .div1{
            width: 200px;
            height: 200px;
            background-color: gainsboro;
            border: 40px solid red;
            /*内边距,控制内容与边框的距离*/
            padding: 40px;

            /*外边距,用于控制边框与边框的距离*/
            /*margin: 40px;*/

            /*简写 顺时针  上边距 右边距 下边距 左边距*/
            /*margin:     10px  20px  30px  40px;*/

            /*         上    左右   下*/
            /*margin: 10px  20px 30px; */

            /*      上下边距  左右边距*/
            /*margin: 10px    20px; */

            /*上下左右边距*/
            /*margin: 10px*/


            /*下边距*/
            /*margin-bottom: 20px;*/

            margin-top: 20px;

        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: blue;
            border: 20px solid green;
            /*上边距*/
            margin-top: 40px;
        }
        .father{
            background-color: pink;
            height: 1000px;
        }
        .uncle{
            background-color: aqua;
            height: 200px;
            width:200px;
        }
        body{
            /*body也是一个标签，可以定义边框*/
            border: 10px solid aquamarine;
            /*body标签默认跟html标签有外边距，可以自定义取消掉*/
            /*margin: 0px;*/
        }
    </style>
</head>
<body>
    <div class="uncle"></div>

    <div class="father">asd
            <div class="div1">hello div1</div>
            <div class="div2">hello div2</div>
    </div>

</body>
</html>

内外边距的设置实例

CSS的浮动属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
        }
        .div2{
            width: 200px;
            height: 100px;
            background-color: gainsboro;

        }
        .div3{
            width: 100px;
            height: 200px;
            background-color: orange;
            float: left;
        }
        .div4{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>

浮动属性的设置实例

CSS的消除浮动：

clear:清除浮动
clear:none|left|right|both

none:默认值，允许两边有浮动
left:不允许左边有浮动
right:不允许右边有浮动
both:不允许两边有浮动

clear属性只会对自身起作用，不会影响其他元素。
如果一个元素的右侧有以浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right。
则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin:0px;
        }
        .container{
            border: 1px solid aquamarine;
            width: 300px;
            /*height: 100px;*/
        }
        #box1{
            background-color: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        #box2{
            background-color: deeppink;
            width: 100px;
            height: 100px;
            float: right;
        }
        #box3{
            background-color: pink;
            height:40px;
        }

        /*用于清除浮动*/
        .clearfix:after{
            content: "";
            display: block;
            clear:both
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div id="box1">box1向左浮动</div>
        <div id="box2">box2向右浮动</div>
<!--        <div style="clear: both"></div>-->


    </div>
    <div id="box3">box3</div>
</body>
</html>

消除浮动的实例

CSS的定位属性：

position定位属性:static | relative | absolute | fixed

static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative(未脱离文档流，正常位置仍在):生成相对定位的元素，相对于其文本流原始正常位置进行定位。例如，"left:20px" 会使元素相对于原始正常位置向左移动20像素。

absolute(脱离文档流):生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位 (这里的父元素是指定位方式为relative和absolute的父元素）。 如果一直没找到 relative或者absolute定位的第一个父元素，则父元素为body。  绝对定位元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed(脱离文档流):生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

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

        .ddd{
            padding: 50px;
        }
        .div1{
            width: 200px;
            height: 100px;
            background-color: aqua;
            /*默认定位方式为static，即不定位*/

        }
        .div2{
            width: 200px;
            height: 100px;
            background-color: gainsboro;
            /*定位方式为relative，相对原来的位置进行定位*/
            position: relative;
            top: 100px;
            left: 300px;


        }
        .div3{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            top:200px;
            left:700px

        }
        .div4{
            width: 200px;
            height: 200px;
            background-color: pink;

        }
        .outer{
            /*有这句，则绝对定位以父级outer为准，若无则继续往上找，最顶则是以body为准*/
            position: relative;
            border: 1px red solid;
        }
        .body{
            border: 1px black solid;
        }
        .ReturnTop{
            width: 80px;
            height: 50px;
            background-color: gray;
            color: white;
            text-align: center;
            line-height: 50px;
            position: fixed;
            bottom: 10px;
            right: 10px;
        }
        .other{
            background-color: blueviolet;
            height: 2000px;
        }
    </style>
</head>
<body class="body">

<div class="ddd"></div>

<div class="outer">
    <div class="div1">div1-->默认static，不定位</div>
    <div class="div2">div2-->relative，相对于原来的位置进行定位，未脱离文档流</div>
    <div class="div3">div3-->absolute，相对于上一个已定位的父级元素进行定位，已脱离原文档流，</div>
    <div class="div4">div3-->默认static，不定位，由于div3脱离文档流，故div4顶上去</div>
</div>

<div class="ReturnTop">返回顶部</div>
<div class="other"></div>
</body>
</html>

定位属性的实例

未定位

父级未定位，则以body为参照进行定位

父级已定位，以父级的位置为参照进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            border: 1px solid orange;
            height: 300px;
            width: 500px;
            margin:10px ;
        }
        .div2{
            border: 1px solid green;
            margin:10px ;
            height: 90%;

        }
        .div3{
            border: 1px solid blue;
            margin:10px ;
            height: 90%;
            background-color: lightgray;
        }
        .box1,.box3{
            border:1px black solid;
            width: 100px;
            height: 100px;


        }
        .box2{
            border:1px black solid;
            width: 100px;
            height: 100px;
            /*绝对定位-->脱离文档流*/
            position: absolute;
            /*相对原来的位置进行定位*/
            margin-left: 120px;
            margin-top: 20px;
            background-color: lightblue;

        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2">
        <div class="div3">
            <div class="box1">box1</div>
            <div class="box2">box2</div>
            <div class="box3">box3</div>
        </div>
    </div>
</div>

</body>
</html>

补充：margin定位-->脱离文档流的相对定位

原图：未margin定位

已margin定位。

box2脱离文档流，相对于原来的位置进行移位。

由于box2不在文档流中，故box3顶上box2原来的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*去除默认的边距*/
        *{
            margin:0;
            padding: 0;
        }

        /*去除链接的下划线*/
        a{
            text-decoration: none;
        }
        /*设置字体的样式及大小*/
        body{
            font-family: "sans-serif";
            font-size: 12px;
        }

/******************************head头部导航条开始*********************************/

        /*设置顶部的导航条样式*/
        .head-box{
            background-color: #2459a2;
            height: 72px;
            width: 100%;
            /*固定顶部显示*/
            position: fixed;
            top: 0;
            left: 0;
        }

        /*设置顶部导航条的内容盒*/
        .head-content{
            height: 72px;
            width: 80%;
            /*background-color: blueviolet;*/
            line-height: 72px;
            margin: 0 auto;
            position: relative;
        }

/*导航条左边内容*/

        /*设置顶部导航条的内容之logo*/
        .head-content .logo{
            display: inline-block;
            background: url("https://dig.chouti.com/images/logo-c30a1a3941.png");
            width:72px ;
            height: 72px;
            float: left;
            margin-right: 10px;;
        }
        /*设置顶部导航条的内容之"全部"*/
        .head-content .action-menu .active{
            float: left;
            margin-left: 10px;
        }
        /*设置导航条的内容之"全部"、42区、段子、图片、挨踢1024、你问我答*/
        .head-content .action-menu a.tb{
            display: inline-block;
            margin-left: -3px;
            /*border: 1px red solid;*/
            padding: 0 10px;
            color: darkgray;
            float: left;
        }
        /*设置导航条内容鼠标悬停时的样式*/
        .head-content .action-menu a.tb:hover{
            color: white;
            background-color: #396bb3;
        }
        /*设置导航条内容之"全部"，鼠标悬停时的样式*/
        .head-content .action-menu a.active,.head-content .action-menu a.active:hover{
            color: white;
            background-color: #204982;
        }

/*导航条右边 输入搜索框*/
        /*设置搜索框盒子*/
        .key-search{
            float:right;
            margin-top: 10px;
            border: 1px red solid;
        }
        /*设置文本搜索的样式*/
        .key-search .search-txt{
            float: left;
            width: 100px;
            height: 43px;
            padding: 2px 2px 2px 5px ;
        }
        /*设置搜索图标的盒子样式*/
        .key-search a{
            display: inline-block;
            float: right;
            width: 50px;
            height: 50px;
            background-color: #f3f3f3;

        }
        /*设置搜索图标*/
        .key-search a span.ico{
            display: inline-block;
            width: 58px;
            height: 50px;
            background: url("https://dig.chouti.com/images/search-hover-1ad6a5a3fd.png") no-repeat ;
            /*border: 1px red solid;*/
            margin-top: -1px;
            margin-right: 10px;
        }

/*导航条中间--->登陆与注册*/
        /*设计整体的盒子*/
        .action-nav{
            position: absolute;
            right: 200px;
        }

        /*设置a标签的样式*/
        .action-nav a{
            display: inline-block;
            /*line-height: 50px;*/
            color: white;
            margin: 0 5px;
            padding: 0 10px;
        }
        /*设置鼠标悬停时的样式*/
        .action-nav a:hover{
            background-color: #396bb3;
        }
/******************************head头部导航条结束*********************************/


/******************************content部分开始************************************/

/*设置body*/
        .main-content-box{
            background-color: lightgray;
            padding-top: 70px;
        }
/*设置body的盒子内容*/
        .main-content{
            background-color: white;
            margin:0 auto;
            width: 1016px;
            height: auto;!important;
            min-height: 700px;
            overflow: hidden;
        }
/*body中的左边的盒子*/
        .main-content .content-L{
            float: left;
            width: 630px;
            margin-top: 10px;
            margin-left: 5px;
        }
    /*顶部格式*/
        .content-L .top-area{
            border-bottom: 1px solid #b4b4b4;
            height: 40px;
        }
        /*顶部中的一个盒子1(最热、最新、人类发布)向左浮动*/
        .top-area .child-nav{
            float: left;
        }
        /*盒子1的内容格式*/
        .top-area .child-nav a{
            display: inline-block;
            width: 60px;
            height: 26px;
            line-height: 26px;
            color: #369;
            text-align: center;
        }
        /*盒子1中的内容"最热"的设置*/
        .top-area .child-nav .active{
            background: url("images/tip.png") no-repeat 0 -299px;
            color: black;
            font-weight: bolder;
        }

        /*盒子2（即时排序，时间、发布）的设置*/
        .top-area .sort-nav{
            float: left;
            margin-left: 120px;
            margin-top: 7px;
        }
        /*盒子2的内容标签设置*/
        .top-area .sort-nav a{
            display: inline-block;
            text-align: center;
            color: #390;
            margin-left: 10px;
        }
        /*对盒子2的"即时排序"进行设置*/
        .top-area .sort-nav .active{
            color: #b4b4b4;
        }
        /*对盒子2中的"发布"进行设置*/
        .publish-btn{
            float: right;
            display: inline-block;
            width: 136px;
            height: 32px;
            background: #84a42b;
            color: white;
            font-size: 16px;
            text-align: center;
            line-height: 32px;
        }
    /*左边盒子的文本内容*/
        /*设置每行的文本格式*/
        .content-list .item{
            padding-top: 10px ;
            border-bottom: 1px solid #b4b4b4;
        }
        /*文本中的图片向右浮动*/
        .content-list .item .news-pic{
            float: right;
        }
        /*设置文本内容的行高（行间隔）*/
        .content-list .item .news-content .part1{
            line-height: 20px;
        }
        /*鼠标悬停时出现a标签的下划线*/
        .content-list .item .news-content .part1:hover a.show-content{
            text-decoration: underline;
        }
        /*设置文本的底部（分享等）*/
        .content-list .item .news-content .part2{
            padding: 10px 0;
            color: #99aecb;
        }
        /*设置文本底部的图标*/
        .part2 .hand-icon{
            background: url("images/icon_18_118.png") no-repeat 0 0;
            display: inline-block;
            width: 18px;
            height: 18px;
        }

        /*推荐栏的进一步设置*/
        .part2 .icon-recommend{
            background-position: 0 -40px;
        }

        /*鼠标悬停在推荐栏recommend时，icon-recommend的设置*/
        .part2 .recommend:hover .icon-recommend{
            background-position: 0 -20px;
        }

        /*讨论栏的进一步设置*/
        .part2 .icon-discuss{
            background-position: 0 -100px;
        }

        /*鼠标悬停在讨论栏discuss时，icon-discuss的设置*/
        .part2 .discuss:hover .icon-discuss{
            background-position: 0 -80px;
        }

        /*收藏栏的进一步设置*/
        .part2 .icon-collect{
            background-position: 0 -160px;
        }

        /*鼠标悬停在收藏栏时，icon-collect的设置*/
        .part2 .collect:hover .icon-collect{
            background-position: 0 -140px;
        }

        /*设置上述三栏的间隔*/
        .part2 a{
            margin-left: 8px;
        }
        /*设置上述三栏内部内容的间隔*/
        .part2 a b, .part2 span i{
            vertical-align: 4px;
            font-size: 14px;
        }
        /*设置分享栏浮动*/
        .share-site-to{
            float: right;
        }

        /*设置分享栏的图标*/
        .share-site-to .share-icon a{
            display: inline-block;
            background: url("images/share_icon.png") no-repeat 0 0;
            /*设置透明度*/
            opacity: .3;
        }
        /*新浪的分享设置*/
        .share-icon a.icon-sina{
            width: 17px;
            height: 14px;
            background-position: 0 -90px;
        }
        /*豆瓣的分享设置*/
        .share-icon a.icon-douban{
            width: 17px;
            height: 14px;
            background-position: 0 -104px;
        }
        /*QQ空间的分享设置*/
        .share-icon a.icon-qqzone{
            width: 17px;
            height: 14px;
            background-position: 0 -120px;
        }

        /*腾讯的分享设置*/
        .share-icon a.icon-tenxun{
            width: 17px;
            height: 14px;
            background-position: 0 -136px;
        }
        /*人人网的分享设置*/
        .share-icon a.icon-renren{
            width: 17px;
            height: 14px;
            background-position: 0 -151px;
        }
        /*隐藏分享栏*/
        .share-site-to{
            display: none;
        }
        /*鼠标悬停在文本内容时，出现分享栏*/
        .item:hover .share-site-to{
            display: inline-block;
        }
        /*鼠标选题在分享栏的图标上时，改图标变亮*/
        .share-site-to .share-icon a:hover{
            opacity: 1;
        }
    /*左边盒子的页码跳转*/

        /*设置页码横向排列*/
        .page-area ul li{
            display: inline-block;
        }
        /*设置页码的格式*/
        .page-area ul li a{
            display: inline-block;
            color: #369;
            height: 34px;
            line-height: 34px;
            text-align: center;
            width: 34px;
            border: 1px solid #e1e1e1;
            border-radius: 15%;
            margin-left: 5px;
        }
        /*设置"下一页"的格式*/
        .page-area ul li a.page-next{
            width: 80px;
        }
        /*设置鼠标悬停在a标签上的变化*/
        .page-area ul li a:hover{
            color: white;
            background-color: #369;
        }
        /*设置页与页的间距*/
        .page-area{
            margin-left: 30px;
        }


/*右边的盒子*/
        .main-content .content-R{
            float: left;

        }

/*底部的盒子设置*/
        .main-content .footer-box{
            clear:both;
            text-align: center;
        }


    </style>
</head>
<body>
<div class="head-box">
    <div class="head-content">

        <a href="#" class="logo"></a>

        <div class="action-menu">
            <a href="#" class="tb active">全部</a>
            <a href="#" class="tb">42区</a>
            <a href="#" class="tb">段子</a>
            <a href="#" class="tb">图片</a>
            <a href="#" class="tb">挨踢1024</a>
            <a href="#" class="tb">你问我答</a>



        </div>

        <div class="key-search">
            <form action="/" method="post">
                <input type="text" class="search-txt">
                <a href="#" class="i">
                    <span class="ico"></span>
                </a>

            </form>
        </div>

        <div class="action-nav">

            <a href="#" class="register-btn">注册</a>
            <a href="#" class="login-btn">登陆</a>
        </div>

    </div>
</div>

<div class="main-content-box">

    <div class="main-content">

        <div class="content-L">

            <div class="top-area">

                <div class="child-nav">

                    <a href="#" class="hotbtn active">最热</a>
                    <a href="#" class="newbtn">最新</a>
                    <a href="#" class="personbtn">人类发布</a>

                </div>

                <div class="sort-nav">
                    <a href="#" class="sortbtn active">即时排序</a>
                    <a href="#" class="newbtn">24小时</a>
                    <a href="#" class="newbtn">3天</a>
                </div>

                <a href="#" class="publish-btn">
                    <span class="n2">+ &nbsp;&nbsp;发布</span>
                </a>

            </div>

            <div class="content-list">


                  <div class="item">

                            <div class="news-pic">
                                <img src="images/news.jpg" alt="抽屉新热榜">
                            </div>

                            <div class="news-content">
                                <div class="part1">
                                        <a href="#" class="show-content" target="_blank">
                                                @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
                                        次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
                                        一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
                                        了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
                                        </a>

                                        <span class="content-source">-ww4.sinaimg.cn</span>
                                        <a href="#" class="n2">
                                            <span class="content-kind">42区</span>
                                        </a>
                                </div>

                                <div class="part2">


                                        <a href="#" class="recommend" title="推荐">
                                            <span class="hand-icon icon-recommend"></span>
                                            <b>4</b>
                                        </a>


                                        <a href="javascript:;" class="discuss">
                                            <span class="hand-icon icon-discuss"></span>
                                            <b>5</b>
                                        </a>


                                        <a href="javascript:;" class="collect" title="加入私藏">
                                            <span class="hand-icon icon-collect"></span>
                                            <b>私藏</b>
                                        </a>


                                        <a href="#" class="user-a">
                                            <span>
                                                <img src="images/13.png">
                                            </span>
                                            <b>乱太郎</b>
                                        </a>

                                    <span class="left time-into">
                                        <a class="time-a" href="#" target="_blank">
                                            <b>4分钟前</b>
                                        </a>
                                        <i>入热榜</i>
                                    </span>

                                    <span class="share-site-to">
                                        <i>分享到</i>
                                        <span class="share-icon">
                                            <a class="icon-sina" title="分享到新浪微博" href="#"></a>
                                            <a class="icon-douban" title="分享到豆瓣" href="#"></a>
                                            <a class="icon-qqzone" title="分享到QQ空间" href="#"></a>
                                            <a class="icon-tenxun" title="分享到腾讯微博" href="#"></a>
                                            <a class="icon-renren" title="分享到人人网" href="#"></a>

                                        </span>
                                    </span>

                                </div>
                            </div>

                  </div>
                  <div class="item">

                            <div class="news-pic">
                                <img src="images/news.jpg" alt="抽屉新热榜">
                            </div>

                            <div class="news-content">
                                <div class="part1">
                                        <a href="#" class="show-content" target="_blank">
                                                @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
                                        次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
                                        一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
                                        了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
                                        </a>

                                        <span class="content-source">-ww4.sinaimg.cn</span>
                                        <a href="#" class="n2">
                                            <span class="content-kind">42区</span>
                                        </a>
                                </div>

                                <div class="part2">


                                        <a href="#" class="recommend" title="推荐">
                                            <span class="hand-icon icon-recommend"></span>
                                            <b>4</b>
                                        </a>


                                        <a href="javascript:;" class="discuss">
                                            <span class="hand-icon icon-discuss"></span>
                                            <b>5</b>
                                        </a>


                                        <a href="javascript:;" class="collect" title="加入私藏">
                                            <span class="hand-icon icon-collect"></span>
                                            <b>私藏</b>
                                        </a>


                                        <a href="#" class="user-a">
                                            <span>
                                                <img src="images/13.png">
                                            </span>
                                            <b>乱太郎</b>
                                        </a>

                                    <span class="left time-into">
                                        <a class="time-a" href="#" target="_blank">
                                            <b>4分钟前</b>
                                        </a>
                                        <i>入热榜</i>
                                    </span>
                                    <!-- 分享各微博的按钮 -->

                                    <span class="share-site-to">
                                        <i>分享到</i>
                                        <span class="share-icon">
                                            <a class="icon-sina" title="分享到新浪微博" href="#"></a>
                                            <a class="icon-douban" title="分享到豆瓣" href="#"></a>
                                            <a class="icon-qqzone" title="分享到QQ空间" href="#"></a>
                                            <a class="icon-tenxun" title="分享到腾讯微博" href="#"></a>
                                            <a class="icon-renren" title="分享到人人网" href="#"></a>
                                            <a class="share-none"> </a>

                                        </span>
                                    </span>

                                </div>
                            </div>

                  </div>
                  <div class="item">

                            <div class="news-pic">
                                <img src="images/news.jpg" alt="抽屉新热榜">
                            </div>

                            <div class="news-content">
                                <div class="part1">
                                        <a href="#" class="show-content" target="_blank">
                                                @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
                                        次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
                                        一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
                                        了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
                                        </a>

                                        <span class="content-source">-ww4.sinaimg.cn</span>
                                        <a href="#" class="n2">
                                            <span class="content-kind">42区</span>
                                        </a>
                                </div>

                                <div class="part2">


                                        <a href="#" class="recommend" title="推荐">
                                            <span class="hand-icon icon-recommend"></span>
                                            <b>4</b>
                                        </a>


                                        <a href="javascript:;" class="discuss">
                                            <span class="hand-icon icon-discuss"></span>
                                            <b>5</b>
                                        </a>


                                        <a href="javascript:;" class="collect" title="加入私藏">
                                            <span class="hand-icon icon-collect"></span>
                                            <b>私藏</b>
                                        </a>


                                        <a href="#" class="user-a">
                                            <span>
                                                <img src="images/13.png">
                                            </span>
                                            <b>乱太郎</b>
                                        </a>

                                    <span class="left time-into">
                                        <a class="time-a" href="#" target="_blank">
                                            <b>4分钟前</b>
                                        </a>
                                        <i>入热榜</i>
                                    </span>
                                    <!-- 分享各微博的按钮 -->

                                    <span class="share-site-to">
                                        <i>分享到</i>
                                        <span class="share-icon">
                                            <a class="icon-sina" title="分享到新浪微博" href="#"></a>
                                            <a class="icon-douban" title="分享到豆瓣" href="#"></a>
                                            <a class="icon-qqzone" title="分享到QQ空间" href="#"></a>
                                            <a class="icon-tenxun" title="分享到腾讯微博" href="#"></a>
                                            <a class="icon-renren" title="分享到人人网" href="#"></a>
                                            <a class="share-none"> </a>

                                        </span>
                                    </span>

                                </div>
                            </div>

                  </div>
                  <div class="item">

                            <div class="news-pic">
                                <img src="images/news.jpg" alt="抽屉新热榜">
                            </div>

                            <div class="news-content">
                                <div class="part1">
                                        <a href="#" class="show-content" target="_blank">
                                                @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
                                        次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
                                        一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
                                        了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
                                        </a>

                                        <span class="content-source">-ww4.sinaimg.cn</span>
                                        <a href="#" class="n2">
                                            <span class="content-kind">42区</span>
                                        </a>
                                </div>

                                <div class="part2">


                                        <a href="#" class="recommend" title="推荐">
                                            <span class="hand-icon icon-recommend"></span>
                                            <b>4</b>
                                        </a>


                                        <a href="javascript:;" class="discuss">
                                            <span class="hand-icon icon-discuss"></span>
                                            <b>5</b>
                                        </a>


                                        <a href="javascript:;" class="collect" title="加入私藏">
                                            <span class="hand-icon icon-collect"></span>
                                            <b>私藏</b>
                                        </a>


                                        <a href="#" class="user-a">
                                            <span>
                                                <img src="images/13.png">
                                            </span>
                                            <b>乱太郎</b>
                                        </a>

                                    <span class="left time-into">
                                        <a class="time-a" href="#" target="_blank">
                                            <b>4分钟前</b>
                                        </a>
                                        <i>入热榜</i>
                                    </span>
                                    <!-- 分享各微博的按钮 -->

                                    <span class="share-site-to">
                                        <i>分享到</i>
                                        <span class="share-icon">
                                            <a class="icon-sina" title="分享到新浪微博" href="#"></a>
                                            <a class="icon-douban" title="分享到豆瓣" href="#"></a>
                                            <a class="icon-qqzone" title="分享到QQ空间" href="#"></a>
                                            <a class="icon-tenxun" title="分享到腾讯微博" href="#"></a>
                                            <a class="icon-renren" title="分享到人人网" href="#"></a>
                                            <a class="share-none"> </a>

                                        </span>
                                    </span>

                                </div>
                            </div>

                  </div>
                  <div class="item">

                            <div class="news-pic">
                                <img src="images/news.jpg" alt="抽屉新热榜">
                            </div>

                            <div class="news-content">
                                <div class="part1">
                                        <a href="#" class="show-content" target="_blank">
                                                @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
                                        次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
                                        一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
                                        了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
                                        </a>

                                        <span class="content-source">-ww4.sinaimg.cn</span>
                                        <a href="#" class="n2">
                                            <span class="content-kind">42区</span>
                                        </a>
                                </div>

                                <div class="part2">


                                        <a href="#" class="recommend" title="推荐">
                                            <span class="hand-icon icon-recommend"></span>
                                            <b>4</b>
                                        </a>


                                        <a href="javascript:;" class="discuss">
                                            <span class="hand-icon icon-discuss"></span>
                                            <b>5</b>
                                        </a>


                                        <a href="javascript:;" class="collect" title="加入私藏">
                                            <span class="hand-icon icon-collect"></span>
                                            <b>私藏</b>
                                        </a>


                                        <a href="#" class="user-a">
                                            <span>
                                                <img src="images/13.png">
                                            </span>
                                            <b>乱太郎</b>
                                        </a>

                                    <span class="left time-into">
                                        <a class="time-a" href="#" target="_blank">
                                            <b>4分钟前</b>
                                        </a>
                                        <i>入热榜</i>
                                    </span>
                                    <!-- 分享各微博的按钮 -->

                                    <span class="share-site-to">
                                        <i>分享到</i>
                                        <span class="share-icon">
                                            <a class="icon-sina" title="分享到新浪微博" href="#"></a>
                                            <a class="icon-douban" title="分享到豆瓣" href="#"></a>
                                            <a class="icon-qqzone" title="分享到QQ空间" href="#"></a>
                                            <a class="icon-tenxun" title="分享到腾讯微博" href="#"></a>
                                            <a class="icon-renren" title="分享到人人网" href="#"></a>
                                            <a class="share-none"> </a>

                                        </span>
                                    </span>

                                </div>
                            </div>

                  </div>
                  <div class="item">

                            <div class="news-pic">
                                <img src="images/news.jpg" alt="抽屉新热榜">
                            </div>

                            <div class="news-content">
                                <div class="part1">
                                        <a href="#" class="show-content" target="_blank">
                                                @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
                                        次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
                                        一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
                                        了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
                                        </a>

                                        <span class="content-source">-ww4.sinaimg.cn</span>
                                        <a href="#" class="n2">
                                            <span class="content-kind">42区</span>
                                        </a>
                                </div>

                                <div class="part2">


                                        <a href="#" class="recommend" title="推荐">
                                            <span class="hand-icon icon-recommend"></span>
                                            <b>4</b>
                                        </a>


                                        <a href="javascript:;" class="discuss">
                                            <span class="hand-icon icon-discuss"></span>
                                            <b>5</b>
                                        </a>


                                        <a href="javascript:;" class="collect" title="加入私藏">
                                            <span class="hand-icon icon-collect"></span>
                                            <b>私藏</b>
                                        </a>


                                        <a href="#" class="user-a">
                                            <span>
                                                <img src="images/13.png">
                                            </span>
                                            <b>乱太郎</b>
                                        </a>

                                    <span class="left time-into">
                                        <a class="time-a" href="#" target="_blank">
                                            <b>4分钟前</b>
                                        </a>
                                        <i>入热榜</i>
                                    </span>
                                    <!-- 分享各微博的按钮 -->

                                    <span class="share-site-to">
                                        <i>分享到</i>
                                        <span class="share-icon">
                                            <a class="icon-sina" title="分享到新浪微博" href="#"></a>
                                            <a class="icon-douban" title="分享到豆瓣" href="#"></a>
                                            <a class="icon-qqzone" title="分享到QQ空间" href="#"></a>
                                            <a class="icon-tenxun" title="分享到腾讯微博" href="#"></a>
                                            <a class="icon-renren" title="分享到人人网" href="#"></a>
                                            <a class="share-none"> </a>

                                        </span>
                                    </span>

                                </div>
                            </div>

                  </div>

            </div>

            <div class="page-area">
                 <ul>
                     <li><span class="current_page">1</span></li>
                     <li><a href="#" class="page-a">2</a></li>
                     <li><a href="#" class="page-a">3</a></li>
                     <li><a href="#" class="page-a">4</a></li>
                     <li><a href="#" class="page-a">5</a></li>
                     <li><a href="#" class="page-a">6</a></li>
                     <li><a href="#" class="page-a">7</a></li>
                     <li><a href="#" class="page-a">8</a></li>
                     <li><a href="#" class="page-a">9</a></li>
                     <li><a href="#" class="page-a">10</a></li>
                     <li><a href="#" class="page-a page-next">下一页</a></li>
                 </ul>
            </div>

        </div>

        <div class="content-R"></div>

        <div class="footer-box">
        <div class="foot-nav">
            <a href="#" target="_blank">关于我们</a>
            <span>|</span>
            <a href="#" target="_blank">联系我们</a>
            <span>|</span>
            <a href="#" target="_blank">服务条款</a>
            <span>|</span>
            <a href="#" target="_blank">隐私政策</a>
            <span>|</span>
            <a href="#" target="_blank">抽屉新热榜工具</a>
            <span>|</span>
            <a href="#" target="_blank">下载客户端</a>
            <span>|</span>
            <a href="#" target="_blank">意见与反馈</a>
            <span>|</span>
            <a href="#" target="_blank">友情链接</a>
            <span>|</span>
            <a href="#" target="_blank">公告</a>
        <a href="#" style="margin-left:0;vertical-align:-2px;">
            <img src="images/ct_rss.gif" width="36" height="14">
        </a>
        </div>

        <div class="foot-nav2">
            <a target="_blank" href="#">
                <img class="foot_e" src="images/footer1.gif" width="36" height="14">
            </a>
            <span class="foot_d">旗下站点</span>
            <span class="foot_a">©2016chouti.com</span>
            <a target="_blank" href="#" class="foot_b">京ICP备09053974号-3 京公网安备 110102004562</a>
            <div style="margin-top:6px;">版权所有：北京格致璞科技有限公司</div>

        </div>
    </div>

    </div>

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

作业-->抽屉

posted @ 2020-04-18 19:39 麟灬阅读(170) 评论(0) 收藏举报

刷新页面返回顶部