第 31 章 项目实战-PC 端固定布局[5]
学习要点:
1.底部区域
2.说明区域
3.版权及证件区
主讲教师:李炎恢
本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现。
一.底部区域
本节课,我们将探讨一下首页中最底部的区域。这部分区域由两个部分组成,一个是说明内容,有:合作伙伴、旅游 FAQ 和联系方式,还有一个就是版权声明及各种手续证件编号。
//底部区域父元素
<footer id="footer">
...
</footer>
//底部父元素 CSS
#tour {
height: 1150px;
} #footer {
height: 360px;
}
二.说明区域
//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: 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:;
}
三.版权及证件区
//版权区
<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;
}
备注:本教程出自《李炎恢HTML5第一季视频教程》,请勿用于商业用途,否则后果自负!
第 31 章 项目实战-PC 端固定布局[5]的更多相关文章
- 第 31 章 项目实战-PC 端固定布局[4]
学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.热门 ...
- 第 31 章 项目实战-PC端固定布局[1]
学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现 ...
- 第 31 章 项目实战-PC 端固定布局[3]
学习要点: 1.搜索区 2.插入大图 3.搜索框 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.搜索区 本节课 ...
- 第 31 章 项目实战-PC端固定布局[2]
学习要点: 1.大纲算法 2.section和div 3.结构分析 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一.大纲算法 ...
- 第八十六节,html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- 第九十一节,html5+css3pc端固定布局,完成首页
html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...
- 第八十九节,html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区
html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...
- 第九十节,html5+css3pc端固定布局,底部区域,说明区域,版权区域
html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...
- 第八十八节,html5+css3pc端固定布局,搜索区,插入大图,搜索框
html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...
随机推荐
- 几个毫无节操纯属恶搞的JavaScript插件
fartscroll.js,为放屁而生 你知道么,有了这个js库,你的页面就可以——————————放屁勒! 打开下面的演示地址,然后滚动页面. 在线演示:http://theonion.github ...
- Azure SQL Database Active Geo-Replication简介
笔者在<迁移SQL Server 数据库到 Azure SQL 实战>一文中,介绍了如何把一个本地版的 SQL Server 数据库迁移到 Azure SQL Database.迁移虽然顺 ...
- WCF basicHttpBinding之Transport Security Mode, clientCredentialType="None"
原创地址:http://www.cnblogs.com/jfzhu/p/4071342.html 转载请注明出处 前面文章介绍了<WCF basicHttpBinding之Message Sec ...
- 模糊测试(fuzz testing)介绍(一)
模糊测试(fuzz testing)是一类安全性测试的方法.说起安全性测试,大部分人头脑中浮现出的可能是一个标准的“黑客”场景:某个不修边幅.脸色苍白的年轻人,坐在黑暗的房间中,正在熟练地使用各种工具 ...
- 复习sql第三次
1.层次型数据库以"树"结构表示数据库中数据间的关系:网状型以"图"结构表示数据库中数据间的关系:关系型数据库以"二维表"结构表示数据库中数 ...
- Adobe Photoshop CC 打开时报错~配置错误:请卸载并重新安装该产品
后期会在博客首发更新:http://dnt.dkill.net 异常处理汇总-开发工具 http://www.cnblogs.com/dunitian/p/4522988.html 个人估计,要么安 ...
- A Simple OpenGL Shader Example
A Simple OpenGL Shader Example eryar@163.com Abstract. OpenGL Shading Language, the high-level progr ...
- 【转】如何让你的Android SDK下载或者升级快如闪电
准备学习Android开发,但是Android SDK Manager界面都刷不出来,今天看到了一篇文章,顿时就解决了,原文地址http://qichaochen.github.io/2014/12/ ...
- EntityFramework 7 smallint short 奇怪问题(已解决)
在使用 EF7 进行条件查询的时候,遇到一个很奇怪的问题,不知道 EF 其他版本有没有这种情况,怎么说呢?一句话描述不清楚,具体请看下面内容. 问题场景 BloggingContext 配置代码: u ...
- 玩转Jquery,告别前端知道思路忘记知识点的痛苦
本节内容: 本章主要讲解一下jquery,主要是工作中用的前端框架是datetables框架,然后datetables框架又是基于jqeury研发的,所以要想学一个东西,就必须要了解其底层,不然走路都 ...