原理：浮动+margin负边距

示例代码：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>css实现九宫格</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            ul.box {

                list-style: none;

                width: 165px;

                height: 165px;

                padding: 30px;

            }

            .box li {

                /*关键--浮动*/

                float: left;

            }

            .box a {

                display: block;

                width: 50px;

                height: 50px;

                border: 5px solid blue;

                /*关键--margin负值*/

                margin-left: -5px;

                /*关键--margin负值*/

                margin-top: -5px;

            }

            .box a:hover {

                /*关键--相对定位*/

                position: relative;

                border-color: red;

                /*关键-- z-index*/

                z-index: 100;

            }

            .box:after {

                content: "";

                height: 0;

                visibility: hidden;

                clear: both;

                display: block;

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <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>

            </ul>

        </div>

    </body>

</html>

效果：

鼠标悬浮效果：

css实现九宫格的更多相关文章

  1. 纯CSS写九宫格样式，高宽自适应正方形

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  2. 利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. css实现九宫格图片自适应布局

    我之前写九宫格自适应布局的时候,每个格子是使用媒体查询器(@media)或者js动态设置css,根据不同的手机屏幕宽度,适配不同手机,但是这样有个很大的缺点,那就是移动端的屏幕尺寸太多了,就得写很多代 ...

  4. css布局 - 九宫格布局的方法汇总（更新中...）

    目录: margin负值实现 祖父和亲爹的里应外合 换个思路 - li生了儿子帮大忙. 借助absolute方位值,实现自适应的网格布局 cloumn多栏布局 grid display: table: ...

  5. css 实现九宫格

    1.自己写了一个,写完对比了下别人写的发现自己写的太low.故就不写自己太差劲的了. 别人写的我总结优化了一下,如果不用写内容去掉position,content简单也是可以的. <!DOCTY ...

  6. table 实现 九宫格布局

    九宫格布局 最近遇到一个题目,是实现一个九宫格布局的.实现的效果大概是下图这种这样子的: (鼠标悬浮的时候,九宫格的边框颜色是改变的.) 首先想到的是直接使用<table>进行布局,原因很 ...

  7. 【消灭代办】第2周 - 数组判断、开发工具、transform:matrix、Grid

    2018.11.19代办一:[数组判断] 代办描述: 怎么判断一个数组是数组呢?其实这个也是一个常考的题目 关键考点: 1.js中对象类型判断的几种方法 2.数组的知识和灵活运用 解决方案s: 篇幅过 ...

  8. sencha touch Container

    Container控件是我们在实际开发中最常用的控件,大部分视图控件都是继承于Container控件,了解此控件能帮我们更好的了解sencha touch. layout是一个很重要的属性,能够帮助你 ...

  9. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

随机推荐

  1. CodeForces - 1016C Vasya And The Mushrooms

    题面在这里! 好久没有体会这种A题的快感了23333 一开始看错了,以为权值是从1开始的,不过这样不要紧,最后把算的答案减去两行数的和就是正确的答案了. 然后发现位于一个角上的时候,我们其实只有两种选 ...

  2. 【8.28校内测试】【区间DP】

    感受到了生活的艰辛QAQ...这才是真正的爆锤啊...(因为t1t3还没有理解所以只能贴t2叻QAQ 区间DP...爆哭把题理解错了,以为随着拿的东西越来越多,断点也会越来越多,出现可以选很多的情况Q ...

  3. bzoj1634护花

    试题描述: 约翰留下他的N(N<=100000)只奶牛上山采木．他离开的时候,她们像往常一样悠闲地在草场里吃草．可是,当他回来的时候,他看到了一幕惨剧:牛们正躲在他的花园里,啃食着他心爱的美丽花 ...

  4. LT3759 宽输入电压范围升压 / 负输出 / SEPIC 控制器 可在输入电压低至 1.6V 的情况下工作

    引言当今的许多电子设备都需要一个负输出或正输出转换器,有时则是两者均需要.另外,它们还必需采用各种电源运作,包括 USB.墙上适配器.碱性电池和锂电池等. 为了从可变输入电压产生不同极性的输出,电源设 ...

  5. CMOS DACs act as digitally controlled voltage dividers

    Digital potentiometers, such as Analog Devices’ AD5160, make excellent digitally controlled voltage ...

  6. PNP NPN NMOS PMOS S8050 S8550 SI2301 SI2302 2N3904 2N3906 78L05 TL431

  7. Spring EL运算符实例

    Spring EL支持大多数标准的数学,逻辑和关系运算符. 例如, 关系运算符 – 等于 (==, eq), 不等于 (!=, ne), 小于 (<, lt), 小于或等于 (<= , l ...

  8. 字符串型MySQL查询条件需要注意的一点

    最近在工作中遇到了数据库服务器产生很多读写队列的问题,于是要求大家开始优化我们的SQL语句. 下面是查询quotedata_history表中的code字段的SQL语句,其中code字段的类型是var ...

  9. linux /proc/pid进程信息说明

    转:http://hi.baidu.com/sei_zhouyu/item/3ab5bc9fb2ea29c3b6253140 /proc/pid/是进程目录,存放的是当前运行进程的信息. 譬如apac ...

  10. Unity3D协程介绍 以及 使用

    作者ChevyRay ,2013年9月28日,snaker7译  原文地址:http://unitypatterns.com/introduction-to-coroutines/ 在Unity中,协 ...