发表于： 2016-05-20 01:19:45
4 908
5月19号的日报写的晚了，加班加点完成19号的计划。
今天完成的事情：
1、完成CSS基础（至定位）的学习；
2、初步使用div布局了一下九宫格。试验了好几次：
第一次：没有设计样式，直接用
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
展示的结果就是
1
2
.
.
.
9
第二次是将div嵌套
<div>1<div>2</div></div> ，结果还是如第一次。然后返回HTML布局一节，看了例子，加上样式，重点是看见了css的浮动图示，float：left;九宫布局初步出现。
第三次是倒圆角怎么实现
这个刚开始想着绝对定位，在出现圆角的地方再来一个<div></div>的圆,可是圆又不知道怎么实现，后来想到百度“border样式”，不成功。换了搜索“border圆角”出现了border-radius（这个还需要详细看看），初步完成九宫格布局。
明天计划的事情：
1、继续看盒子模型
2、熟悉F12的调试
遇到的问题：
我将大盒子（装九宫格的）放在<body>中与放在<div>中一样可以实现效果，对文档模型还不理解，同时我将大盒子模型设置宽度设置为615px， 小盒子模型margin设置为5px,如果是外边距合并，那么宽度设置为610px就应该足够，可是事实是显示不出九宫的布局，所以对外边距合并理解仍不到位；如果宽度很大，同样显示不出九宫格的布局，有没有办法使九宫格的布局不受多余宽度影响，这个也要思考。所以还得对定位和盒子模型再看看。
(今天看了外边距的塌陷基本对上述的疑惑有所了解）
收获：
能够初步完成九宫格布局的显示，了解了CSS。
返回列表
评论