css技巧之如何实现ul li边框重合
生活随笔
收集整理的這篇文章主要介紹了
css技巧之如何实现ul li边框重合
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
提到邊框重合，我們不妨打開淘寶首頁瀏覽主體分類內(nèi)容板塊瞧瞧---親，你看到了，正是這個，邊框重合。其實我們不難發(fā)現(xiàn)，這個效果并不難，只是我們沒有真正的動手做過而已，所以不知道怎么做，那么下面就是一個很好的實踐，就讓我們來談談用ul li如何實現(xiàn)邊框重合，并附帶鼠標經(jīng)過效果。
最終效果圖：
代碼：
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 <title></title> 5 <style type="text/css"> 6 *{ margin:0; padding:0;} 7 .box{ width:350px; height:500px; background:#999; padding-top:60px; padding-left:60px;} 8 .box li{ float:left; list-style:none} 9 .box li a{ border:5px solid #aaa; display:block; width:100px; height:60px; text-decoration:none; margin:0 0 -5px -5px; position:relative; z-index:0; text-align:center; line-height:60px; color:#fff; font-size:30px;} 10 .box li a:hover{ border:5px solid #333; z-index:1;} 11 </style> 12 </head> 13 <body> 14 <ul class="box"> 15 <li><a href="#">1</a></li> 16 <li><a href="#">2</a></li> 17 <li><a href="#">3</a></li> 18 <li><a href="#">4</a></li> 19 <li><a href="#">5</a></li> 20 <li><a href="#">6</a></li> 21 <li><a href="#">7</a></li> 22 <li><a href="#">8</a></li> 23 <li><a href="#">9</a></li> 24 <li><a href="#">10</a></li> 25 <li><a href="#">11</a></li> 26 <li><a href="#">12</a></li> 27 <li><a href="#">13</a></li> 28 <li><a href="#">14</a></li> 29 <li><a href="#">15</a></li> 30 </ul> 31 </body> 32 </html>不妨copy下來實踐一下哦-.-
?
轉(zhuǎn)載于:https://www.cnblogs.com/sweet201314/p/3599214.html
總結(jié)
以上是生活随笔為你收集整理的css技巧之如何实现ul li边框重合的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： showModalDialog sesi
- 下一篇： apache mysql 添加到开机自动