第九十节，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;
}