边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用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. Windows：打开MSDTC，恢复Windows任务栏，查看windows日志，打开远程桌面，打开Services，资源监控

    Windows 服务器系列: Windows:查看IP地址,IP地址对应的机器名,占用的端口,以及占用该端口的应用程 Windows:使用Dos命令管理服务(Services) Windows:任务调 ...

  2. virtualBox linux centos 挂载u盘 解决乱码

    linux 挂载u盘 环境:虚拟机virtualBox5.2.8 linux centos6.5 64bit 第一步:插入u盘 第二步:virtualBox 设置启用u盘 提示:如果不知道哪个是你u盘 ...

  3. Oracle中解析XMLType格式字段

    背景:项目从某数据交换平台获取XML数据,以Oracle的XMLType格式保存在数据库字段中,需要建立触发器.存储过程,在保存数据时解析XML字段,将数据写入其他业务表中. 参考资料:Oracle的 ...

  4. 六边形地图Cube coordinates理解

    1.这个是 Axial coordinates,可以实现六边形4个方向上的移动 2.但是六边形还有两个方向需要移动,所以引入了Cube coordinates,这个坐标系多了一个轴向,Y轴,X轴沿水平 ...

  5. Python构建web应用（进阶版）->对网页HTML优化逻辑显示

    本篇是承接上一篇web应用(入门级)的内容往下顺延的,阅读后将会了解HTML逻辑显示优化,如下图所示,从杂乱无章的日志文件到一个整齐的列表显示. —————————————————————————— ...

  6. CHAPTER 38 Reading ‘the Book of Life’ The Human Genome Project 第38章 阅读生命之书 人体基因组计划

    CHAPTER 38 Reading ‘the Book of Life’ The Human Genome Project 第38章 阅读生命之书 人体基因组计划 Humans have about ...

  7. node child_process模块

    NodeJs是一个单进程的语言,不能像Java那样可以创建多线程来并发执行.当然在大部分情况下,NodeJs是不需要并发执行的,因为它是事件驱动性永不阻塞.但单进程也有个问题就是不能充分利用CPU的多 ...

  8. Final阶段版本控制报告

    版本控制代码及文档要求 在coding.net版本控制; 公开项目,教师.专家.其他同学可以不注册源代码.在此公布git地址. 报告beta阶段2周中,项目的版本控制情况,不包括未在coding.ne ...

  9. 第33次Scrum会议(11/21)【欢迎来怼】

    一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,阚博文 小组照片 二.开会信息 时间:2017/11/21 11:35~11:57,总计22min.地点:东北 ...

  10. 2017-2018-1 Java演绎法 第九、十周 作业

    团队成员 [20162315 马军] [20162316 刘诚昊] [20162317 袁逸灏(组长)] [20162319 莫礼钟] [20162320 刘先润] [20162330 刘伟康] 项目 ...