HTML5+CSS3移动Web开发实战单元 1 跨平台的网站首页设计.pptx

HTML5+CSS3移动 Web 开发实战陈承欢 编著精选 8 种类型的网站项目，55 个典型教学案例实例探析 + 引导训练 + 同步训练 + 拓展训练反映移动 Web 应用开发的实际需求和水平单元?1 跨平台的网站首页设计 HTML5的语义化标签及属性可以让开发者非常方便地实现清晰的Web页面布局，加上CSS3的效果渲染，使快速创建丰富灵活的Web页面变得相对简单。 本单元通过对网站首页设计的探析与训练，重点介绍HTML5网页的基本结构及组成元素、HTML5的语义和结构标签、!doctype声明等内容。读者应学会CSS样式的定义方法与样式表的插入方法，掌握网站首页的设计方法。实例探析任务1-1 探析携程旅行网的首页【效果展示】 携程旅行网首页0101.html的浏览效果如图1-1所示。 携程旅行网首页0101.html的主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，顶部内容为广告图片，中部内容为多个图片超链接，底部包括多个导航链接，侧边栏为长形按钮。【网页探析】1．网页0101.html的HTML代码探析 携程旅行网首页0101.html的HTML代码如表1-1所示。图1-1　携程旅行网首页0101.html的浏览效果表1-1　网页0101.html的HTML代码序号HTML代码0102030405060708091011121314151617181920212223242526272829!doctype htmlhtmlheadmeta charset=utf-8 title酒店预订,机票预订查询,旅游度假-携程旅行网无线版官网/title link href=css/common.css rel=stylesheet type=text/css media=screen / link href=css/main.css rel=stylesheet type=text/css media=screen / /head body header div class=img-item img-size a href=#img src=images/01.jpg title=携程旅行 //a /div /header nav ul class=nav-list li class=nav-flight h2a title=机票 href=# 机票/a/h2/li li class=nav-train h2a title=火车票 href=# 火车票/a/h2 /li li class=nav-car h2a title=用车 href=# 用车/a/h2/li li class=nav-hotel h2a title=酒店 href=# 酒店/a/h2/li li class=nav-fortun h2a title=财富中心 href=#财富中心/a/h2/li li class=nav-strategyh2a title=攻略 href=# 攻略/a/h2 /li li class=nav-trip h2a title=旅游 href=# 旅游/a/h2/li li class=nav-ticket h2a title=门票 href=# 门票/a/h2/li li class=nav-week h2a title=周末游 href=# 周末游/a/h2 /li /ul 续表序号HTML代码303132333435363738394041424344454647484950 /nav footer class=tool-box div class=tool-cn a href=# class=link-down下载客户端/a a href=# class=link-mc我的携程/a /div div class=tool-ver a href=# class=englishENGLISH/a a href=# class=computer电脑版/a a href=# class=wap意见反馈/a /div p携程旅行/p /footer aside class=c_pop_wrap div class=c_pop i class=c_pop_trigon/i div class=c_pop_cont 单击下方图标，选择“添加至主屏幕”/div /div /aside /body/html 网页0101.html主体结构的HTML代码如表1-2所示。该网页主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，其中顶部结构使用header标签实现，中部结构使用nav标签实现，底部结构使用footer标签实现，侧边栏使用aside标签实现。