发表于: 2017-03-29 19:52:53

1 1315


今天完成的事:复盘项目公共部分(导航栏和底部),页面的切换,重新拆了下禅道的task。

明天计划的事:首页的banner图轮播、最新职位的轮播、首页的整体样式。

困难:

1.许久不用bootstrap,很不熟悉,今天终于有些熟悉回来了,在导航栏768px时变成按钮触发的下拉列表时卡了许久,因为一直在点击按钮时一瞬间下拉列表宽度只有100px左右,接下来才会变成想要的样式,后来发现是bootstrap里有个父级元素限定住了,给加了个绝对定位,设了个z-index就好了。

2.导航栏鼠标放上去的时候会有个动画效果(链接底部边框从中间延伸到两侧),用hover和border-bottom来设不出来,只能边框慢慢变粗,后来找了好久都不行,只有加一个i标签来当做链接的下划线,然后加

 transition: width .2s;
   -moz-transition: width .2s; /* Firefox 4 */
   -webkit-transition: width .2s; /* Safari Chrome */
   -o-transition: width .2s; /* Opera */
}

.header-nav-right a:hover .header-nav-right-underline {
   width: 100%;
}

效果是出来了,但是只会从左往右延伸,不能从中间延伸,被我想的很复杂,倒腾了半天没出来,最后在父元素设个text-align:center就可以了。。。。

收获:

1.对bootstrap更加熟悉了,搁置久了要熟悉也需要一点时间,今天就感觉比昨天好多了,就是有时候需要自己调整样式的时候会需要!important去覆盖bootstrap的自带样式。

2.对动画效果更加了解了,可以自定义(利用animation、@keyframes),也有一些自带的动画(比如今天用到的width)。

3.对项目的框架更为了解了,比如需要封装一些接口:

getBanner:function (type) {
   return $http.get(path.bannerUrl(type))
}
//banner
bannerUrl:function (type) {
   return "carrots-ajax/a/article/search?type="+type
},



返回列表 返回列表
评论

    分享到