HTML5与CSS3 Web前端开发技术第16章 综合案示.pptVIP

HTML5+CSS3Web开发前端技术 LOGO HTML5+CSS3 Web开发前端技术 * 第16章综合示例 使用HTML 5结构元素组织网页 1 页头部分的设计 2 侧边导航和焦点图的设计 3 快速搜索、滑动Tab和在线咨询版块设计 4 特色线路版块的设计 5 页脚的设计 6 16.1 使用HTML 5结构元素组织网页 16.1.1 网页结构描述 该页面结构元素的含义描述如下 ? header元素：用来展示网站的标题、企业的logo图片、网站导航条等。 ? nav元素:用于页面导航。 ? aside元素：aside结构元素可以有多种形式，其中最常见的形式是侧边栏，通常用来展示与当前网页或整个网站相关的一些辅助信息。 ? section元素：网页中要显示的主体内容通常被放置在section结构元素中，每个section元素都应该有一个标题，用于表明该section的主要内容。 ? footer元素：用来放置网站的版权声明和备案信息等内容，也可以放置企业的联系电话和传真等联系信息。 16.1 使用HTML 5结构元素组织网页 16.1.1 网页结构描述 该页面结构元素的含义描述如下 16.1 使用HTML 5结构元素组织网页 16.1.2 用CSS 3定义网站全局样式 设计网页时，为网站设置一个全局样式，例如背景、边界、字体、字号和行高等属性参数，这样，既可以保证不同页面有相对一致的风格，也可以保证网页在不同浏览器中稳定的显示效果。 代码如下（略） 16.2 页头部分的设计 16.2.1 页头的结构描述 页头部分由header元素声明，由背景图片和2个导航组成，显示效果如图16-3所示。 16.2 页头部分的设计 16.2.2 页头元素及CSS样式代码分析 页头部分的HTML5代码结构如示例16-3所示。页头部分使用的样式代码（略） 16.3 侧边导航和焦点图的设计 16.3.1 侧边导航和焦点图版块的内容 侧边导航和焦点图轮播版块整体放置在section元素中。section元素是一个具有引导和导航作用的结构元素。示例网站的主页可以划分为焦点信息、最新咨讯、特色线路等多个section。 16.3 侧边导航和焦点图的设计 16.3.2 侧边导航和焦点图版块的代码分析 示例页面中的侧边导航和焦点图版块的如示例16-5所示。代码（略） 16.4 快速搜索、滑动Tab和在线咨询版块设计 16.4.1 快速搜索、滑动Tab和在线咨询版块的内容 快速搜索、滑动Tab和在线咨询版块包含了三个div元素，分别对应三个版块，其在浏览器中的显示结果如图16-5所示。 16.4 快速搜索、滑动Tab和在线咨询版块设计 16.4.2 快速搜索版块的代码分析 示例页面中的快速搜索功能的示例代码（略） 16.4 快速搜索、滑动Tab和在线咨询版块设计 16.4.3 滑动Tab版块的代码分析 滑动Tab部分包含上下两个内嵌在id=Tab中的两个div，分别是div id=menubox和div id=contentbox，分别用于存在滑动Tab的标题和内容。两个滑动标签的内容由无序列表项经CSS控制后形成，分别用无序列表来展示“旅游快讯”和“优惠活动”内容。 示例代码（略） 16.4 快速搜索、滑动Tab和在线咨询版块设计 16.4.4 在线咨询版块的代码分析 该版块包含上下两部分，上面一部分由class=alink的div元素组成，用于显示顶部的两个标签；下面部分由无序列表组成，列表项用于显示相关的在线咨询信息。 示例代码（略） 16.5 特色线路版块的设计 16.5.1 特色线路版块的内容 特色线路版块放置在section元素中，主要由无序列表组成，列表项用来放置图片及介绍文字。 16.5 特色线路版块的设计 16.5.2 特色线路版块的代码分析 示例代码（略） 16.6 页脚的设计 16.6.1 页脚的结构描述 页脚部分用footer元素声明，其中包含了4个div元素，在每个div容器中放置了一个无序列表，列表项中内容主要是各类链接。 16.6 页脚的设计 16.6.2 页脚的代码分析 示例代码（略） 作业 HTML5+CSS3Web开发前端技术 LOGO HTML5+CSS3 Web开发前端技术 *