边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用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. Eclipse的汉化问题

    最近看了很多我周围的同学,也都是刚开始接触Eclipse,但是都头疼于eclipse的汉化问题. 好在的是,Eclipse的汉化比较简单,不用到网上自己下载汉化包,而且关于这个软件的汉化也非常的多,所 ...

  2. Python学习过程笔记整理（一）

    编码方式 -Utf8编码方式:# -*- coding: utf-8 -*- 注释 -行注释 # -块注释 '''...'''或"""...""&qu ...

  3. Kubernetes 容器平台实战

    一.什么是Kubernetes? Kubernetes是容器集群管理系统,是一个开源的平台,可以实现容器集群的自动化部署,自动扩缩容,维护等功能. 通过Kubernetes可以做到: 快速部署应用 快 ...

  4. 廖雪峰git教程学习笔记

    对git来说,没有消息就是最好的消息 使用 git init 把当前目录变为git仓库 要在仓库里加入文件,先在仓库目录新建这个文件后,比如新建一个文件xiaobai.txt,内容为: 在命令行里输入 ...

  5. Java SE练习题——求奇数

    欢迎来到Java SE练习题频道,我是Fishing,今天我带来的练习题是(做题会有不足之处,可评论,说出更好的方法): 通过键盘输入两个整数,计算这两个整数之间的所有奇数之和,并输出计算结果. 看到 ...

  6. UI设计学习笔记（7-12）

    UI学习笔记(7)--扁平化图标 认识扁平化 Flat Design 抛弃传统的渐变.阴影.高光等拟真视觉效果,打造看上去更平的界面.(颜色.形状) 扁平化图标有什么优缺点 优点: 简约不简单.有新鲜 ...

  7. SmartRaiden 和 Lighting Network 进行去中心化跨链原子资产交换

    作者介绍 虫洞社区·签约作者 steven bai 前言 如果能够进行以太坊和比特币跨链原子资产交换,是不是一件很酷的事情? 目前链下的扩容方式有很多,最广为人知的就是比特币的闪电网络和以太坊的雷电网 ...

  8. Python入门学习系列——Python文件和异常

    从文件中读取数据 首先准备一个文本文件,文件中存储着普通文本数据.读取文件需要调用open()和read()函数. 读取整个文件 代码示例: with open('pi_digits.txt') as ...

  9. Set up classpath in Eclipse

    On Eclipse main window Right click on .java file-> Run As -> Run Configurations... On Run Conf ...

  10. 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题

    博客已迁移至http://zlwis.me. 使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解 ...