css技巧之如何实现ul li边框重合_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

css技巧之如何实现ul li边框重合_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:07 PM

提到边框重合，我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲，你看到了，正是这个，边框重合。其实我们不难发现，这个效果并不难，只是我们没有真正的动手做过而已，所以不知道怎么做，那么下面就是一个很好的实践，就让我们来谈谈用ul li如何实现边框重合，并附带鼠标经过效果。

最终效果图：

代码：

 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下来实践一下哦-.-

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，