主页 / 建站知识 /

用ul li实现边框重合并附带鼠标经过效果

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设
提到边框重合，我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲，你看到了，正是这个，边框重合。其实我们不难发现，这个效果并不难，只是我们没有真正的动手做过而已，所以不知道怎么做，那么狼蚁网站SEO优化就是一个很好的实践，就让我们来谈谈用ul li如何实现边框重合，并附带鼠标经过效果。

最终效果图
 
代码

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml">
<head>
<title></title>
<style type="text/css">
{ margin:0; padding:0;}
.box{ width:350px; height:500px; background:#999; padding-: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 -5px -5px; 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下来实践一下哦-.-
上一篇：完美实现文字置于图片之上且背景半透明 下一篇：表格里使用text-overflow后不能隐藏超出的文本的解

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by