其實(shí)寫到這里，頁尾大家應(yīng)該都會做了的，還是那點(diǎn)知識而已，我都懶得寫了，而且我猜性急的朋友應(yīng)該也都寫出來了。算了，雖然很無聊，但是還是寫一遍好了。

老板說就這么多內(nèi)容吧，然后你覺得如釋重負(fù)啊！可是呢，就算這樣也不能完啊，就算是虎頭蛇尾總也是要給他一個結(jié)尾的啊。

其實(shí)結(jié)尾跟咱們的導(dǎo)航部分有點(diǎn)類似啦，都是一個通欄，然后中間一個居中的區(qū)域用來放內(nèi)容啊。所以嘛，到了后面簡直就是沒什么新鮮的東西的啊。

來，我們先來寫一個簡單單的催眠一下。反正我也已經(jīng)很困了啊

好啦，依舊是千篇一律的先來點(diǎn) Html（糊涂妹啦）：

<div id="footer">
    <ul>
        <li><a href="#">公司簡介</a></li>
        <li><a href="#">關(guān)于我們</a></li>
        <li><a href="#">聯(lián)系我們</a></li>
        <li><a href="#">服務(wù)條款</a></li>
        <li><a href="#">幫助中心</a></li>
    </ul>
</div><!-- #footer End -->

內(nèi)容是我瞎寫的，不用在意，這個不要我去解釋了吧。其實(shí)很簡單的說。然后我們?nèi)ザx一些 CSS （彩色式）

#footer {
    background:#F3F3F3;
    border-top: 3px solid #EFEFEF;
}
#footer ul {
    width:800px;
    margin: 0 auto;
    padding:15px 0;
    overflow: hidden;
}
#footer ul li {
    float: left;
    margin: 0;
    width: 160px;
    list-style: none;
    text-align: center;
}
#footer ul li a {
    text-decoration: none;
    color: #333;
}

到了這里我就不去過多的解釋 CSS 了，因?yàn)槲覀冇昧撕芏啾榱撕脝?？你?yīng)該差不多看懂了，否則大家該懷疑我故意占篇幅換稿費(fèi)啦~（雖然并沒有什么稿費(fèi)……哭……）只是說一下：#footer ul 中的 overflow: hidden; 是用來清除浮動的，好啦，你又學(xué)了一個小小的新技能哦。來看看效果吧：

就是這么的簡單，這根本就是前邊的內(nèi)容啊，分明作者……還是騙稿費(fèi)的……（然后真的并沒有稿費(fèi)啊?。?/p>

當(dāng)然這些都不要緊，關(guān)鍵是，要是老板看了這些教程，會覺得果然就是個騙工資的，于是責(zé)令整改啊，要做一個高大上的，跟那誰家小誰的網(wǎng)站一個樣式的頁尾……

不是說好不改了的嘛，哎，誰叫人家是老板捏！捏！，你懂的，說到捏，你有木有覺得很解氣啊！但是還是要把工作做掉的，所以……前邊的推翻重新來~

<div id="footer">
    <div class="footer-content">
        <ul>
            <li><a href="#">公司簡介</a></li>
            <li><a href="#">關(guān)于我們</a></li>
            <li><a href="#">聯(lián)系我們</a></li>
            <li><a href="#">服務(wù)條款</a></li>
            <li><a href="#">幫助中心</a></li>
        </ul>
        <ul>
            <li><a href="#">公司簡介</a></li>
            <li><a href="#">關(guān)于我們</a></li>
            <li><a href="#">聯(lián)系我們</a></li>
            <li><a href="#">服務(wù)條款</a></li>
            <li><a href="#">幫助中心</a></li>
        </ul>
        <div id="qrcode">
            <img src="/project/easy-web-code-book/images/qrcode.png" alt="">
        </div>
    </div><!-- .footer-content End -->
</div><!-- #footer End -->

別，別在意內(nèi)容，我已經(jīng)比剛才更加的隨意了……噓，老板現(xiàn)在不在身邊。

至少，內(nèi)容豐富了不是？那就好了，我就是糊弄下老板，你們……可別糊弄自己哦！

然后是 CSS ，其實(shí)，還是那點(diǎn)東西……

#footer {
    padding: 30px 0;
    background:#F3F3F3;
    border-top: 3px solid #EFEFEF;
}
#footer .footer-content {
    width: 960px;
    margin: 0 auto;
}
#footer ul {
    float: left;
    width:300px;
    margin: 0;
    padding:0;
}
#footer ul li {
    padding:10px 0;
}
#footer ul li a {
    text-decoration: none;
    color: #333;
}
#qrcode {
    float: right;
}
#qrcode img {
    width: 250px;
    height: 250px;
}

然后你讓我給你們解釋什么？哪一句沒學(xué)過？你指出來，我馬上就劃掉！來看看效果~

然后這章就結(jié)束了哈！但是你要自己動手試試哦~我一個頁面都講完了，你們也該寫出個什么頁面了吧？？記得交作業(yè)哦，雖然我不看，你們先努力把自己的頁面寫好寫漂亮，后面我會告訴你們怎么把他們發(fā)布到網(wǎng)上去，跟你的女盆友們炫耀……雖然她們其實(shí)更在乎怎樣把自己的照片修的美美噠~

好了，下一章我們講點(diǎn)新鮮玩意兒~

本章學(xué)習(xí)卡片：卡片 33

本章代碼下載：本章代碼

本書是收費(fèi)的，不過交費(fèi)憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me