伪类

目前在一般的网页上经常可以看到的利用伪类来制作边框，清除浮动等

1.利用伪类制作特殊边框的css样式：

        .box1 ul li {
            position:relative;
        }
        .sle{
            background:rgba(250,250,250,0.25);
            220px;
            height:220px;
            border:1px dashed #666;
            position:absolute;
            left:0px;
            top:10px;
            display:none;
        }
        .sle:before {
            220px;
            height:200px;
            border-left:1px solid #fff;
            border-right:1px solid #fff;
            content:'';
            position:absolute;
            left:-1px;
            top:10px;}
            .sle:after {
            200px;
            height:220px;
            border-top:1px solid #fff;
            border-bottom:1px solid #fff;
            content:'';
            position:absolute;
            top:-1px;
            left:10px;
        }
        .box1 ul li:hover .sle {
            display:block;
        }        

利用伪类制作特殊边框的html样式：

<div class="box1">
    <ul>
        <li>
            <img src="images/123.jpg" />
            <p class="sle"></p>
        </li>
    </ul>

　还有一种就是在电商里经常看到的

.box{
            margin:100px auto;
             400px;
            height: 400px;
            background: red;
        }
        ul{
            list-style: none;

        }
        ul li{
            200px;
            height: 100px;
            background: blueviolet;
            float: left;
            position: relative;
            line-height: 100px;
            text-align: center;
        }
        li:before{
            content: "";
            height: 1px;
             180px;
            display: block;
            background: blue;
            position: absolute;
            left: 10px;
        }
        li:after{
            content: "";
            height: 80px;
             1px;
            display: block;
            background: yellow;
            position: absolute;
            right: 0;
            top:10px;
        }

其html样式为：

<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

2.利用伪类来清除浮动，这是大家经常写页面会遇到的问题

利用伪类清除浮动的css样式为：

 .clearfix:after {
            content:".";
            display:block;
            height:0;
            clear:both;
            visibility:hidden;
        }
        /*伪类让ie6有效果激发ie6的hasLayout*/
        .clearfix{
            zoom: 1;
        }
        .left{
            float:left;
        }

利用伪类清除浮动的html样式为：

<div class="clearfix">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

伪类的用处是有很多的，熟悉的掌握对写页面是很有好处的！