1.自己写了一个，写完对比了下别人写的发现自己写的太low.故就不写自己太差劲的了。

别人写的我总结优化了一下，如果不用写内容去掉position,content简单也是可以的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

    .box-wrap {

        text-align: center;

        background-color: #d4d4f5;

        border:1px solid #FF0000;

        overflow: hidden; /*为了清除浮动*/

    }

    .box-wrap>div {

        width: 31.33%;

        padding-bottom: 31.33%;/*是父级元素的宽度的百分比*/

        margin:1%;

        border-radius: 10%;

        float: left;

        background-color: orange;

        position:relative;

    }

    .content {

        position:absolute;

        width:100%;

        height:100%;

        border-radius: 10%;

    }

</style>

</head>

<body>

    <div class="box-wrap">

        <div class="box">

            <div class="content">格子1</div>

        </div>

        <div class="box">

            <div class="content">格子2</div>

        </div>

        <div class="box">

            <div class="content">格子3</div>

        </div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

    </div>

</body>

</html>

2.也可以使用伪元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

    .box-wrap {

        text-align: center;

        background-color: #d4d4f5;

        border:1px solid #FF0000;

        overflow: hidden; /*为了清除浮动*/

    }

    .box-wrap>div {

        width: 31.33%;

        padding-bottom: 31.33%;/*是父级元素的宽度的百分比*/

        margin:1%;

        border-radius: 10%;

        float: left;

        background-color: orange;

        position:relative;

    }

    .box:after {

        position:absolute;

        content:"格子";

        display:block;

        width:100%;

        height:100%;

        border-radius: 10%;

    }

</style>

</head>

<body>

    <div class="box-wrap">

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

    </div>

</body>

</html>

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

  1. css实现九宫格

    原理:浮动+margin负边距 示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta c ...

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

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

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

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

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

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

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

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

  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. MOOC（7）- case依赖、读取json配置文件进行多个接口请求-解决用例间依赖问题（17）

    最最重要,处理case依赖.字段依赖 # -*- coding: utf-8 -*- # @Time : 2020/2/13 21:14 # @File : data_depend_17.py # @ ...

  2. 吴裕雄--天生自然python学习笔记：Python3 输入和输出

    输出格式美化 Python两种输出值的方式: 表达式语句和 print() 函数. 第三种方式是使用文件对象的 write() 方法,标准输出文件可以用 sys.stdout 引用. 如果你希望输出的 ...

  3. Spring中的事件处理

    文章目录 Spring中的事件处理 Spring 的核心是 ApplicationContext,它负责管理 beans 的完整生命周期.当加载 beans 时,ApplicationContext ...

  4. 8.2.2 使用Java8增强的Iterator遍历集合元素

    8.2.2 使用Java 8增强的Iterator遍历集合元素 Iterator接口方法 程序示例 Iterator仅用于遍历集合 Iterator必须依附于Collection对象 修改迭代变量的值 ...

  5. 常用JS代码片段

    1.隐藏部分数字,如手机号码,身份证号码 1 2 3 function (str,start,length,mask_char){ return str.replace(str.substr(star ...

  6. 用Express 4和 MongoDB打造Todo List

    本篇文章主要參考自DreamersLab - 用Express和MongoDB寫一個todo list.原文的教學內容是使用Express 3.x版,在這邊做簡單Express 4.12.1的todo ...

  7. 在线选题系统完善篇（PHP）

    第一篇: 选题在线提交系统(html+JS+PHP) 这是当时根据需求做的一个简单的版本,只能适用于这一个场景,而且题目等一系列数据都不能改.然后结束后,我又对重新写了一个有后台管理的选题系统.相对于 ...

  8. C++学习之旅

    到现在为止学习C++也已经有一个半月了.一个半个月里我怀着好奇与敬畏一步步的走来,一步步的走向C++的内心深处,也发现了C++"内心的复杂".虽有坎坷,但从未放弃. 我承认,我不是 ...

  9. C++走向远洋——23（项目一，三角形，类）

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:sanjiaoxing.cpp * 作者:常轩 * 微信公众号: ...

  10. sql 服务器统计信息简介

    sql服务器统计是包含数据分布信息的系统对象.有时,在正则列值中.统计可以在任何支持比较操作的数据类型上创建,例如 > , < , =等. 列表2-15中,从dbo.books表中查看 I ...