CSS3伪类使用方法实例

2018-06-24 01:41:00来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

 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>

效果如下图所示:

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:margin属性的正负值确定

下一篇:媒体查询,screen and 和only screen and有什么不同