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. cs231n spring 2017 lecture3 Loss Functions and Optimization

    1. Loss function是用来量化评估当前预测的好坏,loss function越小表明预测越好. 几种典型的loss function: 1)Multiclass SVM loss:一般的S ...

  2. git本地仓库目录问题

    git安装后修改默认的路径:每次打开git bash后都会进入这个目录 https://blog.csdn.net/weixin_39634961/article/details/79881140 在 ...

  3. SpringMVC学习笔记四:SimpleMappingExceptionResolver异常处理

    SpringMVC的异常处理,SimpleMappingExceptionResolver只能简单的处理异常 当发生异常的时候,根据发生的异常类型跳转到指定的页面来显示异常信息 ExceptionCo ...

  4. 不疯“模”不成活，海尔阿里II代电视将极致进行到底

    我去过很多现场,经历过很多新品发布,各种概念,各种颠覆,有点见怪不怪.这次受邀海尔阿里II代电视发布会,本也是带着一颗平常心. 2点30分发布会准时开场,当 "智慧模块"在讲解员手 ...

  5. 使用JS-SDK自定义微信分享效果

    前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题,摘要),一开始真是一脸懵逼,在网上搜索了半天之后大概有了方案.值得注意的是一开始搜索到的解决方案全是调用微 ...

  6. 概念--Maven仓库

    转:Maven:mirror和repository 区别 Tip: 默认中央仓库的地址:https://repo.maven.apache.org/maven2 1.Maven仓库主要有2种 remo ...

  7. Angular4——7.表单处理

    在Angular中存在两种表单处理方式: 模版驱动式表单 表单的数据模型是通过组件模版中的相关指令来定义的.由于使用这种方式定义表单的数据模型时,我们会受限于HTML的语法,所以,模版驱动方式只适用于 ...

  8. Swift 进阶 第 4 课 集合类型协议

    • Read 序列 一个序列 (sequence) 代表的是一系列具有相同类型 的值,你可以对这些值进行迭代.遍历一个序列最简单的方式是使用 for 循环: 123 for element in so ...

  9. Js对于数组去重提高效率一些心得

    最近在找工作,好几次面试都问过数组去重的问题.虽然问的都不一样,但是核心思想是没有变的. 第一种是比较常规的方法 思路: 构建一个新的数组存放结果 for循环中每次从原数组中取出一个元素,用这个元素循 ...

  10. 怎样解决使用feof（）函数时出现的问题？

    feof函数        昨天在做一个课程设计时,一个函数的功能是将文件中的数据一条条的读到链表中去.既然不确定有多少条数据,那只能借助feof()函数了,本来文件部分就没学好,也就知道这一个方法. ...