发表于： 2018-09-28 15:37:01
1 833
一、完成的事：
1. 因为之前写过静态页面所以相对来说容易上手一些，根据任务描述了解到要写一个九宫格需要用到标签和属性。
2. 想了一下不知道从哪里下手，就先去W3C把要用到的属性和标签先找出来，温习一下：
1）浮动 float 来实现格子的换行
2）外边距 magin 实现格子与格子间的间隙
3）边框 border-radius 使格子的角圆滑一点
4）标签 div 来定义每一个格子
5）背景色 background-color 来实现格子的颜色
3. 任务1：九宫格 完成。
二、碰到的问题：
问题1：让所有的格子在页面中居中。（已解决）
处理过程：
1.当时只写了9个div，实现了9个格子但是直接是靠着浏览器窗口左侧的，无法居中
2.后面查资料看到别人写的代码是有两层div，剩下的9个div都包含在一个div里面，然后使用 text-aline：center 属性完成全部的居中。
问题2：九宫格根据页面自动缩放大小。（已解决）
处理过程：
1.使用 width 和 height 定义宽度和高度为 30px，但是并不会随着浏览器窗口缩放。
2.百度发现要使得能根据浏览器缩放必须使用百分比来定义大小，后面都改为30%发现连格子都显示不出来了。
3.继续百度得知，高度 height 的百分比是相对于父元素的高度的，而父元素默认是没有高度的，所以会显示不出来；块级元素的宽度则是默认浏览器的宽度，因此百分比是有效的，宽度就确定了。
4.宽度确定了就差高度了，百度查到可以使用内边距 padding-bottom：30% ，因为这个是在块级元素内向下填充可以使用百分比且是根据父元素的宽度来定义的，所以就可当做格子的高度来使用，高度也就确定了，可以实现自动缩放了。
三、明天的计划：
1. 看一下任务2：认识开发必备工具
2. 再重新复习一遍任务1：九宫格
四、收获：
1.看到自己写出来一个东西还是蛮开心的，虽然很简单，但还是会有点小小的成就感。
2.今天用到的都是些标签、属性等用了就会的东西，距离真正的编程还是有很大的差距，希望自己能保持平稳的心态。
返回列表
评论