发表于： 2016-04-19 22:37:51
1 2002
今天完成的事情：继续慢慢啃bootstrap，试着做task10.
明天计划的事情：还是继续bootstrap
遇到的问题：看了一大堆bootstrap的东西，但是真的当自己做的时候就完全摸不着头脑或者用了框架进去确是乱的。特别是导航部分，看了好几个小时也还是没有做出像样的来，最后只好参考师兄代码暂时用到。
还有就是栅格布局的时候设置了相应的列宽，但是屏幕缩小后达不到设置的列宽效果，比如：
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 text-center">
<div class="advantage">
<div class="advantage1 ">
<i class="img efficient-img"></i>
<h3>高效</h3>
<p>将五到七年的成长时间，缩短到一年到三年。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 text-center">
<div class="advantage1">
<i class="img standard-img"></i>
<h3>规范</h3>
<p>标准的实战教程，不会走弯路。</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 text-center">
<div class="advantage1">
<i class="img contacts-img"></i>
<h3>人脉</h3>
<p>同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 text-center">
<div class="advantage1">
<div>
<p><i class="img icon-1"></i><span>12400</span><br/>
累计在线学习人数</p>
<p><i class="img icon-1"></i><span>12400</span><br/>
学员已经找到满意工作</p>
</div>
</div>
</div>
</div>
</div>
css部分：
*{margin:0;padding:0;}
p{margin:0;padding:0;}
html{width:100%;font-size: 62.5%;}
body{
font-family: "Microsoft YaHei", serif;
font-weight: normal;
background: #fafafa;
}
.header-top .span{
color:#29b078;
font-size:1.4rem;
margin-left:10%;
}
.img{display:inline-block;background:url(images/img.png) no-repeat;}
.weibo{
height:25px;width:25px;background-position: -38px 0;
}
.qq{
height:25px;width:25px;background-position: -63px 0;
}
.weixin{
height:25px;width:25px;background-position: -13px 0;
}
.efficient-img{height:63px;width:45px;background-position: -115px 0;}
.standard-img{height:55px;width:60px;background-position: -215px 0;}
.contacts-img{height:55px;width:55px;background-position: -160px 0;}
.icon-1{height:13px;width:13px;background-position: 0 0;}
.advantage1 p{
font-size: 1.6rem;
color:#999;
line-height: 2.6rem;
}
.advantage1 h3{
margin:30px 0;
}
结果屏幕缩小后是这样的：
应该是我经验不足吧，反复检查代码还是没有查出是什么问题导致的，但可以肯定的是问题出在我自己加的css里面，因为没有我的css就有栅格效果。还请能看到的湿胸湿姐帮忙看看，先谢谢了orz。
收获：bootstrap为我们提供了很多特定的class，比如对于文字排版问题就有.text-left,.text-center等class类，当我们需要比如居中时就可以使用.text-center这个类。当然还不止这些，大多数类都是按照作用来命名的，所以在使用时只要知道想用它做什么就可以根据作用来命名，不过对于初学者最好还是查看官方文档后再使用，毕竟记忆还没有达到过目不忘的地步。
task10确实是道坎啊，虽然翻过了这道坎还有下道坎，但这个坎都翻不过下道坎还怎么玩？加油，继续啃！
返回列表
评论