发表于: 2017-04-02 23:31:46

1 573


任务进展:

       1:完成了页面的footer布局。

       2:增加了导航栏的细节样式。

       3:增加了战略合作企业部分图像悬停的阴影效果,以及链接指向合作企业页面。

       4:完成了合作企业页面布局。

       5:思考问题:

                   1:css sprites是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用css的background-position属性定位显示,这样一来,当访问该页面时,载入的图片就不会一幅一幅地慢慢显示,它减少了页面请求的次数,提高了页面性能。

                   2:css 浮动使浮动元素脱离文档流,可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框为止。清除浮动可以对父div设置合适高度,或使用clear:both,或对父div设置over-flow:hidden。

                   3:opacity属性会被子元素继承,而rgba不会。display:none;使元素不显示并不再占据其位置,visibility属性只是隐藏元素,依然占据其位置。

                   4:层叠上下文会按照元素在DOM树中的顺序绘制元素盒模型,每一个z-index数值会创建一个新的层叠上下文。浏览器会根据层叠级数和dom顺序综合起来决定元素绘制顺序。

                   5:手机端使用touch事件实现hover效果。

遇到问题:

       1:由于在psd页面下方copyright行上部,有一条线宽度为100%,为显示这条线,方便起见,将绿色区域分为两部分,copyright部分置入footer,上部归入页面主体部分,其内部分为三部分,使用flex完成。

       2:在导航栏左侧加入技能树图标,调整导航列表选项高度和背景色,悬停时显示border-bottom并设置其宽度,达成效果。

       3:使用box-shadow属性设置图像悬停阴影效果,添加锚指向合作企业页面。

       4:合作企业页面div设置百分比达成分栏的效果,左栏内部使用bootstrap栅格系统内嵌列表完成,使用列表自带标志时会有定位问题,所以去除自带标志,使用div和border-radius属性自行画小圆圈,避免定位问题,而且在设置列表悬停时可自定义小圆圈样式。右栏内部图像浮动,调整边距完成显示。

明日计划:

       书写职业页面布局。

收获:

       掌握了链接的使用方法和样式编写。


返回列表 返回列表
评论

    分享到