> 웹 프론트엔드 > HTML 튜토리얼 > 第 31 章 项目实战-PC 端固定布局[5]

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

WBOY
풀어 주다: 2016-06-06 09:32:42
원래의
1296명이 탐색했습니다.

学习要点:

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第一季视频教程》,请勿用于商业用途,否则后果自负!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿