CSS3伪类使用方法实例

最新推荐文章于 2024-04-29 13:25:46 发布

转载最新推荐文章于 2024-04-29 13:25:46 发布 · 190 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=h1ca11hcb&title=CSS3%E4%BC%AA%E7%B1%BB%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E5%AE%9E%E4%BE%8B

文章标签：

#伪类 #css3 #css #HTML

前端专栏收录该内容

493 篇文章

订阅专栏

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

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

 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>