发表于: 2017-03-09 21:54:21

3 818


今天完成的任务:

 header表头:

    1,使用position:fixed;绝对定位紧贴顶部,并设置z-index层次、text-align使元素内的内容水平居中。

    2,header里的内容,设置一个ul盒子包裹两个图片和投票,但是设置完之后会莫名其妙的出现一个padding-left值

解决办法:使用padding:0 清除。之后因为“投票”只是水平居中,并没有垂直居中在这个盒子,所以在这里要设置个line-height:14px使其居中。

 主题内容:

    1,采用div盒子套盒子的方法,首先设置一个最大的盒子content包括整个内容,width值,因为内容比较多,所以可以不用设置height值,内容自会把盒子撑起来。

    2,之后再里面套一个稍微小点的盒子vote,分别设置float:left、width:24。3%、height:35vw;margin:4.5%,  float浮动盒子水平排列,排满之后会自动换行,因为要使页面始终显示三个盒子,所以要给盒子设置margin:4.5%,width:24.3%、height:35vw;并且不能使用固定值,使其排满整个行。这样每一行始终只能显示三个盒子了。

    3,在vote盒子里套个小盒子box,使用position:absolute默认值,并设置边框border和宽度,同样也不能使用固定值。

    4,在box盒子里再套两个盒子,包括主题的内容信息,唯一需要注意的是自适应,不能使用固定值。

 footer底部:

    基本布局还是position:fixed紧贴底部,

  唯一和之前不一样的是,button按钮没有设置高度,而是使用line-height撑起来的。

遇到的问题:

  1,  投票的四选项,暂未设置。(其实就是不知道怎么设置...)

  2,  audio背景播放器的设置,因为要用到js所以也暂时没有设置。

明天的计划:

  1,  把投票的四选项,布局好,audio去找百度娘吧,了解下js吧,不会写,先抄一个样式。

  2, 然后开始整理这几天找到的小课堂内容,准备小课堂

  3,之后如果还有时间的话,可以再完善下任务六。


返回列表 返回列表
评论

    分享到