有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了。
下面有一段实例大家可以参考一下;
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>
效果如下图所示:
途中所有的关系线全部都是有伪类写的,大家如果有什么不懂得随时可以评论下方,请赐教。