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

css技巧之如何实现ul li边框重合的更多相关文章

  1. CSS实现列表li边框重合问题

    CSS实现列表li边框重合问题 2017年04月13日 21:04:18 阅读数:5066 在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图:  可以看到每个格子的右边框和 ...

  2. css案例学习之div ul li a 实现导航效果

    效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...

  3. 关于css中使用ul li的一些体会

    参考网址:http://hi.baidu.com/july_leo/item/5237cd612070ae2668105b40 如何修改ul li的显示 ----------------------- ...

  4. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  5. ul li设置横排，并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  6. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  7. UL/LI

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理    我们先建立一个无序列表,来建立菜单的结构.代码是: <ul><li><a href="1&quo ...

  8. ul+li水平居中的几种方法

    一.posotion:relative; 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

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

    边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 <!DOCTYPE html> <html lang=&qu ...

随机推荐

  1. iOS－OC命名规范

    IOS开发(OC)中的命名规范 正文:通过读写大量代码我有自己的一套编程思路和习惯,自认为自己的编码习惯还是不错的,代码结构也算清晰,因为我一直以来都是代码看的多写的多,但是总结的比较少,知识经常不成 ...

  2. 摇滚吧HTML5！Jsonic超声波前端交互！

    前些年吹过一阵canvas制作html5游戏的东风,相信不少同学重温了一把高中物理课本上的牛顿定律.时光如梭,你是否还记得牛顿定律后面一章的各种机械波的物理定律?环视四周,光纤.wifi.蓝牙.广播都 ...

  3. Cracking the coding interview--Q1.6

    原文: Given an image represented by an NxN matrix, where each pixel in the image is 4 bytes, write a m ...

  4. 玩转Google开源C++单元测试框架Google Test系列(转载)

    越来越多公司采用敏捷开发,单元和回归测试越来越重要,GTest作为最佳C++单元测试工具越来越多的被使用.转自 http://www.cnblogs.com/coderzh/archive/2009/ ...

  5. ASCII、Unicode、GBK和UTF-8字符编码的区别联系[转]

    http://dengo.org/archives/901 这是我看过的最好的一篇讲述编码的文章 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到 ...

  6. Linux系统编程（31）—— socket编程之TCP详解

    TCP有源端口号和目的端口号,通讯的双方由IP地址和端口号标识.32位序号.32位确认序号.窗口大小稍后详细解释.4位首部长度和IP协议头类似,表示TCP协议头的长度,以4字节为单位,因此TCP协议头 ...

  7. cf435C Cardiogram

    C. Cardiogram time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  8. 读<<如何阅读一本书>>乱七八糟的笔记1

    阅读层次 第一层:基础阅读 第二层:检视阅读 系统化略读 第三层:分析阅读 第四层:主题阅读(比较阅读) 第二层:检视阅读 1.有系统的粗读或略读 (1)先看书名页,然后如果有序就先看序 (2)研究目 ...

  9. libvirt-adabddad

    kvm i686  libvirtError: internal error cannot load AppArmor profile 'libvirt-adabddad-35ba-b9ca-e250 ...

  10. Java虚拟机内存优化实践

    前面一篇文章介绍了Java虚拟机的体系结构和内存模型,既然提到内存,就不得不说到内存泄露.众所周知,Java是从C++的基础上发展而来的,而C++程序的很大的一个问题就是内存泄露难以解决,尽管Java ...