边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用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. Zigbee系列（路由机制）

    参考文档: ug103-02-fundamentals-zigbee.pdf section4 zigbe routing concepts docs-05-3474-21-0csg-zigbee-s ...

  2. nginx解析漏洞，配置不当，目录遍历漏洞环境搭建、漏洞复现

    nginx解析漏洞,配置不当,目录遍历漏洞复现 1.Ubuntu14.04安装nginx-php5-fpm 安装了nginx,需要安装以下依赖 sudo apt-get install libpcre ...

  3. jmeter—操作数据库

    添加JDBC Request,添加需要执行的sql语句 在这个界面需要配置Variabke Name,内容要与上表中的Name值相同:数据库的用户名.密码.URL.驱动这些基本信息要在这里配置:其他选 ...

  4. 【Go】Mac上安装Go

    一:首先安装brew,方便管理,安装方法,终端中输入 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/ins ...

  5. python的字符串格式化

    1.python到底有那几种字符串格式化模块? python有3种格式化字符串的方法: 传统的%字符串格式符 str.format函数 字符串模版template 新的python 3.6+还提供了新 ...

  6. 基于openvswitch+Docker构建SDN网络测试环境 (使用ovs-docker进行构建）

    这是一篇之前写的笔记,主要记录了使用openvswitch + Docker 等进行一个小型的SDN网络搭建的操作步骤.由于 之前临时有其他任务,耽搁了一下,最近开始重新整理,并计划开发一个简单的Py ...

  7. 2019CSUST集训队选拔赛题解（二）

    凛冬将至 Description 维斯特洛大陆的原住民是森林之子,他们长得如孩童一般,善于使用石器,威力值35,用树叶树枝作为衣物,在森林里繁衍生息,与万物和平相处.他们会使用古老的魔法(比如绿之视野 ...

  8. Django数据库 相关之select_related/prefetch_related

    - 性能相关 user_list = models.UserInfo.objects.all() for row in user_list: # 只去取当前表数据 select_related,主动连 ...

  9. centos6.9+lnmp1.5环境部署swoole记录

    hiredis下载地址:https://github.com/redis/hiredis/releasesunzip hiredis-v0.13.3.zipmake -jsudo make insta ...

  10. sql语句（Mysql数据库）

    Mysql数据库的sql语句: 一.基本操作 1.连接数据库 mysql -uroot -proot -hlocalhost -P3306 (-u表示用户名,-p密码,-h主机,-P端口号) 2.选择 ...