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

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

  1. <div class="main">
  2. <div class="box1"></div>
  3. <div class="box2"></div>
  4. <div class="box3"></div>
  5. <div class="box4"></div>
  6. <div class="box5"></div>
  7. <div class="box6"></div>
  8. <div class="box7"></div>
  9. <div class="box8"></div>
  10. <div class="box9"></div>
  11. </div>

3. css代码也不多 : )

  1. * { padding: 0; margin: 0; }
  2. .main {
  3.  
  4. background-color: #fff;
  5. width: 100%;
  6. padding-bottom: 100%;
  7. padding-left: 0.5%;
  8.    padding-top: 0.5%;
  9. }
  10. .main>div {
  11. width: 31%;
  12. padding-bottom: 31%;
  13. border: 1% solid #fff;
  14. background-color: mediumpurple;
  15. border-radius: 3%;
  16. float: left;
  17. margin: 1%;
  18. }

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  6. <meta name="format-detection" content="telephone=no">
  7. <title>九宫格</title>
  8. <style>
  9. * { padding: 0; margin: 0; }
  10. .main {
  11.  
  12. background-color: #fff;
  13. width: 100%;
  14. padding-bottom: 100%;
  15. padding-left: 0.5%;
  16.    padding-top: 0.5%;
  17. }
  18. .main .box {
  19. width: 31%;
  20. padding-bottom: 31%;
  21. border: 1% solid #fff;
  22. background-color: mediumpurple;
  23. border-radius: 3%;
  24. float: left;
  25. margin: 1%;
  26. position: relative; /*父元素给相对定位*/
  27. }
  28. .main .box .content {
  29.   position: absolute; /*子元素给绝对定位*/
  30.   width: 100%;
  31.        height: 100%;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="main">
  37. <div class="box">
  38. <div class="content">
  39. 格子1
  40. </div>
  41. </div>
  42. <div class="box">
  43. <div class="content">
  44. 格子2
  45. </div>
  46. </div>
  47. <div class="box">
  48. <div class="content">
  49. 格子3
  50. </div>
  51. </div>
  52. <div class="box"></div>
  53. <div class="box"></div>
  54. <div class="box"></div>
  55. <div class="box"></div>
  56. <div class="box"></div>
  57. <div class="box"></div>
  58. </div>
  59. </body>
  60. </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. 硬件GPIO,UART,I2C,SPI电路图

  2. 2018.08.28 洛谷P4360 [CEOI2004]锯木厂选址(斜率优化dp)

    传送门 一道斜率优化dp入门题. 是这样的没错... 我们用dis[i]表示i到第三个锯木厂的距离,sum[i]表示前i棵树的总重量,w[i]为第i棵树的重量,于是发现如果令第一个锯木厂地址为i,第二 ...

  3. IntelliJ IDEA 2017版 加载springloaded-1.2.4.RELEASE.jar实现热部署

    1.配置pom.xml文档(详见:http://www.cnblogs.com/liuyangfirst/p/8318664.html) <?xml version="1.0" ...

  4. php读取用友u8采购入库单列表及详细

    <?php class erpData { protected static $erp; public function __construct() { $dbhost ="192.1 ...

  5. 8) pom.xml

    http://maven.apache.org/ref/3.3.3/maven-model/maven.html 执行mvn命令的时候默认文件名pom.xml 也可以通过 -f 指定 比如 mvn - ...

  6. mysql中要根据某个逗号分割的字符串关联查询另一张表的数据

    首先观察下面的查询 select * from company where f_id in ('210','205','208') select * from company where f_id i ...

  7. 类之间关系理解:组合>聚合>关联>依赖;实现,继承

    类之间关系理解:组合>聚合>关联>依赖:实现,继承 1. 从类之间的关系来看,不外乎以下几种 组合>聚合>关联>依赖:实现,继承 且可以分为以下两类: (1)实现, ...

  8. MFC中开发ocx控件,html容器收不到ocx的事件Event

    问题背景: MFC开发ocx控件,主窗口就是ctrl类,主窗口类中调度接口和事件映射添加,执行OK,外部html容器中接收事件成功,如下: ctrl.h中声明事件映射函数 void EVTPENSIG ...

  9. node 命令行

    问题起源于,想用node执行命令行的命令. 结论如下:两种情况 1.node本身的命令(node app.js):使用child_process模块的四个方法 2.命令行的命令(包括1,还有java) ...

  10. 21 Guns -- Green Day

                            21 Guns Green Day (绿日乐队)的代表曲之一.歌曲的主题是反战,同时安慰了曾 经信任布什政府如今失望透顶的美国民众.这首歌也被电影< ...