伪类布局小技巧

布局样式:中间固定宽度，两边自适应；

下面是小布局：

<div class="box">
    <div class="div1">
        <img src="logo.png" alt="">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>

CSS样式：

.box{
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        overflow: hidden;
    }
    .div1{
        margin: 0 auto;
        width:875px;
        height: 75px;
    }
    .div1 img{
        height: 75px;
        float: left;
    }
    ul{
        width: 800px;
        height: 75px;
        overflow: hidden;
        float: left;
    }
    ul li{
        width: 200px;
        height: 75px;
        float: left;
        background-color: blue;
    }
    .div1::before{
        content: '';
        width: 100%;
        height: 75px;
        margin-left: -100%;
        background: red;
        display: block;
        float: left;
    }
    .div1::after{
        content: '';
        width: 100%;
        height: 75px;
        margin-right: -100%;
        background: red;
        display: block;
        float: left;
    }

###伪类的五个种类：

/div1内容或标签之前的伪类样式/

  .div1::before{
content: '我是before';
width: 50px;
height: 50px;
border-radius: 50%;
display: block;
background-color: blue;
color: white;
}

/div1之后的伪类样式/

.div1::after{
content: '我是after';
width: 50px;
height: 50px;
border-radius: 50%;
display: block;
background-color: blue;
color: white;
}

/第一行内容样式改变/

.div1::first-line{
content: '';
display: block;
/*background-color: blue;*/
color: blue;
}

/第一个字符样式发生改变/

.div1::first-letter{
content: '';
display: block;
background-color: blue;
color: pink;
}

/选择的部分样式发生改变/

::selection{
background: yellow;
color: purple;
};