今天完成的事情:
1、根据闯关师兄指出的问题,对task7、task8和task11进行了修改。
明天计划的事情:
遇到的问题:
1、任务8和7一样,主要的问题就是中间宽度不固定,固定的是两边padding,这就导致了问题;
2、task9的右下角挤在一起了,这个好改;
3、input的按钮和select的图标没有换,是可以换的,原本没有注意到
4、重写的task9也该改用固定中间内容去的宽度,突然发现都是1200px的宽度,chrome和Firefox显示的宽度竟然是不一样的(都是默认的100%缩放),将chrome缩放到125%二者的显示效果才相同,难道这就是浏览器的兼容性问题吗?我试了一下,百度在二者的默认的显示效果也是不同的...,百分比宽度倒是OK的;
5、还是浏览器的兼容性,task11的问题
头像貌似没有自适应,其实是做了自适应的,在Firefox中显示也是正常的,但是在chrome中就成这样了,原因就是上一篇日报提过的,chrome的最小的font-size的问题,改起来太麻烦,打了个补丁也看不太出来;
1、在动手写之前还是应该对大概怎样布局,用什么形式布局有一个规划,再动手写页面,看看前几个任务的页面,当时花费了很长时间在反复的改,都和没有提前规划有关系;
2、input的按钮有两种方法可以改,一种是先隐藏默认单选框的按钮样式,在用背景图插一张图,或者把一个元素写成按钮样式插进去,原理是一样的,我用的是把元素写成按钮的样式插入进去,关键点有两点,第一点是要将原有样式隐藏,可以用visibility或者opacity都可以,第二点是使用checked选择器,模拟radio被选中的状态,这样才可以让插入的选中状态的元素或者图片出现;其余还有注意的就是将input套在label里面比较容易定位图片,使用checked选择器后面要一层一层递进,不要跳跃;
3、input是不支持before选择器的,但是支持after;
4、针对chrome的兼容性,响应式布局的时候尽量还是少使用rem来确定元素的大小和位置,使用百分比,使用rem的时候呢,还是要令1rem=100px,避免最小字体限制导致的问题;
评论