用ul li实现边框重合并附带鼠标经过效果
Posted 杨浪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用ul li实现边框重合并附带鼠标经过效果相关的知识，希望对你有一定的参考价值。
边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用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实现边框重合并附带鼠标经过效果的主要内容，如果未能解决你的问题，请参考以下文章