有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了。
下面有一段实例大家可以参考一下;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style type="text/css"> 8 .box{ 9 width: 800px;10 height: 800px;11 margin: 0 auto;12 }13 p{14 line-height: 1.5;15 }16 *{17 margin: 0;padding: 0;18 }19 .clearfix{20 clear: both;21 }22 .left,.content,.right{23 width: 200px;float: left;position:relative;24 }25 .content{26 margin:80px 50px;27 }28 .left::after{29 content:"";width:1px;height: 160px;position:absolute;top:50px;right:0px;background:deeppink;30 }31 .right::before{32 content:"";width:1px;height: 160px;position:absolute;top:50px;left:-50px;background:deeppink;33 }34 .left-one,.content-one,.right-one{35 width: 150px;height: 60px;border: 1px solid #0000C6;margin: 20px 0;position:relative;36 }37 38 .left-one::after{39 content:"";width:50px;height: 1px;position:absolute;top:30px;right:-50px;background:deeppink;40 }41 42 .content-one::before{43 content:"";width:50px;height: 1px;position:absolute;top:30px;left:-50px;background:deeppink;44 }45 .content-one::after{46 content:"";width:50px;height: 1px;position:absolute;top:30px;right:-50px;background:deeppink;47 }48 49 .right-one::before{50 content:"";width:50px;height: 1px;position:absolute;top:30px;left:-50px;background:deeppink;51 }52 53 54 </style>55 <body>56 <div class="box">57 <div class="left">58 <div class="left-one">59 <p>大风来袭不再怕</p>60 <p>大风来袭不再怕</p>61 </div>62 <div class="left-one">63 <p>大风来袭不再怕</p>64 <p>大风来袭不再怕</p>65 </div>66 <div class="left-one">67 <p>大风来袭不再怕</p>68 <p>大风来袭不再怕</p>69 </div>70 </div>71 <div class="content">72 <div class="content-one">73 <p>大风来袭不再怕</p>74 <p>大风来袭不再怕</p>75 </div>76 </div>77 <div class="right">78 <div class="right-one">79 <p>大风来袭不再怕</p>80 <p>大风来袭不再怕</p>81 </div>82 <div class="right-one">83 <p>大风来袭不再怕</p>84 <p>大风来袭不再怕</p>85 </div>86 <div class="right-one">87 <p>大风来袭不再怕</p>88 <p>大风来袭不再怕</p>89 </div>90 </div>91 <div class="clearfix"></div>92 </div>93 </body>94 </html>
效果如下图所示:
途中所有的关系线全部都是有伪类写的,大家如果有什么不懂得随时可以评论下方,请赐教。
原标题:css3伪类使用方法实例
关键词:CSS