原理：浮动+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. [BZOJ4556][TJOI2016&&HEOI2016]字符串(二分答案+后缀数组+RMQ+主席树)

    4556: [Tjoi2016&Heoi2016]字符串 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1360  Solved: 545[S ...

  2. 【尺取法】POJ3061 & POJ3320

    POJ3061-Subsequence [题目大意] 给定长度微n的数列整数及整数s.求出总和不小于s的连续子序列的长度的最小值.如果节不存在,则输出0. [思路] 尺取法五分钟裸裸裸~刷水刷出了罪恶 ...

  3. Miller-Rabin算法 codevs 1702 素数判定 2

    转载自:http://www.dxmtb.com/blog/miller-rabbin/ 普通的素数测试我们有O(√ n)的试除算法.事实上,我们有O(slog³n)的算法. 定理一:假如p是质数,且 ...

  4. 使用sklearn进行交叉验证

    模型评估方法 假如我们有一个带标签的数据集D,我们如何选择最优的模型? 衡量模型好坏的标准是看这个模型在新的数据集上面表现的如何,也就是看它的泛化误差.因为实际的数据没有标签,所以泛化误差是不可能直接 ...

  5. kali 执行apt-get upgrade后，终端无法打开的解决办法

    今天在kali执行apt-get upgrade命令后,reboot启动,发现进入界面终端无法开启 一波百度,google发现大概应该是语言的配置问题,因为最开始安装kali的时候是选择中文,可能up ...

  6. ReactNative-地图导航-iOS

    需求描述 项目中,要求接入导航功能,包括“百度map.高德map”. 方案分析 原生开发角度分析 从原生开发的角度分析的话,常规的思路可能是 分别取百度.高德官网,下载对应的SDK然后集成到本地: 创 ...

  7. Spring注入日期到bean属性-CustomDateEditor

    这一个Spring例子向您展示如何为bean属性注入一个“日期”. package com.yiibai.common; import java.util.Date; public class Cus ...

  8. Workflow：采用坐标变换（移动和旋转）画箭头

    背景 流程设计器的连线部分需要画一个箭头代表连接的方向,下图是期望的效果: 刚开始我准备采用三角函数(sin和cos)来计算三角的坐标,实现的过程真不爽(有兴趣的朋友可以试试),就在完工的时候,突然想 ...

  9. mysql下float类型使用一些误差详解

    单精度浮点数用4字节(32bit)表示浮点数采用IEEE754标准的计算机浮点数,在内部是用二进制表示的如:7.22用32位二进制是表示不下的.所以就不精确了. mysql中float数据类型的问题总 ...

  10. zendstudio采用xdebug调试，断点不停的解决

    查看zendstudio里windows->preferences->PHP->PHP Executables,编辑列表项,弹出框的Debugger看看还是不是xdebug.