1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>test页面</title>
6 <style type="text/css">
7 /*关于css3 的两个伪类 ::before ::after*/
8 .box{
9 margin: 0 auto;
10 width: 360px;
11 height: 500px;
12 }
13 /*头部*/
14 .box_head{
15 margin: 0px auto;
16 width: 260px;
17 height: 140px;
18 background-color: greenyellow;
19 border-radius: 130px 130px 0 0;
20 }
21 .box_head::before{
22 content:‘‘;
23 display: block;
24 width: 26px;
25 height: 26px;
26 border-radius: 13px;
27 background-color: white;
28 transform: translate(170px,58px);
29 }
30 .box_head::after{
31 content:‘‘;
32 display: block;
33 width: 26px;
34 height: 26px;
35 border-radius: 13px;
36 background-color: white;
37 transform:translate(65px,33px);
38 }
39 /*中间*/
40 .box_conten{
41 margin: 0px auto;
42 margin-top:10px;
43 width: 260px;
44 height: 240px;
45 background-color: greenyellow;
46 border-radius: 0 0 30px 30px;
47 }
48 .box_conten::before{
49 content:‘‘;
50 display: block;
51 width: 50px;
52 height: 180px;
53 border-radius: 12px;
54 background-color: greenyellow;
55 transform: translate(-70px,20px);
56 }
57 .box_conten::after{
58 content:‘‘;
59 display: block;
60 width: 50px;
61 height: 180px;
62 border-radius: 12px;
63 background-color:greenyellow;
64 transform:translate(280px,-162px);
65 }
66 /*底部*/
67 .footer{
68 margin: 0px auto;
69 width:50px;
70 height: 20px;
71 }
72 .footer::before{
73 content:‘‘;
74 display: block;
75 width: 50px;
76 height: 135px;
77 border-radius: 0 0 15px 15px;
78 background-color: greenyellow;
79 transform: translate(-51px,-8px);
80 }
81 .footer::after{
82 content:‘‘;
83 display: block;
84 width: 50px;
85 height: 135px;
86 border-radius: 0 0 15px 15px;
87 background-color: greenyellow;
88 transform: translate(51px,-143px);
89 }
90 </style>
91 </head>
92 <body>
93 <div class="box">
94 <div class="box_head"></div>
95 <div class="box_conten"></div>
96 <div class="footer"></div>
97 </div>
98 </body>
99 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>test页面</title>
6 <style type="text/css">
7 div{
8 margin: 10px auto;
9 width: 500px;
10 height: 200px;
11 background-color: darkgray;
12 text-align: center;
13 line-height: 180px;;
14 }
15 a {
16 position: relative;
17 display: inline-block;
18 outline: none;
19 text-decoration: none;
20 color:#fff;
21 font-size: 30px;
22 margin-right: 50px;
23 }
24
25 /* 大框 */
26 a:hover::before{
27 content: "\5B";
28 left: -15px;
29 color: red;
30 font-weight: 800;
31 display: block;
32 position: absolute;
33 }
34 a:hover::after {
35 content: "\5D";
36 color: red;
37 font-weight: 800;
38 padding: 0px 5px;
39
40 }
41 </style>
42 </head>
43 <body>
44 <div>
45 <a href="#">ONE A</a><a href="#">TWO B</a>
46 </div>
47 </body>
48 </html>
时间： 2024-10-21 09:21:45