发表于: 2016-04-26 20:06:49
1 1487
今天完成的事情:了解了盒子模型,了解了Margin,div id与div class的区别及应用,学习了HTML中的文档标签和<head>标签。大致完成了九宫格任务。
明天计划:继续学习CSS的一些概念,随便看下TASK2。再继续加深对div方面的学习。对F12调试的学习。
遇到的问题:再编写九宫格时,不能居中显示。
收获:今天从一开始决定写代码时,根本一点思路都没有,完全都是蒙的,看完别的师兄写的任务后再重新回过头来一步一步查找,理清思路后进行编写。也了解到了怎么算是浏览器的兼容,viewport的一些概念。
一下为我的代码,还希望师兄弟能帮忙看下那里的问题导致,不能居中。谢谢!
<!DOCTPYE html>
<html>
<style type="text/css">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
.box{margin left:auto;
margin right:auto;
width:40%;
}
.box div{
background-color:red;width:150px;height:150px;margin:5px;border-radius:8px;float:right;
}
</style>
<title></title>
<body>
<div class="box">
<div class="first">
</div>
<div class="first">
</div>
<div class="first">
</div>
<div class="second">
</div>
<div class="second">
</div>
<div class="second">
</div>
<div class="third">
</div>
<div class="third">
</div>
<div class="third">
</div>
</div>
</body>
</head>
</html>
评论