发表于: 2017-03-04 22:58:41

0 960


今天完成的事情:

解决了昨天任务7中第2个页面浏览器宽度变化中间导致的中间和下面的空白区域,完成了第3个页面的布局,并成功提交了任务7。

提交成功任务后,利用晚上的时间把任务7中的布局和代码重新回顾、复盘了一遍,将其中运用不是很熟悉的代码又重新敲了一遍,并进行相应调试、查看效果、增强理解和记忆。


明天计划的事情:

学习CSS动画和轮播图的相关知识,开始做任务8。


遇到的问题:

开始是用&nbsp空格来进行间隔的,但后来发现用空格不太好把握、也不太精确,联想到前两天小课堂隐藏的知识,就用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种方法:

<INPUT TYPE="submit" value="建站资源网" onclick="location.href='http://www.jzzy.com'">
<href="task7-1.html"><button class="again">再来一局</button></a>




返回列表 返回列表
评论

    分享到