css 实现九宫格
2024-09-07 08:47:52
1.自己写了一个，写完对比了下别人写的发现自己写的太low.故就不写自己太差劲的了。
别人写的我总结优化了一下，如果不用写内容去掉position,content简单也是可以的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.box-wrap {
text-align: center;
background-color: #d4d4f5;
border:1px solid #FF0000;
overflow: hidden; /*为了清除浮动*/
}
.box-wrap>div {
width: 31.33%;
padding-bottom: 31.33%;/*是父级元素的宽度的百分比*/
margin:1%;
border-radius: 10%;
float: left;
background-color: orange;
position:relative;
}
.content {
position:absolute;
width:100%;
height:100%;
border-radius: 10%;
}
</style>
</head> <body>
<div class="box-wrap">
<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>
2.也可以使用伪元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.box-wrap {
text-align: center;
background-color: #d4d4f5;
border:1px solid #FF0000;
overflow: hidden; /*为了清除浮动*/
}
.box-wrap>div {
width: 31.33%;
padding-bottom: 31.33%;/*是父级元素的宽度的百分比*/
margin:1%;
border-radius: 10%;
float: left;
background-color: orange;
position:relative;
}
.box:after {
position:absolute;
content:"格子";
display:block;
width:100%;
height:100%;
border-radius: 10%;
}
</style>
</head> <body>
<div class="box-wrap">
<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 class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
最新文章
- vim安装中文帮助手册
- 3Sum algorithm - 非常容易理解的实现 （java)
- .NET截取指定长度汉字超出部分以"..."代替
- Java广度优先爬虫示例(抓取复旦新闻信息)
- sqlite--代码操作
- 了解 Windows Azure 存储的可伸缩性、可用性、持久性和计费
- 使用vs2010打开VS2013的工程文件
- Java面向对象设计
- Python学习--22 异步I/O
- 简单poi创建execl
- zabbix 与 nginx （五）
- Linux 安装本地 yum源
- 『C++』STL容器入门
- wamp 安装monggo扩展
- c++ 派生类的复制函数次序，及子父类兼容性
- linux命令生成公私钥
- couldn't import dot_parser
- 后端生成二维码 - C#生成二维码（QR）
- [LintCode] 带重复元素的排列
- JavaScript的type属性等于text/html 例子