伪类

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

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

 1         .box1 ul li {
 2             position:relative;
 3         }
 4         .sle{
 5             background:rgba(250,250,250,0.25);
 6             width:220px;
 7             height:220px;
 8             border:1px dashed #666;
 9             position:absolute;
10             left:0px;
11             top:10px;
12             display:none;
13         }
14         .sle:before {
15             width:220px;
16             height:200px;
17             border-left:1px solid #fff;
18             border-right:1px solid #fff;
19             content:'';
20             position:absolute;
21             left:-1px;
22             top:10px;}
23             .sle:after {
24             width:200px;
25             height:220px;
26             border-top:1px solid #fff;
27             border-bottom:1px solid #fff;
28             content:'';
29             position:absolute;
30             top:-1px;
31             left:10px;
32         }
33         .box1 ul li:hover .sle {
34             display:block;
35         }

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

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

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

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

        }
        ul li{
            width:200px;
            height: 100px;
            background: blueviolet;
            float: left;
            position: relative;
            line-height: 100px;
            text-align: center;
        }
        li:before{
            content: "";
            height: 1px;
            width: 180px;
            display: block;
            background: blue;
            position: absolute;
            left: 10px;
        }
        li:after{
            content: "";
            height: 80px;
            width: 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>

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

posted @ 2017-04-29 17:47 火星黑洞阅读(290) 评论(0) 收藏举报

刷新页面返回顶部