发表于： 2017-03-03 19:10:40
3 564
今日完成任务：初步完成了以div为基础的九宫格网页，但是不是很清楚是否符合任务要求。
今日收获：
1：深入了解了盒子模型，盒子模型被反复强调特别重要，所以一开始要对盒子模型有正确的认知，由内到外分别是 content padding border margin；
2：了解了块状元素block（以div为代表）非块状元素（以span为代表）两者特征及区别，并学会了使用display标签对块状元素和非块状元素进行转换进行页面排布并利用display完成了一个不太标准的九宫格；
3：学习了浮动相关知识，float标签，以及clear标签，并初步完成了九宫格页面
明日计划：
了解自适应相关，完成任务1相关步骤，学习相关知识
以下是利用float完成的相关代码
<meta charset="UTF-8">
<title>欢迎大家观看我的第一个网页</title>
<style>
#a1{float:left}
#a2{float:left}
#a3{float:left}
#a4{float:left;clear:left;}
#a5{float:left}
#a6{float:left}
#a7{float:left;clear:left;}
#a8{float:left}
#a9{float:left}
div{width:200px;height:200px;margin:20px;background:yellow;border:30px red solid;}
</style>
</body>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div> <p></p>
<div id="a4"></div>
<div id="a5"></div>
<div id="a6"></div> <p></p>
<div id="a7"></div>
<div id="a8"></div>
<div id="a9"></div>
<body>
</html>
返回列表
评论