发表于: 2017-03-11 21:15:01

1 598


今天完成的任务:

  任务七的第三个页面:

   header表头:

      为了节省时间,header和任务七的第二个页面一模一样...利用position定位,左右两个图片采用浮动float:left、floatright定位。

   内容:

      内容分为三个盒子:背景为蓝色的是一个盒子,黄色的字体是一个盒子,然后背景为白色的是一盒子。


      蓝色部分采用背景图片的插入方式,设置background position:top使其居中紧贴盒子顶部。

      黄色字体部分,首先是给盒子设置一个具体的百分比宽度,然后再设置margin-left值,margin-left的值=100%-盒子的百分比宽度值/2 这样就能使盒子水平居中了。然后再根据需求设定margin-top值。

       白色背景部分:这个部分定位到是挺好定位的,主要是字体间的间隔不好掌握,看了师兄的“隐藏手法”,感觉挺高明的。但是最后还是中规中矩的使用缩放属性text-indent属性来达到间隔的目的。

     footer底部:

       因为两个按钮和footer在一个盒子内,设置隐藏了也就全部隐藏了,

解决方法:通过昨天我讲的z-index的小课堂中找到一种办法。就是让他们两个分开,设置两个盒子,但是设置同样的z-index值,把按钮后设置,采用z-index值后来居上的特性,然后再设置footer的opacity透明就行了。

     明天的计划:

       提交审核任务六、完善任务七的细节问题,之后开始编写任务八



返回列表 返回列表
评论

    分享到