首页 > > 网页制作 > css >

关于修改test9ui布局的一些小笔记

2018-06-24 01:41:34来源：未知阅读 ()

今早，上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">&nbsp;|&nbsp;</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;
    color: #333;
    font-size: 15px;
}
@media only screen and (max-width: 500px) {
    .header-dot-333 {
        margin-right: 2px;
        margin-left: 0px;
        color: #333;
        font-size: 15px;
    }
}

那么我原先的代码在不怎么变动<div class="col-md-12">框架的情况下就不可以修改成跟官网的一样的ui效果吗？

答案是否定的。

<div id="top" class="container">
    <div class="row">
        <div class="col-md-12">
            <span class="co20B  lh40 hidden-xs">咨询电话 : 010-59478634</span>
            <div id="lownding" class=" r lh40 ">
                    <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 href="#">注册</a>
                    <span class="header-dot-333">|</span>
                    <a href="">登陆</a>
            </div>
        </div>
    </div>
</div>