发表于： 2017-03-10 22:57:11
0 570
今天完成的事情：
1.学了《chrome开发者工具——chrome开发者工具》，了解了一点自适应的知识
2.代码大概的写了出来
明天计划的事情：
1.解决剩下的部分
2.重新梳理任务一，并总结
3.大概了解任务二
遇到的问题：
代码大概的写了出来，在使九宫格自适应时，九宫格的小格子的width和height不一样，无法形成正方形
高度的自适应不知道怎么弄（明天查查，今天就到这了）
（未解决，求帮助）
收获：
一点自适应和怎么用开发者工具，怎么消除横向滚动条
（感觉学的好少，效率低）
PS：代码发在下面（还需要改的代码）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>（高宽不一样）九宫格</title>
<style type="text/css">
.box{ /*每一个小格子（子级）*/
border-radius:20px; /*设置盒子的边角半径*/
background-color:orange; /*设置背景颜色*/
width:31%; /* 长度为父级的百分比 */
height:330px;
line-height:330px; /*和上一行代码组成垂直中心*/
margin:1%; /*边界*/
float:left;
text-align:center; /*内容水平中心*/
border:1px solid red; /*边框属性*/
font-size:30px; /*数字大小*/
color:blue; /*数字大小*/
}
.BOX{ /*包含3个小格子的大格子（父级）*/
width:100%;
margin:0 auto; /*大盒子在网页上水平居中*/
overflow:hidden; /*使父级能自适应高度*/
background-color:white;
}
</style>
</head>
<body style="overflow:scroll;overflow-x:hidden;"> <!-- 隐藏滚动条;内容可以滚动 -->
<div class="BOX">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="BOX">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="BOX">
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
</body>
</html>
返回列表
评论