边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用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. Linux常用系统命令大全

    最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短小但却功能强大.我将我了解到的命令列举一 ...

  2. CSS3新增特性详解（二）

    上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器.多背景图.阴影.渐变等.本文主要介绍CSS3中新增的动态特性,如过度.动画.变形等. transitian:  -webkit-tran ...

  3. Error! Failed to install react, react-dom, next, try again.

    问题:用create-next-app创建应用报错,部分模块没有安装,react.react-dom.next等模块安装失败,如下图所示 操作环境: 系统:Ubuntu 16.04.4 LTS npm ...

  4. [leetcode]从中序与后序/前序遍历序列构造二叉树

    从中序与后序遍历序列构造二叉树 根据一棵树的中序遍历与后序遍历构造二叉树. 注意: 你可以假设树中没有重复的元素. 例如,给出 中序遍历 inorder = [9,3,15,20,7] 后序遍历 po ...

  5. 如何判断Map中的key或value是什么类型

    在上班写工具类时,遇到了一个问题,将xml文件的节点都放入map容器中时,map的value也是一个map,导致取map的value时,需要判断这个value的数据类型,用到了一下说的这些知识: 对于 ...

  6. Centos 7 安装Zabbix

    一.环境准备与说明: 1.zabbix server 版本:3.4.12 ,https://www.zabbix.com/download 2.zabbix agent版本:3.4.14,https: ...

  7. java按照字节切割字符串，解决汉字的问题

    编写一个截取字符串的函数,输入为一个字符串,截取开始地址,截取字节数,输出为按字节截取的字符串. 但是要保证汉字不被截半个, 如“我ABC”,0,4,应该截为“我AB”,输入“我ABC汉DEF”,1, ...

  8. 微软职位内部推荐-SW Engineer II for Enterprise Platform

    微软近期Open的职位: Job posting title: SDE II Location: China, Beijing Group Overview Discovery & Colla ...

  9. Python基础系列讲解—动态类型语言的特点

    前言 在C语言中变量所分配到的地址是内存空间中一个固定的位置,当我们改变变量值时, 对应内存空间中的值也相应改变.在Python中变量存储的机制是完全不一样的,当给一个变量赋值时首先解释器会给这个值分 ...

  10. Tornado之笔记集合

    目录 一.基本使用 二.路由系统 三.视图函数 四.模版语言 五.cookie 六.CSRF 七.文件上传 八.异步非阻塞 九.RESTFUL 十.自定义组件 一.基本使用 1.最简使用 import ...