本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现。
一.底部区域
本节课,我们将探讨一下首页中最底部的区域。这部分区域由两个部分组成,一个是说明内容,有:合作伙伴、旅游 FAQ 和联系方式,还有一个就是版权声明及各种手续证件编号。
//底部区域父元素
<footer id="footer"> ... </footer>
//底部父元素 CSS
#tour { height: 1150px; } #footer { height: 360px; background-color: #222; }
二.说明区域
//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>
注:这里 block 表示三个区块通用的 CSS,而 left、center、right 是每个区块独有的 CSS,虽然 CSS 没有编写,但这里声明了,将在以后可以设置微调。
//说明部分的 CSS
#footer .top { width: 1263px; height: 280px; margin: 0 auto; text-align: center; } #footer .block { width: 410px; height: 320px; display: inline-block; color: #ccc; text-align: left; vertical-align: top; } #footer h2 { font-weight: normal; padding: 20px 0 0 20px; font-size: 24px; } #footer hr { width: 90%; border: 1px dashed #333; } #footer ul { color: #666; font-size: 18px; text-indent: 20px; line-height: 2; }
三.版权及证件区
//版权区
<div class="bottom"> Copyright © YCKU 瓢城旅行社 | 苏ICP备120110119号 | 旅行社经营许可证:L-YC-BK12345 </div>
//版权区 CSS
#footer .bottom { height: 80px; line-height: 80px; text-align: center; color: #777; background-color: #000; border-top: 1px solid #444; }
注:本章为第45课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 微信公众号扫一扫
-