今天接着说test8的页面还原。

头部header和尾部footer

我一开始是想直接使用bootstrap的栅格系统来实现的。但是内容的定位出了不少麻烦。

那么就索性用原生html+css来还原页面了。

放上效果图

头部html代码

<div class="g-header w-100">
        <div class="h-row-1">
            <div class="w-80">
                <a href="">客服热线：010 594 78634</a>
                <span class="float-right">
                    <a href=""><img src="img/test8-1/weixinicon.jpg"></a>
                    <a href=""><img src="img/test8-1/qqicon.jpg"></a>
                    <a href=""><img src="img/test8-1/weiboicon.jpg"></a>
                </span>
            </div>
        </div>
        <div class="h-row-2">
            <div class="w-80">
                <a href="">首页</a>
                <a href="">职业</a>
                <a href="">推荐</a>
                <a href="">关于</a>
            </div>
        </div>
</div>

尾部html代码

<div class="g-footer">
    <div class="f-row-1">
        <div class="w-80">
            <div class="f-cess-1">
                <h5>技能树<span style="padding:0 0.3rem;">一</span>改变你我</h5>
                <ul>
                    <li>
                        <a href="">关于我们</a>
                    </li>
                    <li>
                        <a href="" class="f-a">联系我们</a>
                    </li>
                    <li>
                        <a href="">合作企业</a>
                    </li>
                </ul>


             </div>
            <div class="f-cess-2">
                <h5>旗下网站</h5>
                <ul>
                    <li>
                        <a href="">草船云孵化器</a>
                    </li>
                    <li>
                        <a href="">最强IT特训营</a>
                    </li>
                    <li>
                        <a href="">葡萄藤轻游戏</a>
                    </li>
                    <li>
                        <a href="">桌游精灵</a>
                    </li>
                </ul>


            </div>
            <div class="f-cess-3">
                <h5>微信公众平台</h5>
                <img src="img/test8-1/qrcode.png" class="s-icon-max-2">
            </div>
        </div>
    </div>

    <div class="f-row-2 ta-center">
        <div class="w-80">
            <span>Copyright<span>&copy;</span>2015技能树</span><span>wwww.jnshu.com</span>
            <span>All</span><span>Rights</span><span>Reserved</span>
            <span>京ICP备13005880号</span>
        </div>
    </div>
</div>

css代码

html{
    font-size:62.5%;
    height:100%;
    width:100%;
    /*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。*/
    /*这里还要说明一下：html下的body一般会有或多或少的margin，body的高度不是100%的。*/
}
body{
    display:flex;
    flex-direction:column;
    height:100%;
    width:100%;
    /*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。这里body：height：100%是继承html的高度*/
    /*将 body 的 display 属性设置为 flex, 然后将方向属性设置为列,*/
}
ul,li{
    margin:0;
    padding:0;
    list-style: none;
}
li{
    display: inline-block;

}

/*---框架设置---*/



/*我们希望 header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域*/
.g-header{
    flex:0 0 auto;

}
.g-content{
    flex: 1 0 auto;
    /*将 flex-grow 设置为1，该元素会占用全部可使用空间*/
    /*而其他元素该属性值为0，因此不会