Heim > Web-Frontend > HTML-Tutorial > 第 31 章 项目实战-PC 端固定布局[5]_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:16:11
Original
976 Leute haben es durchsucht

学习要点:

1.底部区域

2.说明区域

3.版权及证件区

 

主讲教师:李炎恢

 

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

一.底部区域

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

//底部区域父元素

<footer id="footer">    ...</footer>
Nach dem Login kopieren

//底部父元素 CSS

#tour {    height: 1150px;}#footer {    height: 360px;}
Nach dem Login kopieren

二.说明区域

//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>邮件:ycku@ycku.com</li>            <li>地址:江苏盐城无名路123 号</li>        </ul>    </div></div>
Nach dem Login kopieren

注:这里 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;}
Nach dem Login kopieren

三.版权及证件区

//版权区

<div class="bottom">Copyright &copy; YCKU 瓢城旅行社| 苏ICP 备120110119 号| 旅行社经营许可证:L-YC-BK12345</div>
Nach dem Login kopieren

//版权区 CSS

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

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage