发表于: 2017-03-04 22:58:41
0 960
今天完成的事情:
解决了昨天任务7中第2个页面浏览器宽度变化中间导致的中间和下面的空白区域,完成了第3个页面的布局,并成功提交了任务7。
提交成功任务后,利用晚上的时间把任务7中的布局和代码重新回顾、复盘了一遍,将其中运用不是很熟悉的代码又重新敲了一遍,并进行相应调试、查看效果、增强理解和记忆。
明天计划的事情:
学习CSS动画和轮播图的相关知识,开始做任务8。
遇到的问题:
开始是用 空格来进行间隔的,但后来发现用空格不太好把握、也不太精确,联想到前两天小课堂隐藏的知识,就用visibility: hidden进行了解决;
做完任务之后参考其他人的代码,看到有师兄写有font-size:0的代码,在页面调试中间距有细微变化,但不清楚具体原因及影响。后来经过查找资料,明白了
在firefox,safari,opera,ie8+中的 inline-block 元素之间会莫名其妙多出3px的间距,其实这个是换行符。可以在inline-block的父元素中加上 font-size:0;然后在 inline-block中将字体设回来,然后就可以消除这多出来的3px的间距。
收获:
学会了根据不同窗口宽度大小来设置根字体,从而通过rem来进行一定程度的自适应。
@media screen and (min-width: 360px) and (max-width: 374px) {
html {
font-size:121px;
}
}
@media screen and (min-width: 375px) and (max-width: 411px){
html {
font-size:132px;
}
}
@media screen and (min-width: 412px) and (max-width: 640px) {
html {
font-size:150px;
}
}
@media screen and (min-width:640px)
{
html { font-size: 191px; }
}
学会了给按钮加上链接的2种方法:
评论