css技巧之如何实现ul li边框重合

本文介绍了一种使用HTML和CSS实现边框重合的方法,并提供了具体的代码示例。通过设置适当的样式,使得元素间的边框能够完美对接,同时加入了鼠标悬停效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合。其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很好的实践,就让我们来谈谈用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下来实践一下哦-.-

 

转载于:https://www.cnblogs.com/sweet201314/p/3599214.html

实现没有外部边框线的九宫格,可以使用 CSS 的 flex 布局,结合 ulli 元素,代码如下: ```html <ul class="grid-container"> <li class="grid-item"></li> <li class="grid-item"></li> <li class="grid-item"></li> <li class="grid-item"></li> <li class="grid-item"></li> <li class="grid-item"></li> <li class="grid-item"></li> <li class="grid-item"></li> <li class="grid-item"></li> </ul> ``` ```css .grid-container { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px; } .grid-item { background-color: #ccc; height: 100px; width: calc(33.33% - 10px); margin-bottom: 10px; position: relative; } .grid-item::before, .grid-item::after { content: ""; position: absolute; width: 100%; height: 100%; border: 2px solid #000; z-index: -1; } .grid-item::before { top: 0; left: 0; } .grid-item::after { bottom: 0; right: 0; } .grid-item:first-child::before, .grid-item:nth-child(3n+1)::before { border-left: none; } .grid-item:nth-child(-n+3)::before, .grid-item:nth-child(-n+3)::after { border-top: none; } .grid-item:last-child::after, .grid-item:nth-child(3n)::after { border-right: none; } .grid-item:nth-child(n+7)::before, .grid-item:nth-child(n+7)::after { border-bottom: none; } ``` 这使用了 CSS 的 flex 布局,通过设置 display 属性为 flex 和 justify-content 属性为 space-between 实现了九宫格的效果。同时,通过设置 flex-wrap 属性为 wrap,实现了自动换行,并且通过设置 margin-bottom 属性为 10px 实现了格子之间的间距,通过设置 padding 属性为 10px 实现了九宫格与边框之间的距离。 在每个格子中,使用了伪元素 ::before 和 ::after,通过设置它们的 position 为 absolute 实现了它们与格子的重叠。通过设置它们的 width 和 height 为 100% 实现了它们与格子大小相同,通过设置它们的 border 为 2px solid #000 实现了内部边框的效果,同时,通过设置它们的 z-index 为 -1,将它们放在格子下面,从而实现了没有外部边框线的九宫格效果。 另外,通过设置伪元素 ::before 和 ::after 的 border-left 和 border-top 属性为 none,实现了九宫格左边框和上边框的去除,通过设置伪元素 ::after 和最后一个格子的 border-right 属性为 none,实现了九宫格右边框的去除,同时,通过设置伪元素 ::before 和 ::after 的 border-bottom 属性为 none,实现了九宫格下边框的去除。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值