ホームページ > 記事 > ウェブフロントエンド > CSS で境界線のオーバーラップを実現する方法 Techniques_html/css_WEB-ITnose
CSS で境界線のオーバーラップを実現する方法 Techniques_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:07:071499ブラウズ
重なった境界線について言えば、淘宝網のホームページを開いて、メイン カテゴリのコンテンツ セクションを参照して見てみるのもいいかもしれません ---親愛なる、あなたはそれを見ました、まさにこれ、重なっている境界線。実際、この効果は難しくありませんが、実際に実行したことがないため、その方法がわかりません。そこで、次の方法について説明します。 ulli を使用して境界線のオーバーラップを実現し、マウス通過効果が付属します。
最終レンダリング:
コード:
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> コピーして練習してみるのもいいかもしれません -.-
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。