发表于： 2016-03-08 23:04:06
5 1615
今天完成的事情：做了九宫格。今天上班挺忙的，晚上加班，吃完饭到家都八点多了。希望明天能不要这么忙
明天计划的事情：看编码规范，了解display，了解viewport，试着F12调试
遇到的问题:九宫格昨天是用table做的，就跟表格一个性质。今天改div做，各种问题出来了，还是学的不扎实。开始怎么也不知道怎么水平铺开，后来找了个网页的例子，发现了float，这个见过的属性。后来因为间距跟padding纠结半天，最后用了margin-top，margin-left这两个。果然光看是没用的，一上手就知道了。还有命名的问题，也不知道对不对，明天看看编码规范。
最后做出来的成果，猛地一看还凑活，但细看还有问题，但是太晚了，困得不行，明天再说吧。
收获:认识了float这个属性，又了解了一些盒模型.知道了圆角是用border-radius，对CSS又熟悉了一点。
我贴下我写的
<html>
<head>
<meta charset="UTF-8">
<title>九宫格</title>
<style type="text/css">
#box
{
margin: auto;
width:600px;
height:600px ;
}
#top { }
#content{}
.right
{
margin-top: 0.5%;
border-radius: 25px;
width:33%;
height:33%;
float:right;
background:orange;
}
.left
{
border-radius: 25px;
width:33%;
height:33%;
float:left;
background:orange;
}
.middle
{
margin-left:0.7%;
margin-top:0.5%;
border-radius: 25px;
width:33%;
height:33%;
float:left;
background:orange;
}
#bottom { }
</style>
</head>
<body>
<div id="box">
<div id="top">
<div class="right"></div>
<div class="left"></div>
<div class="middle"></div>
</div>
<div id="content">
<div class="right"></div>
<div class="left"></div>
<div class="middle"></div>
</div>
<div id="bottom">
<div class="right"></div>
<div class="left"></div>
<div class="middle"></div>
</div>
</div>
</body>
</html>
返回列表
评论