1. 首先看下九宫格的效果图:

2. html代码比较简单,如下:

    <div class="main">

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

        <div class="box4"></div>

        <div class="box5"></div>

        <div class="box6"></div>

        <div class="box7"></div>

        <div class="box8"></div>

        <div class="box9"></div>

    </div>

3. css代码也不多 : )

        * { padding: 0; margin: 0; }

        .main {

            background-color: #fff;

            width: 100%;

            padding-bottom: 100%;

            padding-left: 0.5%;

    	　　 padding-top: 0.5%;

        }

        .main>div {

            width: 31%;

            padding-bottom: 31%;

            border: 1% solid #fff;

            background-color: mediumpurple;

            border-radius: 3%;

            float: left;

            margin: 1%;

        }

接下来分析一下如何实现等宽高的,这里主要使用 padding-bottom 属性来实现高与宽一样的!

1. padding 属性 :  当该属性的值用%表示时, 是基于父元素的宽度的百分比 的内边距。

　上面的css代码就是通过设置padding与宽度的百分比一致来实现等宽高的格子的 : )

2. 要实现九个格子固定位置, 还要计算出每个格子的宽度以及边距margin, 这些是根据项目的实际情况计算的 : )

但上面仅仅是实现没有内容的九宫格,如果往里面添加内容,是会乱的, 所以下面说一下如果往格子里添加内容(完整代码):

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <meta name="format-detection" content="telephone=no">

    <title>九宫格</title>

    <style>

        * { padding: 0; margin: 0; }

        .main {

            background-color: #fff;

            width: 100%;

            padding-bottom: 100%;

            padding-left: 0.5%;

    	　　 padding-top: 0.5%;

        }

        .main .box {

            width: 31%;

            padding-bottom: 31%;

            border: 1% solid #fff;

            background-color: mediumpurple;

            border-radius: 3%;

            float: left;

            margin: 1%;

            position: relative;   /*父元素给相对定位*/

        }

        .main .box .content {

	　　position: absolute;    /*子元素给绝对定位*/

	　　width: 100%;

　　　　　　 height: 100%;

	}

    </style>

</head>

<body>

    <div class="main">

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

  格子内部是一个和格子等宽高的div元素,我们可以在这个标签内添加图标文字,组成一个好看的导航栏 : )

好啦,本次的分享就写到这里啦, 不懂的可以在下面留言   : )

css实现响应式九宫格效果的更多相关文章

  1. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  2. 手机端的tab切换，响应式切换效果

    之前写过这些tab切换的效果,无论网页上还是手机端,网上也有很多的例子,这个好像是我参考网上,也不知道是哪里的了.总结了一下,就当保存下来了把. <!DOCTYPE html > < ...

  3. CSS：响应式下的折叠菜单(条纹式)

    原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs 写在之前,关于如何制作响应式的下拉菜单:响应式下的下拉菜单 之前,我写了一篇关于怎么 ...

  4. CSS制作响应式正方形及其应用

    CSS制作响应式正方形?什么鬼?干嘛用的?干嘛用的没人有每人的需求,本人也正好是由于公司正在做的业务须要,想做个照片展示的功能(当然得符合响应式了).而这个照片展示必须符合下面几点功能:1.用三张图片 ...

  5. CSS实现响应式布局

    用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...

  6. css实现响应式布局的相关内容

    所以我就在做自适应的时候查了一些资料 首先我发现一个问题:有响应式布局和自适应布局两种布局效果 简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用 ...

  7. css的响应式布局和动画

    把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...

  8. 使用现代CSS的响应式版面

    为一个网站选择类型尺寸是项艰巨的任务. 标题和段落的尺寸在网页布局和可读性方面处理起来很棘手. 谢天谢地, 我们有模块化缩放可以引导我们. 模块化缩放是一个数字序列以某种方式关联另一个序列. Tim ...

  9. 用CSS实现响应式布局

    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...

随机推荐

  1. 彻底关闭win10的自动更新,一定要坚持看到最后一页

    https://jingyan.baidu.com/article/9faa7231e7b78b473c28cbb6.html 是否好使我还在测试,不好使的话,再跟新 2018-05-20 今天电脑又 ...

  2. 如何将网站部署到tomcat根目录下

    更改前访问:http://192.168.1.2/baby 更改后访问:http://192.168.1.2/ 打开tomcat/conf/server.xml找到 <Host name=&qu ...

  3. 2018.10.20 bzoj1925: [Sdoi2010]地精部落（dp）

    传送门 dp好题. 设f[i][j]f[i][j]f[i][j]表示iii个数结尾是jjj且结尾两个数递增的方案数. 那么显然可以对称的定义出g[i][j]g[i][j]g[i][j]表示iii个数结 ...

  4. 【转】Paxos算法3-实现探讨

    ——转自:{老码农的专栏} 前两篇Paxos算法的讨论,让我们对paxos算法的理论形成过程有了大概的了解,但距离其成为一个可执行的算法程序还有很长的路要走,原因是很多的细节和错误未被考虑.Googl ...

  5. IntelliJ IDEA 2017版 SpringBoot的关闭自动配置和自定义Banner

    一.关闭自动配置 在jar包下找下边的名字    设置关闭自动配置jar    多个的时候配置       二.自定义Banner   (1)网站搜索一个图案.网址:http://patorjk.co ...

  6. 动态链接库编程：非MFC DLL

    设计一个DLL,内含一个函数计算a+b: DLL的组成 .h(头文件) 定义了DLL能够导出的函数.数据结构或类的声明,该文件的声明内容在.CPP文件中实现,而.CPP的源程序被封装到DLL文件中 . ...

  7. day01（静态、代码块、类变量和实类变量辨析 ）

    静态: 关键字:static          概述: 使用static关键字修饰的成员方法.成员变量称为静态成员方法.静态成员变量.    优缺点:   优点:使用时不用创建对象,节约了空间.使得代 ...

  8. 一次简单完整的自动化登录测试-基于python+selenium进行cnblog的自动化登录测试

    Web登录测试是很常见的测试,手动测试大家再熟悉不过了,那如何进行自动化登录测试呢!本文就基于python+selenium结合unittest单元测试框架来进行一次简单但比较完整的cnblog自动化 ...

  9. android2.1中<shape>圆角的bug

    android的兼容性真是一个不可忽略的问题,今天测试时发现使用xml定义Shape drawable在android 2.1上存在bug <SPANstyle="FONT-SIZE: ...

  10. HDU 1166敌兵布阵 2016-09-14 18:58 89人阅读 评论(0) 收藏

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...