第 31 章 项目实战-PC 端固定布局[5]

学习要点：

1.底部区域

2.说明区域

3.版权及证件区

 

主讲教师：李炎恢

 

本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面，第一个项目采用 PC 端固定布局来实现。

一．底部区域

本节课，我们将探讨一下首页中最底部的区域。这部分区域由两个部分组成，一个是说明内容，有：合作伙伴、旅游 FAQ 和联系方式，还有一个就是版权声明及各种手续证件编号。

//底部区域父元素

<span style="color: #0000ff;"><span style="color: #800000;">footer </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="footer"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    ...
</span><span style="color: #0000ff;"></span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span></span>

//底部父元素 CSS

<span style="color: #800000;">#tour </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 1150px</span>;
}<span style="color: #800000;">

#footer </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 360px</span>;
}

二．说明区域

//top 表示说明区域

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="top"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="block left"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>合作伙伴<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">hr</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>途牛旅游网<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>驴妈妈旅游网<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>携程旅游<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>中国青年旅行社<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="block center"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>旅游FAQ<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">hr</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>旅游合同签订方式？<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>儿童价是基于什么制定的？<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>旅游的线路品质怎么界定的？<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>单房差是什么？<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>旅游保险有那些种类？<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="block right"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>联系方式<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">hr</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>微博：weibo.com/ycku<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>邮件：ycku@ycku.com<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>地址：江苏盐城无名路123 号<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

注：这里 block 表示三个区块通用的 CSS，而 left、center、right 是每个区块独有的 CSS，虽然 CSS 没有编写，但这里声明了，将在以后可以设置微调。

//说明部分的 CSS

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

三．版权及证件区

//版权区

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bottom"</span><span style="color: #0000ff;">></span>Copyright © YCKU 瓢城旅行社| 苏ICP 备120110119 号| 旅行社经营许可证：L-YC-BK12345<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

//版权区 CSS

<span style="color: #800000;">#footer .bottom </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #777</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #000</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 1px solid #444</span>;
}

备注：本教程出自《李炎恢HTML5第一季视频教程》，请勿用于商业用途，否则后果自负！