发表于: 2017-03-26 23:54:21

2 625


今天完成的事:完成了task6的编写,过程中使用overflow出现了些问题,比如针对几个div组成的content中overflow:auto失效,结果我在几个div外面再加个div,然后在主content添加overflow属性就成功了;能用float浮动就多用点,少用绝对定位,今天多用了2个absolute导致了修改代码后自适应没了。。。。而且谷歌和火狐的分辨率不一样更加让响应式GG了。。。对于task6,除了header和footer之类必须用fixed,对于其他应该多用其他来布局比如flex,对于task6的完成能加快很多(之前还是对2个绝对定位没有太多的认知,错误的使用浪费了很多时间,就如同“任务详解”里面写的,做任务前要先把布局先想好,然后不要急着敲代码,应该多想想是否能用相对方便的布局解决任务要求,而不是写繁琐的布局)。

这次task6需要一些垂直居中的方法,针对不一样的内容比如图片文字,使用vertical-align:middle、text_align: center、margin:0 auto等,但要注意各自对应的div属性,是块状的还是行状的。

今天还顺便看了task7新的html5和css3的新标签,但对于range input.......还有当中的函数还是没看进去,(不过当中的各类css设置倒是直接看明白了,代码敲得多果然会熟练)。


明天计划的事:继续task7.


遇到的困难:range input还是有点懵逼,overflow:auto的使用还是不够熟练。


收获:overflow:hidden清除浮动很好用,这次用在task6也比较舒服。查看百度的时候发现了一段经验,针对clear: both用overflow:hidden代替对于父元素自适应更符合。

下面box为父元素:#box{ 

          width:500px; 

          background:#000; 

          height:500px;

 } 

#content { 

          float:left; 

          width:600px; 

          height:600px; 

          background:red;

 }


返回列表 返回列表
评论

    分享到