[武汉|结业弟子]JS-胡思豪|2016年10月22日的日报-技能树.IT修真院

发表于： 2016-10-22 22:42:55

1 746

今天完成的事情：

完成了任务6-1和6-2

任务6的支持雪碧图和音频播放

链接：

明天计划的事情：开始任务6-3和任务7

遇到的问题&收获：

1.border-width 不能设置百分比宽度，只能设置px,em,rem宽度

border-radius 能设置百分比

2.设置HTML最大宽度，使body居中的方法

使用  margin: 0 auto;

html{

margin: 0 auto;

max-width: 1080px;

min-width: 320px;

}

3.谷歌浏览器中的最小字体是12px，与媒体查询更换根字体矛盾。

解决方法，将根字体设置大一些，再来做自适应。

4.空格&nbps只占一个字节，汉字占两个字节，所以需要打两个空格来占一个汉字字符

5.footer设置为position：fixed时，上方元素需要设置一个padding-bottom（宽度为或大于footer宽度），若上方元素为浮动的，则需在上方元素中设置overflow：hidden，来把上方元素宽度撑起来。

http://www.w3school.com.cn/cssref/pr_pos_overflow.asp

overflow用来清除浮动详解。

6.关于雪碧图的问题：

总结：雪碧图真不好用，包括软件！

1.雪碧图只适合宽高相同的小图标来做，不然不能保证自适应。

2.设置雪碧图图标位置时（ background-position），使用具体的px位置显示成功，但换算成百分比位置时却显示有误差，需要手动微调才行，不懂为什么；

3.为了使雪碧图自适应的方法：（http://blog.csdn.net/kkgege/article/details/49152857

原始图标的长宽需要相等。

n个原始图标横排排列，组成雪碧图

最后设置background-size: n*100% ;

.icon4{ background-image: url(images/CssGaga.png);

background-position: 0 0; background-size: 400% ;}

.icon5{ background-image: url(images/CssGaga.png);

background-position: 33% 0; background-size: 400% ;}

.icon6{ background-image: url(images/CssGaga.png);

background-position: 68% 0; background-size: 400% ;}

.icon7{ background-image: url(images/CssGaga.png);

background-position: 100% 0; background-size: 400% ;}

返回列表