pc端的企業網站（IT修真院test8）詳解1-2

今天接著說test8的頁面還原。頭部header和尾部footer 我一開始是想直接使用bootstrap的柵格系統來實現的。但是內容的定位出了不少麻煩。那麼就索性用原生html+css來還原頁面了。放上效果圖頭部html代碼尾部html代碼 css代碼友情鏈接的模塊就比較簡單的還原了（ ...

今天接著說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，因此不會得到多餘的空間*/
    /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
    width:100%;
}

.g-footer{
    flex: 0 0 auto;
}
.g-footer-f{
    position: fixed;bottom:0;
    width:100%;
    min-height: 5rem;
    /*此方法通過position固定在瀏覽器下方，但是以一種浮動在上層的效果出現的。*/
    /*所以上一個緊挨的併列盒子，即g-content盒子的內容就會有一部分顯示不全。被遮擋了。*/
    /*而這種特性也被用於實現footer底層樣式透明，footer里的按鈕不透明。*/
    /*而實現內容不遮擋，只要在g-content的底部新增一個含高度的空div就完成。*/
}
.footer-bg{
    height:5rem;
    /*只要再給一個層，然後給個跟父盒子一樣高的高度就可以實現底層透明，上層不透明*/
    background:#29BDE0;
    filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;
    /*filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;實現透明效果*/
}


/*---具體的頭部設置---*/

.h-row-1{
    min-height: 2rem;
    line-height: 2rem;
    border-top:0.1rem solid #fff;
}


.h-row-2{
    background:#20B176;
    min-height:4rem;
    line-height:4rem;
    text-align: right;
}
.h-row-1 a{
    color:#20B176;
}
.h-row-1 img{
    max-width: 1rem;
    margin:0 0.2rem;
}
.h-row-2 a{
    font-size:1.5rem;
    color:#fff;
    margin-left: 2.5rem;
}

/*---具體的腳步設置---*/
.g-footer{
    background:#20B176;
}
.f-row-2{
    min-height: 2rem;
    line-height: 2rem;
    border-top:0.1rem solid #fff;
}
.f-row-2 span{
    padding:0 0.2rem;
    font-size:1rem;
    color:#fff;
}
.f-row-2 span:nth-child(5){
    padding-right:0.5rem;
    border-right:0.1rem solid #fff;
}

.f-row-1{
    padding:1rem 0;
    margin:0 auto;
    min-height: 11rem;
}
.f-row-1>.w-80{
    display:flex;
    flex-wrap:nowrap;
    font-size: 1rem;
}
.f-row-1 h5{
    font-size: 1.5rem;
    color:#fff;
}
.f-row-1 a{
    padding:0 1rem;
    color:#fff;
}
.f-cess-1,.f-cess-2,.f-cess-3{
    position:relative;
    margin:0;
    /*border:0.1rem solid #ff0000;*/
}
.f-cess-1,.f-cess-2{
    width:40%;
}
.f-cess-3{
    width:20%;
    text-align:right;
    overflow: hidden;
}
.f-cess-1 ul{
    position: absolute;
    bottom:0;
    left:0;
    /*border:0.1rem solid #ff0000;*/
}
.f-cess-2 ul{
    position: absolute;
    bottom:0;
    left:0;
}
.f-cess-1 li{
    margin:1rem 0 0 -1rem;
    /*用於撐開鏈接的行高和去掉預設的左邊10px間隙*/
}
.f-cess-2 li{
    margin:1rem 1rem 0 -1rem;
}
.f-cess-1 li:first-child{
    border-right:0.1rem solid #fff;
}
.f-cess-1 li:nth-child(2){
    border-right:0.1rem solid #fff;
}








/*---公用css調用---*/
.w-100{
    width:100%;

}
.w-80{
    width:80%;
    margin:0 auto;
    /*border:0.1rem solid #ff0000;*/
}
.float-right{
    float:right;
}
.ta-center{
    text-align: center;
}
.ta-right{
    text-align: right;
}

友情鏈接的模塊就比較簡單的還原了（註意滑鼠手勢，和hover效果我還沒弄上去）

    <div class="c-cell-5">
        <div class="w-80">
            <a href="" class=" ta-center" style="color:black"><h4>友情鏈接</h4></a>
            <ul>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手機軟體</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教師招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手機軟體</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教師招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手機軟體</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教師招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手機軟體</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教師招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手機軟體</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教師招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手機軟體</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教師招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手機軟體</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教師招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手機軟體</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教師招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>

            </ul>
        </div>
    </div>

.c-cell-5 li{
    margin:1rem 2rem 1rem 0;
    /*border:0.1rem solid #ff0000;*/
}
.c-cell-5 li a{
    color:#989898;
}

其他內容塊，我都是使用原生html+css實現的。

    <div class="c-cell-1">
        <div class="w-80">
            <div class="avator">
                <div class="morohology-3">
                    <img src="img/test8-1/rocket.png">
                    <h4><strong>高效</strong></h4>
                    <p>將五到七年的成長時間，縮短到一年到三年</p>
                </div>
                <div class="morohology-3">
                    <img src="img/test8-1/book.png">
                    <h4><strong>規範</strong></h4>
                    <p>標準的實戰教程，不會走彎路</p>
                </div>
                <div class="morohology-3">
                    <img src="img/test8-1/connection.png">
                    <h4><strong>人脈</strong></h4>
                    <p class="">同班好友，同院學長，技術大師，入學就混入職脈圈，為以後鋪平道路。</p>
                </div>
                <div class="morohology-3 c-title-3">
                    <span class="c-title-4">
                        <span class="glyphicon glyphicon-user color20B">12400</span>
                        <p>累計線上學習人數</p>
                        <span class="glyphicon glyphicon-user color20B">12400</span>
                        <p>學員已經找到滿意工作</p>
                    </span>

                </div>
            </div>

        </div>
    </div>

.c-cell-1{

}
.c-cell-1 img{
    max-width: 2.5rem;
    max-height: 2.5rem;
}
.color20B{
    color:#20B176;
}
.c-title-3{
    border-left:0.1rem dashed #989898;
}
.c-title-4{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

 <div class="c-cell-2">
        <div class="w-80">
            <a href="" class="ta-center c-title"><h4>如何學習</h4></a>
            <div class="avator-1">
                <div class="morohology-4">
                    <span class="list-1 float-left">1</span><span class="inline-block float-left">匹配你現在的個人情況尋找適合自己的崗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block float-left">
                </div>
                <div class="morohology-4">
                    <span class="list-1">2</span><span class="inline-block">匹配你現在的個人情況尋找適合自己的崗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">3</span><span class="inline-block">匹配你現在的個人情況尋找適合自己的崗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">4</span><span class="inline-block">匹配你現在的個人情況尋找適合自己的崗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">5</span><span class="inline-block">匹配你現在的個人情況尋找適合自己的崗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">6</span><span class="inline-block">匹配你現在的個人情況尋找適合自己的崗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">7</span><span class="inline-block">匹配你現在的個人情況尋找適合自己的崗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">8</span><span class="inline-block">匹配你現在的個人情況尋找適合自己的崗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
            </div>



        </div>
    </div>

.c-cell-2{
    min-height: 25rem;
}
.list-1{
    display:inline-block;
    padding:2rem;
    background:url("../img/test8-1/roundness.png") no-repeat 50% 50%;
    background-size: contain;
    font-size:2rem;
    color:#20B176;
}
.list-2{
    display:inline-block;
    padding:0.5rem;
    background:url("../img/test8-1/triangle3.png") no-repeat 50% 50%;
    background-size: contain;
}
.inline-block{
    display: inline-block;
}
.morohology-4{
    position:relative;
    /*flex: 0 0 24%;*/
    float:left;
    width:23%;
    margin:1.5rem 1rem 1.5rem 0;
    display:flex;
    justify-content: center;
    align-items: center;
    /*padding:2rem 5rem 2rem 5rem;*/
    /*border:0.1rem solid #ff0000;*/
}
.float-left{
    float:left;
}
.avator-1{
    overflow: hidden;
}

<div class="c-cell-3">
        <div class="w-80">
            <a href="" class="ta-center c-title"><h4>優秀學員展示</h4></a>
            <div class="avator">
                <div class="morohology-3 min-height bgcolorfff">
                    <img src="img/test8-1/Avatar3.png">
                    <h4>技術顧問：羅大佑</h4>
                    <p>百度技術總監：互聯網基礎服務領域，從事虛擬主機、雲伺服器、功能變數名稱。曾任新網高級技術經理，負責技術研發、團隊管理與建設。</p>
                </div>
                <div class="morohology-3 min-height bgcolorfff">
                    <img src="img/test8-1/Avatar2.png">
                    <h4>技術顧問：羅大佑</h4>
                    <p>百度技術總監：互聯網基礎服務領域，從事虛擬主機、雲伺服器、功能變數名稱。曾任新網高級技術經理，負責技術研發、團隊管理與建設。</p>
                </div>
                <div class="morohology-3 min-height bgcolorfff">
                    <img src="img/test8-1/Avatar.png">
                    <h4>技術顧問：羅大佑</h4>
                    <p>百度技術總監：互聯網基礎服務領域，從事虛擬主機、雲伺服器、功能變數名稱。曾任新網高級技術經理，負責技術研發、團隊管理與建設。</p>
                </div>
                <div class="morohology-3 min-height bgcolorfff">
                    <img src="img/test8-1/Avatar4.png">
                    <h4>技術顧問：羅大佑</h4>
                    <p>百度技術總監：互聯網基礎服務領域，從事虛擬主機、雲伺服器、功能變數名稱。曾任新網高級技術經理，負責技術研發、團隊管理與建設。</p>
                </div>
            </div>
            <div class="ta-center">
                <span class="c-title-2">&bull;</span><span class="c-title-2">&bull;</span>
                <span class="c-title-2">&bull;</span><span class="c-title-2">&bull;</span>
            </div>
        </div>

    </div>

.c-cell-3{
    min-height: 25rem;
}
.avator{

    display: flex;
    justify-content: space-around;
    overflow: hidden;
}
.morohology-3{
    position: relative;
    /*width:20%;*/
    flex: 0 0 20%;
    padding:1rem;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.min-height{
    min-height: 25rem;
}
.bgcolorfff{
    background: #fff;
}
.morohology-3>p{
    color:#989898;
}
.c-title-2{
    font-size:5rem;
}

<div class="c-cell-4">
        <div class="w-80">
            <a href="" class="ta-center c-title"><h4>戰略合作企業</h4></a>
            <div class="ta-center">
                <img src="img/test8-1/alibaba.jpg">
                <img src="img/test8-1/jinshanyun.jpg">
                <img src="img/test8-1/huanxin.jpg">
                <img src="img/test8-1/qiniu.jpg">
            </div>

        </div>

    </div>

.c-cell-4 img{
    max-width: 15rem;
    margin:2rem 0;
    padding:2rem;
    background:#fff;
}

.c-cell-5 li{
    margin:1rem 2rem 1rem 0;
    /*border:0.1rem solid #ff0000;*/
}
.c-cell-5 li a{
    color:#989898;
}
.c-cell-5{
    background:#fff;

}
.c-title{
    color:black;
    cursor:pointer;
}