今天主要做的事情: 完成了任务2-桌游精灵的css部分

明天要做的事情:　进行任务2-桌游精灵的js部分

遇到的问题:

1.       background-image的格式

background-image: url(/pic/pic.png);注意斜杠

2.       给body设置了width和height

然后添加了背景图片,为什么背景图片覆盖了整个浏览器窗口(超出了body的范围);

但如果给一个普通div元素这么设置, 就不会超出

3.       父元素A的第一个子元素B设置了margin-top,结果撑开父元素A与更上级元素(body)的间距,父元素A与子元素B的距离不变.

这是一个BUG, 原因是一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。(来自搜索)

所以解决方法是给父元素加一个padding-top 或者border-top

4.     margin.padding 的单位是父元素的width

但是元素设为absolute之后,top left等用的是父元素对应的height width

5.     p元素使用absolute定位,似乎位置不准确. 换成div元素就正常了.暂未找到原因.

6.     http://www.w3cschool.cn/css/css-scrollbar.html 滚动条的设置

7.       引入bootstrap框架

似乎是要把把相关的文件丢进去.

然后发现webstorm在创建project时可以选择使用bootstrap框架,比较方便.

然而目前并没有实际用到相关内容.

主要收获:

1. 提高了css布局的熟练度

2. 了解了滚动条样式设置,音频播放设置