边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用ul li如何实现边框重合，并附带鼠标经过效果

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <title></title>

     <style type="text/css">

         * {

             margin: ;

             padding: ;

         }

         .box {

             width: 350px;

             height: 500px;

             background: #;

             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:   -5px -5px;

             position: relative;

             z-index: ;

             text-align: center;

             line-height: 60px;

             color: #fff;

             font-size: 30px;

         }

         .box li a:hover {

             border: 5px solid #;

             z-index: ;

         }

     </style>

 </head>

 <body>

     <ul class="box">

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

         <li><a href="#"></a></li>

     </ul>

 </body>

 </html>

用ul li实现边框重合并附带鼠标经过效果的更多相关文章

  1. css技巧之如何实现ul li边框重合

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

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

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

  3. [置顶] html学习笔记，锚点，超链接，table布局，表头，h,sub,blockquote,ul,li,ol.dl,加入收藏，打印，弹出窗口

    <a name="shouye"></a> <strong>strong加粗</strong> <br> 没有加粗 &l ...

  4. ul li做横向导航栏例子

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  5. 三，<ul><li>实际应用时遇到的问题

    在布局中使用的比较多的就是这个,快速排列一行或多行文字,还有横排显示作为导航栏标题栏等等书写格式:<ul>    <li>山东教育.....</li></ul ...

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

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

  7. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

  8. html ul li的学习

    DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...

  9. ul li 下的元素内容垂直居中

    CSS: <style> * {;; } li { list-style: none; } li span { border: 1px solid red; height: 100px; ...

随机推荐

  1. python中的运算符的分类以及使用方法

    1.算数运算符 算数运算符的分类: +, –,  *,  **(幂运算),   /,  //(整除),  %(取余/取模) 算数运算符的优先级:  ()>  ** > *, /, % &g ...

  2. Nginx应用场景

    1. Nginx应用场景 1)http服务器.Nginx可以独立的提供http服务,可以做网页静态服务器(也就是将静态文件放到nginx目录下,通过nginx来访问就ok)   2)虚拟主机,可以在一 ...

  3. 做一个树莓派Raspberry Pi拍立得

    用树莓派Raspberry Pi打造一台拍立得,作法如下: 材料:树莓派+数字相机模块+热敏打印机 因为打印机所需电流较高,所以电源供应器的规格需要5V 3A以上. 再找一个稳定的电源以及够大的外壳装 ...

  4. 原生android（一）

    一.移动APP的几种类型 1.Native APP:基于智能手机操作系统,并使用原生程序编写运行的应用程序,有IOS,Android,Windows Phone8等系统 2.Web APP:运行在智能 ...

  5. gith命令行使用之上传和删除

    git这个工具的功能很强大,而使用git bash的命令行来进行git工具的操作尤为重要.而且我个人认为,用命令行进行git工具的操作比起图形界面的git工具,要更容易理解.图形界面的那个叫Torto ...

  6. kubenetes无法创建pod/创建RC时无法自动创建pod的问题

    一.问题概述 问题1: 虽然每次通过yaml创建rc都显示成功了,但是 kubectl get pod却没显示任何的pod. 问题2: 直接通过yaml创建pod提示apixxx 问题3: 通过.js ...

  7. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  8. 基于Ubuntu+kodexplorer可道云的私有云网盘

    1.可用的服务器:组装PC机一台,操作系统为Ubuntu 14.04 LTS,无桌面环境,放在机房,使用远程终端进行访问.有安装了Apache2,运行着svn服务.内网IP地址为192.168.0.1 ...

  9. 绝对干货！初学者也能看懂的DPDK解析

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由Willko发表于云+社区专栏 一.网络IO的处境和趋势 从我们用户的使用就可以感受到网速一直在提升,而网络技术的发展也从1GE/10 ...

  10. CocoaPods pod install的时候报错：invalid byte sequence in UTF-8 (ArgumentError)解决办法

    CocoaPods pod install的时候报错:invalid byte sequence in UTF-8 (ArgumentError)解决办法: 基本可以确定是Podfile中的内容编码有 ...