发表于： 2016-04-02 20:30:51
2 1523
今天完成的事情：学会了盒子模型、display、支持手机、F12调试，安装了Webstorm2016，并进行九宫格制作。
明天计划的事情：清明回家赶车，得请一下假。
遇到的问题：虽然了解了基础知识，并对CSS、HTML代码有所领悟，但实际动手时还是有些不懂，如：
#container{
width: 250px;
height: 250px;
padding: 10px ;
background: white,center;
}
其中#container这里为什么要用#和container，调试代码后发现，container是容纳九宫格的区域，前面的#应该是固有的符号，删掉后区域就不见了，看来还得加强基础；同时background这里是合并了background与background-position，我调试了一下，background-position里的center合并到background里是直接在white后加' , '隔开，不知规不规范，其对效果无影响。
.four{
width: 68px;
height: 68px;
background: #F65;
float: left;
margin: 5px;
border-radius: 5px;
}
定义九宫格块的部分，同样，对为什么用four有疑惑，以及前面为什么要有' . '，如果能帮忙指出是哪一部分的知识就更好了；
收获：学习到了使用英语版软件对练习的重要性；能够对简单的代码进行解读，调试，了解每部分的功能，但对其所以然还需要加强；初步学习了display的知识，简单理解了其应用，尚待深入。
总结：需要投入大量时间进行基础的补完，在完成Task的同时搭建知识体系。更重要的是，求指导。
以下是整个代码，参照了学号845的同学（多谢po出），请严厉地批判吧。
<!DOCTYPE>
<html>
<meta name="九宫格" content="width=device-width, initial-scale=1" />
<head>
<style>
body{
width: 555px;
height: 555px;
background: white;
margin: auto;
}
div{
margin: auto;
}
#container{
width: 250px;
height: 250px;
padding: 10px ;
background: white,center ；
}
.four{
width: 68px;
height: 68px;
background: #F65;
float: left;
margin: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<div>
<div id="container">
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
</div>
</div>
</body>
</html>
返回列表
评论