发表于: 2016-08-11 22:47:22
2 1266
今天完成的事情:学的时间太短了,一开始一点头绪没有,后来进一步学习了盒子模型,再参考了网上其他人的代码,今天做一了个九宫格布局
感觉教程里的这张图非常有用,我说一下我对任务1的理解:九宫格是在一个盒子里添加九个浮动的如图的块(向左或者向右浮动都可以因为要限制宽度),盒子要规定尺寸。尺寸可以先在样式里先规定的上边与网页边缘的距离(sorry网页边缘是我编的词但是意思你懂),然后规定一条侧边距离网页边缘的距离,然后用宽度和高度限制它。本次任务不必限制高度因为一共只有九个块排完就没了。盒子的宽度一定要大于三个块的宽度加上四个块的外边距的和,否则块就被挤到下面一排了。也可以仅仅用高度和宽度限制,这样的话九宫格就位于网页的左上角了。
用
margin-left
来添加块左右之间的距离,用
margin-top:
来添加块上下之间的距离,用
border-radius
来添加块的圆角,用
height
width
分别限制块的高度和宽度,用
background-color
添加块的背景颜色。
效果图:
明天计划的事情:继续结合例子学习html与css教程,巩固知识。
遇到的问题:1 规定盒子边缘与网页边缘的距离,用top,没作用。然后用发现用padding-top和margin-top都可以,效果一样不知道为什么。
2 块的圆角,百度。
3 最重要的是语法,对新人来说不知道怎么写的话就是写不出来没得商量,只能看看别人是怎么写的。
4 写到这我才发现我连webstorm怎么保存都不知道,我去看看。
收获:上面的都是收获。
评论