边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用ul li如何实现边框重合，并附带鼠标经过效果
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3
4 <head>
5 <title></title>
6 <style type="text/css">
7 * {
8 margin: 0;
9 padding: 0;
10 }
11
12 .box {
13 width: 350px;
14 height: 500px;
15 background: #999;
16 padding-top: 60px;
17 padding-left: 60px;
18 }
19
20 .box li {
21 float: left;
22 list-style: none
23 }
24
25 .box li a {
26 border: 5px solid #aaa;
27 display: block;
28 width: 100px;
29 height: 60px;
30 text-decoration: none;
31 margin: 0 0 -5px -5px;
32 position: relative;
33 z-index: 0;
34 text-align: center;
35 line-height: 60px;
36 color: #fff;
37 font-size: 30px;
38 }
39
40 .box li a:hover {
41 border: 5px solid #333;
42 z-index: 1;
43 }
44 </style>
45 </head>
46
47 <body>
48 <ul class="box">
49 <li><a href="#">1</a></li>
50 <li><a href="#">2</a></li>
51 <li><a href="#">3</a></li>
52 <li><a href="#">4</a></li>
53 <li><a href="#">5</a></li>
54 <li><a href="#">6</a></li>
55 <li><a href="#">7</a></li>
56 <li><a href="#">8</a></li>
57 <li><a href="#">9</a></li>
58 <li><a href="#">10</a></li>
59 <li><a href="#">11</a></li>
60 <li><a href="#">12</a></li>
61 <li><a href="#">13</a></li>
62 <li><a href="#">14</a></li>
63 <li><a href="#">15</a></li>
64 </ul>
65 </body>
66
67 </html>
时间： 2024-10-14 05:56:49