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

    其实在C语言的远行过程中,有这样一个流程, 编译:C----〉可执行文件(可以运行的) 1:.C------.i 预处理(之前和之后还是C语法)2: .i-------.s 编译(之前是C语法,之后是 ...

  2. 【李婶小教程】（SE_lab3）

    额,今天说一下这个SE_lab3那几个东西都是怎么装的. 啊--其实技术含量貌似不是很高的. 1.先说最简单的一个叫做:Findbugs 点这个Eclipse Marketplace,这是一个神奇的东 ...

  3. D - Network - poj3694（LCA求桥）

    题意:有一个网络有一些边相互连接,现在有Q次操作,求每次操作后的桥的个数 分析:开始竟然不知道还有LCA这么个东西....... *********************************** ...

  4. 从MongoDB说起

    近日MongoDB宣布完成新一轮1.5亿美元融资,投资者包括EMC.Salesforce.com.英特尔.Red Hat以及Altimeter Capital等投资机构.作为当今最流行的NoSQL数据 ...

  5. java 自制类加载器的简单实现

    package com.xiaomo.reflex; import java.io.File; import java.io.FileInputStream; import java.io.IOExc ...

  6. JS浏览器对象-History对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. BootStrap——模态框

    模态框(Modal)是BootStrap中很棒的一个插件.可以去BootStrap菜鸟驿站里面看看. 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开 ...

  8. MVC VIEW 时间格式控制

    @Convert.ToDateTime(Model.CheckPatronExclusionResults.RequestTime).ToString("yyyy-MM-dd HH:mm:s ...

  9. Baidu与Google地图API初探

    前天周六,有个好友过来玩,他说想在他的站点中加入地图导航模块,但不知道选择哪个第三方Map API 在网上查了下Baidu.Google.QQ和MapBar等4种Map API(都是採用JS开放API ...

  10. paip.提升用户体验---c++ qt 取消gcc编译的警告信息.txt

    paip.提升用户体验---c++ qt 取消gcc编译的警告信息.txt 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http:// ...