发表于: 2017-04-06 22:49:00
14 661
老实讲,感觉这个任务对我来说还是比较吃力的,做到后面思维就开始混乱了,等一下这个样式,
等一下换那个样式,晕~,香菇。最终将师兄/姐的任务代码重新缕了一遍才勉强依葫芦画瓢做出来,知
道这样不好,但只有慢慢消化了。
一、今天完成的任务
1、背景布局(task5-1)
背景部分分为两部分,个人头像以及文字介绍。其中文字内容分为个人信息及地址内容。
1)因为文字信息都在背景图片之上,图片以背景图显示
2) 个人头像的圆形以 border-radius:50%表示
3)文字内容以padding及margin值定位
2、主体内容布局
1)导航布局
左边竖线以border表示
2)内容布局
内容以ul,li布局,样式相同的文字采用统一的选择器,以padding及margin值定位
3、底部布局
采用button标签,两个按钮样式大致相同,采用浮动布局
二、遇到的问题
1、主要还是思维,思路不清晰;再加上还是缺乏耐心,像织毛衣一样,一定要静下心来
2、另一个是各个部分的长宽及文字大小问题,因为要实现自适应使用百分值,只能估算
三、明日计划的事
消化task5-1,完成task5-2
四、收获(学到的知识)
background-size是css3中新增的属性,background-size的cover特定值会保持图像本身的宽
高比例,将图片缩放到正好完全覆盖定义背景的区域。
评论