今早,上IT修真园里,看到师兄大娃很负责任的将我任务里的项目的排版,3,6,7的列了出来。
谢谢师兄,那么负责任的照看师弟。
言归正传,我一开始,直接按照师兄的指示,选择性的优先修改底部。效果也达到了预期的效果。后来我为了查看我的项目跟psd图的差别。就直接上我们的IT修真园的首页,查看它的代码了。
发现官网的头部代码抽离后整理是这样的
<div class="container">
<div class="row">
<div class="col-md-4 hidden-xs "><span class="tel-word">咨询电话 : 010-59478634</span></div>
<div class="col-md-8 ">
<div class="img-wrap">
<a href="" id="weixin" class="hidden-xs"><img src="img/test8-1/weixinicon.jpg"></a>
<a href="" id="qq" class="hidden-xs"><img src="img/test8-1/qqicon.jpg"></a>
<a href="" id="weibo" class="hidden-xs"><img src="img/test8-1/weiboicon.jpg"></a>
<span class="header-dot-333 hidden-xs">|</span>
<a class=" " href="#">注册</a>
<span class="header-dot-333 ">|</span>
<a class="" href="">登陆</a>
</div>
</div>
</div>
</div>
而我原先的代码是这样的
<nav id="top" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-12">
<span class="co20B">客服热线:010 594 78634</span>
<ul class="lsno r">
<li id="three" class="dib vh">
<a href="" id="weixin"><img src="img/test8-1/weixinicon.jpg"></a>
<a href="" id="qq"><img src="img/test8-1/qqicon.jpg"></a>
<a href="" id="weibo"><img src="img/test8-1/weiboicon.jpg"></a>
</li>
<li class="dib">
<a href="#">注册</a><span class="co20B"> | </span>
</li>
<li class="dib">
<a href="">登陆</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
实现的效果
官网,是用4,8宽度布局,同时加入了一个hidden-xs,客服热线都是用span来实现。如果取消它的样式:tel-word,img-wrap,效果图是这样的
大宽屏下
小屏下
bootstrap的默认状态下,文档内容text-align:left,<div class="col-md-8 ">就会从第5格开始。而且在浏览器默认缩小下的页面内容,<div class="col-md-8 ">会自动换行。
但是我们要的目标是两端对齐,而且在bootstrap的栅格系统下,不实现换行!那怎么办呢?
来看看官网是怎么实现的吧!
.tel-word {
float: left;
line-height: 40px;
color:#20B176;
}
.img-wrap {
text-align: right;
line-height: 40px;
}
使用了浮动。而且它的浮动作用在<div class="col-md-8 ">这种框架下的子盒子浮动。而且是通过line-height来实现垂直对齐。
当然,使用浮动,就要清楚浮动啊!
官网是通过伪类清除的。这个方法我觉得很赞!
.container:before{
display: table;
content: " ";
}
.container:after {
clear: both;
}
还有要说一下的是 | 的实现。
<span class="header-dot-333 ">|</span>
一种方法是通过border-right来实现。另一种就直接span来实现。给个margin水平外边距就可以轻易实现了!不过这里要赞的是:媒体查询,将距离缩小了点。更加美观。
.header-dot-333 {
margin-right: 8px;
margin-left: 8px;
col