发表于: 2019-06-29 22:52:48

2 839


今日完成的任务:


1.理解css盒子模型的结构概念和常见用法

https://www.runoob.com/css/css-boxmodel.html

这个链接里讲到的东西应该算比较清楚了,尤其是盒子模型的结构,对于初学的小白理解起来不难,只是我刚开始有点着急,没好好看盒子结构,走了点弯路。


2.在师兄的讲解下,慢慢地理解结构以后,写了一个固定宽高的九宫格 代码如下:

<!doctype html>
<html lang="en">
<head><meta charset="utf-8">
<title>九宫格</title><style>
div{ width:100px;
height: 100px;
padding :100px;
border:20px cornsilk;
margin:20px;
background-color: chartreuse;
float: left;
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>


说实话,我感觉我这个代码写的很简单 很呆,可能主要还是为了让大家记住盒子模型的基本结构和熟悉常用相关属性单词的用法,所以对大家的要求好像并不高。

 


3.熟悉盒子结构以后,根局任务要求,完成美化,自适应,外联,代码如下:

<!doctype html>
<html lang="en">
<heaad>
<meta charset="utf-8">
<title>任务一九宫格</title>
<link type="text/css" rel="stylesheet" href="jiugongge2.css">
</heaad>  
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>


div {
padding-bottom: 31%;
width: 31%;
margin: 1%;
background-color:orange;
float: right;
border-radius: 5%
}

 其实走到这一步以后再回头看,这个九宫格的任务真的挺简单的,核心就在于对于盒子结构的理解以及相关常用语句的使用,做出符合要求的九宫格以后,终于有了点成就感,相比第一天一头雾水好多了,万事开头难,相信找对了方法,以后的成长就是经验的积累了,更何况有这么多热心的师兄师姐帮忙,感觉还是挺有信心早日学成毕业的。


遇到的问题以及思考:

       本来我一直以为盒子默认的摆放方式是居中的,想不通为啥我的盒子总是喜欢靠左排列,陈思捷师兄一下给我指出了块集的概念,我才茅塞顿开,之前匆匆扫过块集的概念,因为不明白什么意思,所以根本没当回事,也没太多印象,看来以后还是要多写代码才容易理解理论知识。不仅要多写,更要勇于试错,有什么想法就用代码写出来,运行,想想为啥会这样,为啥没有按照自己本来的想法表现,问题在哪里?该怎么解决。实在想不通再去问师兄,如果能把每一个代码的用法都举一反三,理解透彻,我想迟早会成为大佬。


明天的计划:

       根据要求配置并搭建好服务器,争取圆满完成任务1!








返回列表 返回列表
评论

    分享到