css实现响应式九宫格效果
2024-09-17 05:17:58
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元素,我们可以在这个标签内添加图标文字,组成一个好看的导航栏 : )
好啦,本次的分享就写到这里啦, 不懂的可以在下面留言 : )
最新文章
- 地铁沉降观测数据分析之巧用VBA编程处理
- Android权限安全(1)自定义,检查,使用权限
- css样式兼容不同浏览器问题解决办法
- 20145305 《Java程序设计》第2周学习总结
- SSIS Error Code DTS_E_OLEDB_NOPROVIDER_64BIT_ERROR
- Json.net 同过 JsonConverter 调整导出值(未完成)
- Hibernate学习之表一对多,多对一关系
- Java基础知识强化80:Math类random()方法的小扩展(控制产生目的数字的概率)
- hbase总结(二)-hbase安装
- WPF对于xml的简单操作(下)绑定ListView
- 主从集群搭建及容灾部署redis
- OpenGL ES 响应屏幕旋转 iOS
- tcpdump抓取HTTP包【转载】
- ios7 以后准确获取iphone设备的MAC(物理地址)
- 微信小程序开发——简记
- [原]CentOS7安装Rancher2.1并部署kubernetes (一)---部署Rancher
- odoo10源码win系统开发环境安装图文教程
- weblogic连接池过小导致TPS呈周期性跳坑现象
- mybatis知识点(已掌握)
- ROCKETMQ——2主2从集群部署