用ul li实现边框重合并附带鼠标经过效果
生活随笔
收集整理的這篇文章主要介紹了
用ul li实现边框重合并附带鼠标经过效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
邊框重合這個效果并不難，只是我們沒有真正的動手做過而已，下面讓我們來談?wù)動胾l li如何實(shí)現(xiàn)邊框重合，并附帶鼠標(biāo)經(jīng)過效果
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>?
轉(zhuǎn)載于:https://www.cnblogs.com/yanglang/p/7086249.html
總結(jié)
以上是生活随笔為你收集整理的用ul li实现边框重合并附带鼠标经过效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AODp
- 下一篇： oracle 之 安装后pl/sql登录