用ul li完成边框重叠并附带电脑鼠标历经实际效果

日期:2020-10-21 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

提到边框重叠,大家何不开启淘宝主页访问行为主体归类內容板块瞧瞧---亲,你看到了,更是这个,边框重叠。实际上大家不难发现,这个实际效果其实不难,只是大家沒有真实的动手能力做过罢了,因此不知道道如何做,那末下面便是1个很好的实践活动,就让大家来谈谈用ul li怎样完成边框重叠,并附带电脑鼠标历经实际效果。

最后实际效果图:
 
编码:

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}
.box{ width:350px; height:500px; background:#999; padding-top:60px; padding-left:60px;}
.box li{ float:left; list-style:none}
.box li a{ border:5px solid #aaa; display:block; width:100px; height:60px; text-decoration:none; margin:0 0 ⑸px ⑸px; position:relative; z-index:0; text-align:center; line-height:60px; color:#fff; font-size:30px;}
.box li a:hover{ border:5px solid #333; z-index:1;}
</style>
</head>
<body>
<ul class="box">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
</ul>
</body>
</html>

何不copy下来实践活动1下哦-.-