HTML5+CSS3+JavaScript+Bootstrap网站开发技术（第3版）课件 第10章 综合实例

第10章综合实例用HTML5+CSS3实现旅游网站1用Bootstrap实现后台管理页面210.1用HTML5+CSS3实现旅游网站10.1.1使用HTML5结构元素组织网页1.网页结构描述页面结构元素的含义描述如下。•header元素：网站的标题、logo、导航等。•nav元素:页面导航。•aside元素：侧边栏，用来展示与当前网页或整个网站相关的信息。•section元素：网页的主体内容通常被放置在section•footer元素：用来放置网站的版权声明和备案信息等。10.1.1使用HTML5结构元素组织网页10.1.1网页结构描述页面结构元素的含义描述10.1.1使用HTML5结构元素组织网页2.2用CSS3定义网站全局样式

为网站设置全局样式，例如背景、边界、字体、字号和行高等属性参数，保证不同页面有相对一致的风格，也可以保证网页在不同浏览器中稳定的显示效果。代码（略）10.1.2页头部分的设计1.页头的结构描述页头部分由header元素声明，由背景图片和2个导航组成，显示效果如图所示。10.1.2页头部分的设计2.页头元素及CSS样式代码分析

页头部分的HTML5代码结构页头部分使用的样式代码（略）101.3侧边导航和焦点图的设计1.侧边导航和焦点图版块的内容版块内容整体放置在section元素中。section元素具有引导和导航作用。网站的主页可以划分为焦点信息、最新咨讯、特色线路等多个section。10.1.3侧边导航和焦点图的设计2.侧边导航和焦点图版块的代码分析

示例页面中的侧边导航和焦点图版块的如示例8-5所示。

代码略.10.1.4精品推荐版块的设计1.精品推荐版块的内容精品推荐版块通过section定义，该版块的内容通过无序列表组织，列表项用来放置图片及介绍文字。10.1.4精品推荐版块的设计2.精品推荐版块的代码分析

示例代码略10.1.5页脚的设计1.页脚的结构描述页脚部分用footer元素声明，其中包含了4个div元素，在每个div容器中放置了一个无序列表，列表项中内容主要是各类链接。10.1.5页脚的设计2.页脚的代码分析

示例代码略10.2用Bootstrap实现后台管理页面

10.2.1页面结构描述1.页面功能说明导航栏：包括用户管理、内容管理、系统管理等功能模块。。左侧边栏：内容管理模块下的分类列表。主体内容部分：文章列表，实现查看、编辑、删除、置顶等操作。10.2.1页面结构描述10.2.1页面结构描述2.Bootstrap3框架10.2.1页面结构描述3.页面布局代码页面导航条由nav元素描述；主体内容包含在应用了.container类的div容器内部，分为左侧边栏和右侧内容部分。10.2.2导航部分的设计导航部分包括标题、主要功能模块的链接、搜索表单、登录按钮等，定义在nav元素内。代码略。10.2.3主体部分的设计主体部分在.container类描述的div容器内左侧边栏用列表组实现右侧的路径导航使用.breadcrumb类实现文章列表用一个响应式表格实现使用.pagination类实现分页功能页脚由.myfooter类来定义样式10.2.4案例小结（1）关于代码的书写建议在Bootstrap的在线文档中找到相关的示例，复制，然后再修改代码，这将极大地提高页面的开发效率。（2）理解Bootstrap框架Bootstrap框架的主要在bootstrap.css文件和bootstrap.js文件中。读者可以添加的样式类，或者直接修改Bootstrap框架中的代码。（3）功能的进一步改善作业（1）简述HTML5新增的结构元素的含义使用方法。（2）举例说明网站中有那些元素适合定义为全局样式。（3）说明CSS应采用什么措施避免样式无法兼容多种浏览器的问题。（4