发表于: 2017-03-07 22:46:19
2 627
今天完成的事情:
今天开在做任务8的第一页,做了有一小半。本来是想用纯CSS实现轮播图的效果,但搞了快一天发现还是不能实现点击切换的效果,明天还是在网上找别人的代码、用JS实现吧。
明天计划的事情:
完成任务8第1页的布局。
遇到的问题:
开始在网上看到可以用纯CSS实现轮播图,就开始研究并做代码,但弄了好久、做到最后发现只能实现自动轮播的效果,但实现不了手动切换。明天换用JS来实现,但只能拿过来用,研究是研究不了了。
收获:
学会了用Bootstrap清除浮动问题
<div class="row">
<div class="col-xs-6 col-sm-3">div1: .col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">div2: .col-xs-6 .col-sm-3</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">div3: .col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">div4: .col-xs-6 .col-sm-3</div>
</div>
以及使用 .col-md-offset-*
类将列向右侧偏移。
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
评论