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

    转载请注明出处:http://www.cnblogs.com/StartoverX/p/4660487.html 项目用到SQLite3,简单记录一下. MySQL不同,SQLite3的数据库基于文件 ...

  2. jdk8新特性之lambda expressions

    本文分两部分: 语法简单说明 lambda的使用 注:这两部分内容均以类+注释的方式进行说明,并且内容均来自官方教程(https://docs.oracle.com/javase/tutorial/j ...

  3. 转：为什么需要htons(), ntohl(), ntohs()，htons() 函数

    为什么需要htons(), ntohl(), ntohs(),htons() 函数: 在C/C++写网络程序的时候,往往会遇到字节的网络顺序和主机顺序的问题.这是就可能用到htons(), ntohl ...

  4. SQL basic

    Function 从例子学习 drop function dbo.getWorkingDateCount; --getWorkingDateCount = functionName CREATE FU ...

  5. Cracking the coding interview--Q1.8

    原文: Assume you have a method isSubstring which checks if one word is a substring of another. Given t ...

  6. AndroidManifest.xml 文件里面的内容介绍

    <?xml version="1.0" encoding="utf-8"?> <!--package 包表示整个java应用程序的主要包名,而 ...

  7. 如何在Excel中启用宏？

    OFFICE2003版本中启用宏的方法: 1.首先打开EXCEL应用程序. 2.点击上方的"工具"--"宏"--"安全性" 3.在" ...

  8. 如何在Windows服务程序中读写HKEY_CURRENT_USER注册表

    在服务程序中想要对注册表HKEY_CURRENT_USER下的内容进行读写,不会返回失败,但是始终无效.原因是: 1.服务运行在系统权限之下,而不是任何一个用户 2.HKEY_CURRENT_USER ...

  9. BIND9的架构与机制笔记1

    BIND9采用的是事件驱动的机制来工作,而事件的源头则是IO,IO在linux使用的EPOLL的边缘触发模式. 本篇说的是epoll,BIND9如果创建了watcher线程(宏USE_WATCHER_ ...

  10. 计算N!的质因数2的个数

    容易得出N!质因数2的个数 = [N / 2] + [N / 4] + [N / 8] + .... 下面通过一个简单的例子来推导一下过程:N = 10101(二进制表示)现在我们跟踪最高位的1,不考 ...