原理：浮动+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. [ZROI 9.16模拟赛] Tutorial

    Link: 传送门 A: 套路题结果想了好久…… 排序二叉树的性质就是中序遍历单调递增 于是只考虑当前树的中序遍历的序列即可,与树的形态无关 将序列改成严格单调增想到最大化不变的数,但直接LIS求的是 ...

  2. 1 Spring4 之环境搭建和HelloWorld

    1 Spring 是什么? 具体描述 Spring: 轻量级:Spring 是非侵入性的- 基于 Spring 开发的应用中的对象可以不依赖于 Spring 的 API 依赖注入(DI --- dep ...

  3. Loj10086 Easy SSSP

      试题描述 输入数据给出一个有 N 个节点,M 条边的带权有向图.要求你写一个程序,判断这个有向图中是否存在负权回路.如果从一个点沿着某条路径出发,又回到了自己,而且所经过的边上的权和小于 0,就说 ...

  4. [转]最流行的android组件大全

      目录(?)[+] 目录(?)[-] 最流行的android组件大全 UI组件 类库 游戏引擎 Android HTML5应用 最流行的android组件大全 最新更新文档请访问我的网站 Andro ...

  5. 拉普拉斯（Laplace）分布

    Laplace分布的概率密度函数的形式是这样的: $p(x) = \frac{1}{2 \lambda} e^{-\frac{\vert x –\mu \vert}{\lambda}}$   一般$\ ...

  6. PAT甲级1003. Emergency

    PAT甲级1003. Emergency 题意: 作为一个城市的紧急救援队长,你将得到一个你所在国家的特别地图.该地图显示了几条分散的城市,连接着一些道路.每个城市的救援队数量和任何一对城市之间的每条 ...

  7. SqlServer Base64解码中文

    最近在做一个和拥有TurboCRM相关的项目,其中需要取出客户信息的联系人字段,经过查看,这个字段在存入时用Base64加密过了 这个功能在应用层实现是很方便的,但是由于一些特殊原因,只能放到SqlS ...

  8. JAVA RMI调用实战学习

    JAVA RMI 实战示例,参考网址: http://diaoge.iteye.com/blog/245170 这个示例很清楚地阐释了rmi的使用方法, 但示例都是放在一起的, 实际使用中我们可能会将 ...

  9. java多线程知识汇总（三）如何选择锁？如何加锁

    1.锁,保证的是被锁的代码,一次执行完毕才能被其他线程执行,锁保证了一个线程执行过程中不被其他线程打断.以保证数据的准确性. 2.数据的读写过程,是有冲突的,当一个线程正在读数据,另一个线程正在写同一 ...

  10. Andriod for arcgis 字段属性

    Feature pFeature = selFeatureLayer.getFeature(8); Log.d("FID===", "" + pFeature. ...