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

    写一个小的scrapy project,爬取相关网页内容并保存为.json文件 0.创建project,genspider等. 1.修改items.py,内容如下: 2.修改dmoz.py,内容如下: ...

  2. 关于StrutsTypeConverter类型转换器

    <!-- 问题1: 如何覆盖默认的错误消息? 1). 在对应的 Action 类所在的包中新建 ActionClassName.properties 文件, ActionClassName 即为 ...

  3. IE11新特性 -- Internet Explorer 11：请不要再叫我IE

    Internet Explorer 11 中的一些新特性,包括对WebGL 的支持.预抓取.预渲染.flexbox.mutationobservers 以及其他一些 Web 标准的支持.但是更有趣的是 ...

  4. 实现Rsync同步Nginx前端配置

    近期,由于我们的阿里前端服务器频频受到恶意的流量攻击,导致前端NGINX进入黑洞而无法正常访问公司网站. 按之前的预计方法,采用加速乐及备用全配置前端的作法,将恶意短时流量攻击的损失时间降到最短.现将 ...

  5. 【HDOJ】1224 Free DIY Tour

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

  6. 嵌入式linux内核制作

    今天来总结一下mini2440的内核制作过程. 一. 将内核文件拷贝至目标目录,解压. 二.清除中间文件 命令:make distclean 三.配置内核文件 将开发板厂商制作好的内核文件拷贝至内核文 ...

  7. MySQL函数简介

    //将时间戳长整形数值转换为yyyy-MM-dd HH:mm:ss格式SELECT FROM_UNIXTIME(CREATE_TIME, '%Y-%m-%d %H:%i:%S') FROM TBLS ...

  8. eclipse tomcat 网页404的一个小问题

    之前一篇文章说过关于修改tomcat布置的应用的localhost路径.因为有两个项目在eclipse,所以我每次启动tomcat的时候都会加载两个项目, 但我其实只用调试其中一个项目,所以我就在se ...

  9. 尝鲜党：Nexus5、6刷安卓M教程

    说明: 进入recovery的命令:adb reboot recovery 进入bootloader的命令:adb reboot bootloader 概述 F:\Nexus5\AndroidM\ha ...

  10. Codeforces 385C Bear and Prime Numbers

    题目链接:Codeforces 385C Bear and Prime Numbers 这题告诉我仅仅有询问没有更新通常是不用线段树的.或者说还有比线段树更简单的方法. 用一个sum数组记录前n项和, ...