发表于: 2017-03-24 10:32:39

1 562


完成的事情:

完成首页样式,完成关于我们、联系我们页面样式。


计划的事情:

继续其他页面样式。


问题:

“最新职位”和“伙伴之言”部分样式基本相同,使用一个大的盒子包裹翻页箭头,和一个row布局,并使用flex布局的水平对齐功能。由于箭头的凸出,另外使用70%的宽度,信息部分则为父元素90%,并margin居中,然后对内容进行调整即可。

<div class="box-center width-carousel">

    <img src="img/120.png">

    <div class="row">

        <div class="col-sm-3">

            <div class="box">

                <div class="pic"><img src="img/15.png"></div>

                <div class="f16"><b>产品总监</b></div>

                <div style="border-bottom:1px solid #f1706b;width:20px;margin:-8px auto 0;"></div>

                <h6>慕课网</h6>

            </div>

        </div>

        。。。

    </div>

    <img src="img/121.png">

</div>

样式只能说暂时完成,没有加入轮播图功能,到时候回头进行后台信息处理的时候再整。


添加了指向“关于我们”的路由,没有使用子路由功能显示这个页面的右侧信息,而作为其本身内容进行显示、隐藏的切换,所以“联系我们”页面同样处于同一路由下,只能通过“关于我们”页面打开,后面整合时候再看效果,不好就换成子路由。

使用了angular的ng-class属性进行class切换操作,并绑定一个点击方法(由于需要修改其他内容的显示隐藏,否则直接ng-click="aboutState = true/false"),完成切换功能。

<div>

    <div ng-class="{true:'active',false:''}[aboutState]" ng-click="aboutTrue()"><i class="i1"></i><span><b>关于我们</b></span></div>

    <div ng-class="{true:'',false:'active'}[aboutState]" ng-click="aboutFalse()"><i class="i2"></i><span><b>联系我们</b></span></div>

</div>

在样式上,若使用js代码方式完成图片的切换,将有点儿代码量,不够简洁,故使用雪碧图(新学新用),在屏幕小于7XX后,或者说手机屏幕浏览时候,左侧导航跑到顶部,从列显示变成行显示:



收获:

雪碧图的使用。复盘项目的进度。



返回列表 返回列表
评论

    分享到