发表于： 2016-03-26 23:18:51
1 1467
今天完成的事情：1，成功写出了九宫格的代码（不知道算不算成功，至少效果图一样）
2，完成了nginx的简单配置 3，F12开发者工具
明天计划的事情：完成手机支持，并开始下个任务
遇到的问题：主要是DIV布局定位掌握不是很好，目前只是使用了浮动定位，还需要尝试一下其他的定位方法。
收获：靠自己的学习和思考做出了想要的效果，很大的成就感。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NINE TABLE</title>
<style type="text/css">
#bigbox{
width: 308px;
height:308px;
border:1px solid white;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
#loneRone{
width: 100px;
height: 100px;
margin: 2px 2px 2px 2px;
background:orange;
float: right;
border-radius: 5px;
}
#loneRtwo{
width: 100px;
height: 100px;
margin: 2px 0 2px 2px;
background:orange;
float: right;
border-radius: 5px;
}
#loneRthr{
width: 100px;
height: 100px;
margin: 2px 0 2px 2px;
background:orange;
border-radius: 5px;
}
#ltwoRone{
width: 100px;
height: 100px;
margin: 0 2px 2px 2px;
background:orange;
float: right;
border-radius: 5px;
}
#ltwoRtwo{
width: 100px;
height: 100px;
margin: 0 0 2px 0px;
background:orange;
float: right;
border-radius: 5px;
}
#ltwoRthr{
width: 100px;
height: 100px;
margin: 0 2px 2px 2px;
background:orange;
border-radius: 5px;
}
#lthrRone{
width: 100px;
height: 100px;
margin: 0 2px 2px 2px;
background:orange;
float: right;
border-radius: 5px;
}
#lthrRtwo{
width: 100px;
height: 100px;
margin: 0 0 2px 2px;
background:orange;
float: right;
border-radius: 5px;
}
#lthrRthr{
width: 100px;
height: 100px;
margin: 0 2px 2px 2px;
background:orange;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="bigbox">
<div id="loneRone"></div>
<div id="loneRtwo"></div>
<div id="loneRthr"></div>
<div id="ltwoRone"></div>
<div id="ltwoRtwo"></div>
<div id="ltwoRthr"></div>
<div id="lthrRone"></div>
<div id="lthrRtwo"></div>
<div id="lthrRthr"></div>
</div>
</body>
</html>
返回列表
评论