用ul li實現邊框重合並附帶鼠標經過效果
阿新 • • 發佈：2017-06-27
enter ref line z-index lin type 沒有 500px href
邊框重合這個效果並不難，只是我們沒有真正的動手做過而已，下面讓我們來談談用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>
用ul li實現邊框重合並附帶鼠標經過效果