伪类
目前在一般的网页上经常可以看到的利用伪类来制作边框，清除浮动等
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>
伪类的用处是有很多的，熟悉的掌握对写页面是很有好处的！
