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. 使用JConsole监控HBase内存状态

    使用JConsole或者VisualVM等工具监控HBase状态时,需要修改HBase的配置文件,以解决随机端口问题. 文件名:hbase-env.sh export HBASE_JMX_BASE=& ...

  2. tomcat 时间相差8个小时，百度上查到的，备份下

    通常网上一查都是 修改 tomcat 的参数 ,如catalina 文件,jvm parameters 等.如果都不起作用,可以使用如下方式.. 你可以修改jdk的时间校正了,你这么来.进入 \hom ...

  3. 百度词汇检索，计算PMI值

    '''词汇检索百度返回值,并且计算PMI值的类''' from bs4 import BeautifulSoup import requests import re import pandas as ...

  4. 利用ajaxSubmit()方法实现Form提交表单后回调

    1.      背景 最近在工作中,需要实现网页端图片上传到FTP服务器的功能.上传文件是用Form表单提交数据的方法向后台传输文件流,在此遇到了一个问题:后台在处理完图片上传功能后,需要向前台回传是 ...

  5. 删除k8s中一直处于Terminating的资源

    1.将所有的etcd中的key值取到一个keys.yam里面,便于查询 ETCDCTL_API=3 etcdctl get "" --from-key > keys.yaml ...

  6. spring mvc 文档哪里有

    官方: http://docs.spring.io/spring/docs/4.2.0.RC1/spring-framework-reference/htmlsingle/#spring-web Th ...

  7. wadl 的自动生成（cxf版本3.1.1）

    官方文档 http://cxf.apache.org/docs/jaxrs-services-description.html 举例: package cn.zno; import javax.ws. ...

  8. Android:手把手教你打造可缩放移动的ImageView（上）

    定义ImageView,实现功能如下: 1.初始化时图片垂直居中显示,拉伸图片宽度至ImageView宽度. 2.使用两根手指放大缩小图片,可设置最大放大倍数,当图片小于ImageView宽度时,在手 ...

  9. CF1096D Easy Problem(DP)

    题意:给出一个字符串,去掉第i位的花费为a[i],求使字符串中子串不含hard的最小代价. 题解:这题的思路还是比较套路的,    dp[i][kd]两维,kd=0表示不含d的最小花费,1表示不含rd ...

  10. java中如何通过Class获取类的属性、方法、注释

    public static String getPKName(Class clazz) { Field[] fields = clazz.getDeclaredFields(); for (Field ...