列表li边框重合

ianutt

于 2021-04-14 15:31:03 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/ianutt/article/details/115700220

版权

HTMLCSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

开始将li的z-index设置为0，让它可以“压”在下面，当鼠标经过时将其z-index设置为1，让其显示（注意这时记得给li设置position属性）

<!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; }
ul { width: 520px; height: 312px; margin: 50px auto; }
ul li { list-style: none; width: 100px; height: 100px; text-align: center; background-color: #efefef; float: left; border: 1px solid #999; margin: 0 0 -1px -1px; position: relative; z-index: 0; }
ul li:hover { border: 1px solid red; z-index: 1; }
ul li a { text-decoration: none; color: #333; font-size: 40px; font-weight: bold; line-height: 100px; }
</style>
</head>
<body>
<ul>
  <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>
</html>

在这里插入图片描述

ianutt

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
列表li边框重合

开始将li的z-index设置为0，让它可以“压”在下面，当鼠标经过时将其z-index设置为1，让其显示（注意这时记得给li设置position属性）<!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">&
复制链接

扫一扫