Home >Web Front-end >HTML Tutorial >How to achieve ul li border overlap with css techniques_html/css_WEB-ITnose
How to achieve ul li border overlap with css techniques_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:07:071550browse
Speaking of overlapping borders, we might as well open the Taobao homepage to browse the main category content section and take a look - dear, you saw it, it is this, the borders are overlapping. In fact, it is not difficult for us to find that this effect is not difficult, but we have never really done it, so we don’t know how to do it. So the following is a good practice. Let us talk about how to use ulli to achieve border overlap. , and comes with mouse passing effect.
Final rendering:
Code:
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> You might as well copy it and practice it -.-
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn