那么我原先的代码在不怎么变动<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>

.lh40{line-height:40px;}

这样就可以实现跟官网一样的ui效果了！

 接下来，研究导航栏的还原ui

上方是官网抽离的结构，不过我这里删了它一层div，待会再研究它的作用。

下方是我原先设计的代码结构。导航栏的核心代码基本是一致的。那么差别就在于div布局上了。

下方，是在<nav>的子层里嵌套一个盒子<div class="container-fluid">的形式布局的。同时指定id="navbar-h"来定义背景颜色和高度。

上方，是在<nav>的外层里包了一个盒子<div class="header-nav-wrap nav">的形式布局的。同时指定class="header-nav-wrap nav来定义背景颜色和高度。

 当时这样的结果是：

占了个满屏，与上方的布局，不对齐了。

如何才能跟上方的top水平间距是一样呢？

来看看原官网代码：

它将导航也定义为container了，<nav id="" class="navbar navbar-default container" role="navigation">，然后下方插入一个row再放内容。

那么它跟原先top的层次就会一样。

布局已经搞定了！接下来的就是css改样式了！。

在css中，我发现官网nav里设置了margin-bottom：0；这个在我原设计的#navbar-h中都存在。因为那么调试的时候，我就发现只有指定了该属性，才能让header的下方多余的空白去掉。应该是bootstrap默认状态下，每一行都有下margin吧！

在按照官网方法实施时，发现一个问题：

我是自己的想法是直接指定.navbar设置border-style:none;和box-shadow:none;来去掉边框和阴影。结果实现了我要的效果。

后来，我发现在小屏幕分辨率下，按钮失效了！究竟是哪里设置影响到默认设置功能呢？

发现影响它的因数有

1.高度的设置：只要将原先的height:97px;改为min-height:97px;就可以。

2.<div id="navbar-collapse">里的<ul>只能设置navbar-right，不能设置为为float：right；要不然在小分辨率下下拉菜单会浮到右边去。无法居中显示。

3.虽然设置navbar-right，但是跟top里的浮动，有偏移了。只能通过设置ul的margin-right为0才可以跟浮动相似位置。

最终就实现了对齐。

关于超链接点解后不会改变颜色。直接在<a href="#" class=" co20B">合作企业</a>的""里添加#就ok 了。

另外在推荐页面的左边栏定宽位置上，实现li左对齐且居中。有难度哦。我直接加个&emsp;把他们的长度弄成一样，才可以是实现自适应居中。

也就只有这么多要改的啦！师兄赶紧放行！