css实现响应式九宫格效果
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实现响应式九宫格效果的更多相关文章
- Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
- 手机端的tab切换,响应式切换效果
之前写过这些tab切换的效果,无论网页上还是手机端,网上也有很多的例子,这个好像是我参考网上,也不知道是哪里的了.总结了一下,就当保存下来了把. <!DOCTYPE html > < ...
- CSS:响应式下的折叠菜单(条纹式)
原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs 写在之前,关于如何制作响应式的下拉菜单:响应式下的下拉菜单 之前,我写了一篇关于怎么 ...
- CSS制作响应式正方形及其应用
CSS制作响应式正方形?什么鬼?干嘛用的?干嘛用的没人有每人的需求,本人也正好是由于公司正在做的业务须要,想做个照片展示的功能(当然得符合响应式了).而这个照片展示必须符合下面几点功能:1.用三张图片 ...
- CSS实现响应式布局
用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...
- css实现响应式布局的相关内容
所以我就在做自适应的时候查了一些资料 首先我发现一个问题:有响应式布局和自适应布局两种布局效果 简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用 ...
- css的响应式布局和动画
把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...
- 使用现代CSS的响应式版面
为一个网站选择类型尺寸是项艰巨的任务. 标题和段落的尺寸在网页布局和可读性方面处理起来很棘手. 谢天谢地, 我们有模块化缩放可以引导我们. 模块化缩放是一个数字序列以某种方式关联另一个序列. Tim ...
- 用CSS实现响应式布局
响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...
随机推荐
- div 自适应宽度
div 自适应宽度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- Caused by: java.lang.NoClassDefFoundError at com.jc.zm.ZmAlarmAction.analyDo(ZmAlarmAction.java:198)
ZmPlanDayAction objPlanDay = new ZmPlanDayAction(); objPlanDay.setDao(dao); objPlanDay.setServle ...
- 20155211 2016-2017-2 《Java程序设计》第七周学习总结
20155211 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 第十二章 Lambda Lambda表达式中this的参考对象以及toString()的接受 ...
- Java(Android)线程池[转]
介绍new Thread的弊端及Java四种线程池的使用,对Android同样适用.本文是基础篇,后面会分享下线程池一些高级功能. 1.new Thread的弊端执行一个异步任务你还只是如下new T ...
- 20155320 2016-2017-2 《Java程序设计》第7周学习总结
20155320 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 时间与日期 认识时间与日期 时间的度量 GMT(Greenwich Mean Time)时间 ...
- Bug中的中的小问题编程需要注意
Bug中的中的小问题编程需要注意 1. 关于局部变量与全局变量是否同名问题 如果参数传递的是一个数组,且全局变量与参数数据同名,则局部变量作用域中,这两个同名的数据可能会引起冲突. 如下:如果一开始是 ...
- LINUX中关于SIGNAL的定义
/* Signals. */ #define SIGHUP 1 /* Hangup (POSIX). */ #define SIGINT 2 /* Interrupt (ANSI). */ #defi ...
- 集合(二)LinkedList
上一篇中讲解了ArrayList,本篇文章讲解一下LinkedList的实现. LinkedList是基于链表实现的,所以先讲解一下什么是链表.链表原先是C/C++的概念,是一种线性的存储结构,意思是 ...
- plsql高版本无法设置Fixedsys字体解决办法(win7&winXP适用)
http://hi.baidu.com/crsky2008/item/c174c9fb52577919e3e3bd6b 设置如下:Tools->Preferences->Oracle-&g ...
- ActiveMq 配置多队列
一直在赶项目,好久没有写博文了,中间偶尔有些代码什么的,也都是放到github了,不过大多都是测试代码,毕竟有些成型的东西是给公司写的,鉴于职业道德,还是不好公开. 言归正传,这两天在接入第三方的收费 ...