边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用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. c# url链接转成二维码图片，再转成byte[]二进制流，输出到前段ajax

    需要用到的 dll 添加引用 代码: //获取配置文件设置的url string urllink = ConfigurationManager.AppSettings["urllink&qu ...

  2. 使用efwplusScript开发Winform程序【像小程序那样开发PC软件】

    一.前言 本人从事多年医疗管理软件的开发,在医院大多数的软件都还是CS程序,BS程序很少,对于使用者来说CS的操作体验确实比BS的要好. 1.CS的缺点就是升级麻烦,每次有新版本都需要所有客户端操作升 ...

  3. 什么是REST，RESTful？

    转载自https://www.zhihu.com/question/28557115 https://blog.csdn.net/hjc1984117/article/details/77334616 ...

  4. SpringCloud 学习(二) ：服务注册与发现Eureka

    Spring Cloud应用中可以支持多种的服务治理框架,比如Eureka.Consul.Zookeeper等,现在我们用的是consul,本文以SpringCloud Dalston.SR5版本介绍 ...

  5. 浏览器初始页面设置及被hao123劫持解决办法

    最近在用浏览器时打开初始页面都是hao123,喵喵喜欢简单干净的页面,就去设置初始页面. 此处放置初始页面参考(并不太难): https://jingyan.baidu.com/article/11c ...

  6. BP神经网络算法推导

    目录 前置知识 梯度下降法 激活函数 多元复合函数求偏导的相关知识 正向计算 符号定义 输入层 隐含层 输出层 误差函数 反向传播 输出层与隐含层之间的权值调整 隐含层与输入层之间权值的调整 计算步骤 ...

  7. js 基础拓展

    1.关于 try catch 的用法 <body> <div>请输出一个 5 到 10 之间的数字:</div> <input id="demo&q ...

  8. 第三周linux学习

    实验二 Linux下C语言编程基础 一.实验目的 1. 熟悉Linux系统下的开发环境 2. 熟悉vi的基本操作 3. 熟悉gcc编译器的基本原理 4. 熟练使用gcc编译器的常用选项 5 .熟练使用 ...

  9. c# 程序重启设定

    问题情境: 程序随着时间运行,越来越大.暂时想到的两种方法,一是反攻代码,查看占内存大的函数,是不是没有回收.再就是暴力设定程序定时重启. 解决原理: 定时重启:暂设定timer,时间匹配执行rest ...

  10. 《Spring2之站立会议4》

    <Spring2之站立会议4> 昨天,对主界面进行了设计,编写了主界面的代码,把文本输入框,显示框,发送,关闭两个按钮的功能实现了: 今天,接着对主界面进行代码的编写,实现了界面的美化,从 ...