星空网 > 软件开发 > 网页设计

css3伪类使用方法实例

 有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了。

下面有一段实例大家可以参考一下;

 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伪类使用方法实例

途中所有的关系线全部都是有伪类写的,大家如果有什么不懂得随时可以评论下方,请赐教。




原标题:css3伪类使用方法实例

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流