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

    最近闲下来,整理了下最近写的代码,先写写架构,后面再分享几个我自己写的插件 最近经过反复对比,IOC框架选择了Autofac,原因很简单,性能出众,这篇博文是我的各大IOC框架的性能测试:http:/ ...

  2. nginx 中location和root

    nginx 中location和root,你确定真的明白他们关系? 2016-01-17 14:48 3774人阅读 评论(1) 收藏 举报  分类: linux(17)  版权声明:本文为博主原创文 ...

  3. NET调用Java之100-Continue的坑

    场景:这段时间开发的时候遇到了需要NET调用java的restful api的情况,java端用的服务器是tomcat,框架是spring boot,net调用java端的接口之后只要java端的接口 ...

  4. Entity Framewor 学习笔记 (include + where)

    如果我们想在子查询做过滤的话应该怎样写呢? IEnumerable<Product> products = db.products.Include(p => p.colors.Whe ...

  5. 开发自定义View

    当开发者打算派生自己的UI组件时,首先定义一个继承View基类的子类,然后重写View类的一个或多个方法,通常可以被用户重写的方法如下:构造器:重写构造器是定制View的最基本方法,当Java代码创建 ...

  6. Altium Designer 蛇行等长布线

    一． 设置需要等长的网络组 点击主菜单 Design --> Classes,在弹出的窗口中单击 Net Classes,并右键,点 Add Class 会增加一个 New Class,在该网络 ...

  7. C51 库函数

    C-51软件包的库包含标准的应用程序,每个函数都在相应的头文件(.h)中有原型声明.如果使用库函数,必须在源程序中用预编译指令定义与该函数相关的头文件(包含了该函数的原型声明).例如:#include ...

  8. Local System/Network Service/Local Service

    // The name of the account under which the service should run// 1 NT AUTHORITY\\SYSTEM 2 NT AUTHORIT ...

  9. 【HDOJ】1500 Chopsticks

    DP. #include <cstdio> #include <cstring> #include <cstdlib> #include <algorithm ...

  10. 写两个线程，一个对n每次加一，一个对n每次减一

    public class A{     private static Integer n = 0; }     public class B extends A implements Runnable ...