第九十節，html5+css3pc端固定佈局，底部區域，說明區域，版權區域

html5+css3pc端固定佈局，底部區域，說明區域，版權區域

 

完成:

 

 

HTML代碼：

<!--尾部-->
<footer class="wei-bu">
    <div class="wei-bu2">
        <div class="yy dd1">
            <h2>合做夥伴</h2>
            <hr>
            <ul>
                <li>途牛旅遊網</li>
                <li>驢媽媽旅遊網</li>
                <li>攜程旅遊</li>
                <li>中國青年旅行社</li>
            </ul>
        </div>
        <div class="yy dd1">
            <h2>旅遊FAQ</h2>
            <hr>
            <ul>
                <li>旅遊合同簽定方式？</li>
                <li>兒童價是基於什麼制定的？</li>
                <li>旅遊的線路品質怎麼界定的？</li>
                <li>單房差是什麼？</li>
                <li>旅遊保險有那些種類？</li>
            </ul>
        </div>
        <div class="yy dd1">
            <h2>聯繫方式</h2>
            <hr>
            <ul>
                <li>微博：weibo.com/ycku</li>
                <li>郵件：ycku@ycku.com</li>
                <li>地址：江蘇鹽城無名路123號</li>
            </ul>
        </div>
    </div>
    <div class="ban-quan">
        <p>Copyright © YCKU 瓢城旅行社 | 蘇ICP備120110119號 | 旅行社經營許可證：L-YC-BK12345</p>
    </div>

css代碼：

/*尾部*/
.wei-bu{
    height: 360px;
    background-color: #222222;
    margin: 20px 0 0 0;
}
.wei-bu .wei-bu2{
    width: 1263px;
    height: 280px;
    /*background-color: #5dff59;*/
    margin: 0 auto;
}
.wei-bu .wei-bu2 .yy{
    width: 385px;
    height: 280px;
    /*background-color: #1232ff;*/
    display: inline-block;
    margin: 0 0 0 20px;
    vertical-align: top;
    overflow: hidden;
}
.wei-bu .wei-bu2 .yy h2{
    /*background-color: #ffe627;*/
    color: #CCCCCC;
    padding: 20px 0 0 20px;
}
.wei-bu .wei-bu2 .yy hr{
    padding: 3px 0 3px 0;
    border: none;
    border-bottom: 1px dashed #333;
}
.wei-bu .wei-bu2 .yy ul{
    height: 200px;
    /*background-color: #ff4450;*/
    padding: 5px 5px 8px 20px;
    overflow: hidden;
}
.wei-bu .wei-bu2 .yy ul li{
    font-size: 20px;
    line-height: 2;
    color: #666666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wei-bu .ban-quan{
    height: 79px;
    background-color: #000000;
    margin: 0 auto;
    line-height: 79px;
    text-align: center;
    color: #fffdfd;
}