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

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

列表li边框重合问题
在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图: 可以看到每个格子的右边框和下边框明显有边框重合现象,这样很影响美观. 解决这个问题: 只要给每个li设置css ...
css解决li边框重合问题
我直接写了个案例,先看下效果图: 下面是html代码: <!DOCTYPE html> <html><head><meta charset="utf ...
css案例学习之div ul li a 实现导航效果
效果代码 <html> <head> <title>无需表格的菜单</title> <style>body{background-colo ...
ul li设置横排，并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单让ul li横向排列及圆点处理我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...
ul li横向排列及圆点处理
如何用CSS制作横向菜单让ul li横向排列及圆点处理第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
html li内文字垂直居中,ul li 下图片文字垂直居中
html代码如下: 首页 cqm8@163.com +86 898 234566 对应的css代码如下: .contact ul li { float: left; display: inline; ...
ul 原点显示_web前端开发学习教程，CSS HTML - ul li列表原点如何相连
原标题:web前端开发学习教程,CSS HTML - ul li列表原点如何相连目前我列出两个方案,很详细,希望可以帮助到有疑问的朋友. 方案一: html 参与考试<第一期模拟考试> ...
如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制]
本文翻译自:How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [du ...
用“ul+li”及css制作韩国风格菜单
http://www.52css.com/article.asp?id=269 韩国网站的设计风格特征鲜明,色彩明快,现在越来越多的人正在模仿这种风格, 下图为一个韩式风格的网站效果: 韩国风格的网站 ...

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

css技巧之如何实现ul li边框重合相关推荐

最新文章

热门文章