HTML- 综合案例
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
前端开发技术
第八章
综合案例1
2
第8章 综合案例1
使用HTML 5结构元素组织网页1
页头部分的设计2
侧边导航和焦点图的设计3
快速搜索、滑动Tab 和在线咨询版块设计4
特色线路版块的设计5
页脚的设计
6
38.1.1 网页结构描述
该页面结构元素的含义描述如下
υ• header 元素：用来展示网站的标题、企业的logo
图片、网站导航条等。
υ• nav 元素:用于页面导航。
υ• aside 元素：侧边栏，通常用来展示与当前网页或
整个网站相关的一些辅助信息。
υ• section 元素：网页中要显示的主体内容通常被放
置在section 结构元素中，每个section 元素都应该有
一个标题，用于表明该section 的主要内容。
υ
• footer 元素：用来放置网站的版权声明和备案信
息等内容，也可以放置企业的联系电话和传真等联系
信息。
4
8.1.1 网页结构描述
该页面结构元素的含义描述如下
5
8.1.2 用CSS 3定义网站全局样式
υ设计网页时，为网站设置一个全局样式，例如背景、边界、字体、字号和行高等属性参数。
υ既可以保证不同页面有相对一致的风格，也可以保证网页在不同浏览器中稳定的显示效果。
6
8.2.1 页头的结构描述
页头部分由header 元素声明，由背景图片和2个导航组成，显示效果如图所示。
7
8.2.2 页头元素及CSS 样式代码分析
页头部分的HTML5代码结构如示例
8
8.3.1 侧边导航和焦点图版块的内容
υ
侧边导航和焦点图轮播版块放置在section元素中。υsection元素是具有引导和导航作用的结构元素。示例网站的主页可以划分为焦点信息、最新咨讯、特色线路等多个section。
9
8.3.2 侧边导航和焦点图版块的代码分析
108.4 快速搜索、滑动Tab 和在线咨询版块设计
8.4.1 快速搜索、滑动Tab 和在线咨询版块的内容
快速搜索、滑动Tab 和在线咨询版块包含了三个div 元素，分别对应三个版块，其在浏览器中的显示结果如图所示。
11
8.4.3 滑动Tab 版块的代码分析
υ滑动Tab 部分包含上下两个内嵌在id="Tab"中的两个div ，分别是