发表于: 2016-04-26 20:06:49

1 1484


今天完成的事情:了解了盒子模型,了解了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>



返回列表 返回列表
评论

    分享到