怎么做九宫格！求助
来源：12-4 我还要站个大位置 - 内联块状元素
qq_弦断音垮_0
2015-10-19 13:43
求助啊！！！！
写回答
关注
4回答
-
- sevencuijian
- 2015-10-19 17:05:35
方法一：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>九宫格</title> <style> *{margin:0;padding: 0;} .box{width: 300px;height: 300px;margin: 50px auto;background: red;border-left:1px solid #000;border-top:1px solid #000;} .box span{width: 99px;height: 99px;background: #00aeff;float:left;border-bottom: 1px solid #000;border-right:1px solid #000;} </style> </head> <body> <div class="box"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>方法二：
<!DOCTYPE html> <html> <head> <metacharset="utf-8" /> <title>九宫格</title> <style> *{margin:0;padding: 0;} .box{width: 300px;height: 300px;margin: 50px auto;background: red;} .box span{display: block;width: 99px;height: 99px;background: #00aeff;float:left;border: 1px solid #000;position: relative;margin:-1px 0 0 -1px;_width:100px;_height:100px;} </style> </head> <body> <div class="box"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html> -
- 紫焰123
- 2015-10-19 14:05:48
用table布局，或者用div布局，使用float
-
- Perona
- 2015-10-19 14:05:25
参考代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> .box { overflow: hidden; width: 632px; padding: 10px 0 0 10px; background: red; margin: 100px auto; } .box div { height: 200px; width: 200px; margin-right: 10px; float: left; margin-bottom: 10px; background: yellow; text-align: center; line-height: 200px; } </style> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>大小颜色自己调一下吧
-
- sixGod
- 2015-10-19 14:04:26
<table width="200px" heignt="200px" border="1">
<tr height="50px"><td></td><td></td><td></td></tr>
<tr height="50px"><td></td><td></td><td></td></tr>
<tr height="50px"><td></td><td></td><td></td></tr>
</table>
简单写了个模型，要做成你截图那样的，再加些样式就可以了
初识HTML(5)+CSS(3)-升级版
HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义
1225806 学习 · 18234 问题
相似问题