第 31 章 項目實戰-PC 端固定佈局[5]

學習要點：

1.底部區域

2.說明區域

3.版權及證件區

主講教師：李炎恢

本章主要開始使用學慣用 HTML5 和 CSS3 來構建 Web 頁面，第一個項目採用 PC 端固定佈局來實現。

一．底部區域

本節課，我們將探討一下首頁中最底部的區域。這部分區域由兩個部分組成，一個是說明內容，有：合作伙伴、旅游 FAQ 和聯繫方式，還有一個就是版權聲明及各種手續證件編號。

//底部區域父元素

<footer id="footer">
    ...
</footer>

//底部父元素 CSS

#tour {
    height: 1150px;
}

#footer {
    height: 360px;
}

二．說明區域

//top 表示說明區域

<div class="top">
    <div class="block left">
        <h2>合作伙伴</h2>
        <hr>
        <ul>
            <li>途牛旅游網</li>
            <li>驢媽媽旅游網</li>
            <li>攜程旅游</li>
            <li>中國青年旅行社</li>
        </ul>
    </div>
    <div class="block center">
        <h2>旅游FAQ</h2>
        <hr>
        <ul>
            <li>旅游合同簽訂方式？</li>
            <li>兒童價是基於什麼制定的？</li>
            <li>旅游的線路品質怎麼界定的？</li>
            <li>單房差是什麼？</li>
            <li>旅游保險有那些種類？</li>
        </ul>
    </div>
    <div class="block right">
        <h2>聯繫方式</h2>
        <hr>
        <ul>
            <li>微博：weibo.com/ycku</li>
            <li>郵件：[email protected]</li>
            <li>地址：江蘇鹽城無名路123 號</li>
        </ul>
    </div>
</div>

註：這裡 block 表示三個區塊通用的 CSS，而 left、center、right 是每個區塊獨有的 CSS，雖然 CSS 沒有編寫，但這裡聲明瞭，將在以後可以設置微調。

//說明部分的 CSS

#footer .top {
    width: 1263px;
    height: 281px;
    margin: 0 auto;
    text-align: center;
}
#footer .block {
    width: 410px;
    height: 280px;
    display: inline-block;
    text-align: left;
    color: #ccc;
    vertical-align: top;
}
#footer h2 {
    font-size: 24px;
    font-weight: normal;
    padding: 20px 0 0 20px;
}
#footer hr {
    width: 90%;
    border: 1px dashed #333;
}
#footer ul {
    font-size: 18px;
    color: #777;
    text-indent: 20px;
    line-height: 2;
}

三．版權及證件區

//版權區

<div class="bottom">Copyright © YCKU 瓢城旅行社| 蘇ICP 備120110119 號| 旅行社經營許可證：L-YC-BK12345</div>

//版權區 CSS

#footer .bottom {
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #777;
    background-color: #000;
    border-top: 1px solid #444;
}

備註：本教程出自《李炎恢HTML5第一季視頻教程》，請勿用於商業用途，否則後果自負！