《单元 1跨平台的网站首页设计ppt课件》由会员分享，可在线阅读，更多相关《单元 1跨平台的网站首页设计ppt课件（120页珍藏版）》请在金锄头文库上搜索。
1、单元单元 1 1 跨平台的网站首页设计跨平台的网站首页设计 HTML5 HTML5的语义化标签及属性可以让开发者非常方便地实现清晰的语义化标签及属性可以让开发者非常方便地实现清晰的的WebWeb页面布局，加上页面布局，加上CSS3CSS3的效果渲染，使快速创建丰富灵活的的效果渲染，使快速创建丰富灵活的WebWeb页面变得相对简单。页面变得相对简单。 本单元通过对网站首页设计的探析与训练，重点介绍本单元通过对网站首页设计的探析与训练，重点介绍HTML5HTML5网页网页的基本结构及组成元素、的基本结构及组成元素、HTML5HTML5的语义和结构标签、的语义和结构标签、声明声明等内容。读者应学会等
2、内容。读者应学会CSSCSS样式的定义方法与样式表的插入方法，掌握样式的定义方法与样式表的插入方法，掌握网站首页的设计方法。网站首页的设计方法。u实例探析实例探析任务任务1-1 1-1 探析携程旅行网的首页探析携程旅行网的首页【效果展示】【效果展示】 携程旅行网首页携程旅行网首页0101.html0101.html的浏览效果如图的浏览效果如图1-11-1所示。所示。 携程旅行网首页携程旅行网首页0101.html0101.html的主体结构包括的主体结构包括4 4个组成部分，分别个组成部分，分别为顶部、中部、底部和侧边栏，顶部内容为广告图片，中部内容为为顶部、中部、底部和侧边栏，顶部内容为广告
3、图片，中部内容为多个图片超链接，底部包括多个导航链接，侧边栏为长形按钮。多个图片超链接，底部包括多个导航链接，侧边栏为长形按钮。【网页探析】【网页探析】1网页0101.html的HTML代码探析 携程旅行网首页携程旅行网首页0101.html0101.html的的HTMLHTML代码如表代码如表1-11-1所示。所示。图1-1携程旅行网首页0101.html的浏览效果序号HTML代码0102030405060708091011121314151617181920212223242526272829 酒店预订,机票预订查询,旅游度假-携程旅行网无线版官网 机票 火车票 用车 酒店 财富中心 攻略
4、 旅游 门票 周末游 表1-1网页0101.html的HTML代码序号HTML代码303132333435363738394041424344454647484950 下载客户端 我的携程 ENGLISH 电脑版 意见反馈 携程旅行 单击下方图标，选择“添加至主屏幕” 续表 网页网页0101.html0101.html主体结构的主体结构的HTMLHTML代码如表代码如表1-21-2所示。该网页主体所示。该网页主体结构包括结构包括4 4个组成部分，分别为顶部、中部、底部和侧边栏，其中顶个组成部分，分别为顶部、中部、底部和侧边栏，其中顶部结构使用部结构使用标签实现，中部结构使用标签实现，中部结构使
5、用标签实现，底部标签实现，底部结构使用结构使用标签实现，侧边栏使用标签实现，侧边栏使用标签实现。标签实现。序号HTML代码0102030405060708 表1-2网页0101.html主体结构的HTML代码2网网页页0101.html的的CSS代代码码探析探析 网页网页0101.html0101.html通用的通用的CSSCSS代码如表代码如表1-31-3所示。所示。序号CSS代码序号CSS代码0102030405html,body,nav,ul,li,h2 padding: 0px; margin: 0px;body 0607080910 min-width: 320px; font: n
6、ormal 14px/1.5em Tahoma, Lucida Grande,Verdana, Microsoft Yahei,STXihei,hei ; color: #000;表1-3网页0101.html通用的CSS代码序号CSS代码序号CSS代码1112131415161718192021 background: #e8ff; overflow-x: hidden;html,body height: 100%;li list-style-type: none;img 2223242526272829303132 border: nonea color: #000; text-decor
7、ation: none;h:link,h:visited color: #fff;续表 网页网页0101.html0101.html主体结构的主体结构的CSSCSS代码如表代码如表1-41-4所示。所示。序号CSS代码序号CSS代码01020304050607080910111213141516171819header position: relative; width: 100%; min-height: 50px; overflow: hidden; background: #e2fc.nav-list padding: 10px 10px 5px 10px;.nav-list:after
8、 content: 0020; display: block; clear: both; height: 0; overflow: hidden;20212223242526272829303132333435363738footer line-height: 27px; text-align: center; font-size: 12px;.tool-box margin: 0 10px; padding-bottom: 5px;.c_pop_wrap position: fixed; left: 10px; right: 10px; z-index: 1000; bottom: 12px
9、; /*display: none;*/表1-4网页0101.html主体结构的CSS代码 网页网页0101.html0101.html顶部内容的顶部内容的CSSCSS代码如表代码如表1-51-5所示。所示。序号CSS代码序号CSS代码01020304050607. img-item height: 100%; overflow: hidden; float: left; margin: 10px 0px 0px; padding: 0px;08091011121314.img-size width: 1280px; height: 110px;.item img width: 100%;表1
10、-5网页0101.html顶部内容的CSS代码序号CSS代码序号CSS代码010203040506070809101112131415161718192021222324252627282930313233343536373839404142434445464748.nav-list li position: relative; float: left; margin-bottom: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:
11、border-box;.nav-list li:before content: ; position: absolute; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0); background-image: url(./images/un_ico_home.png); background-size: 170px 160px; background-repeat: no-
12、repeat;.nav-list h2 position: absolute; left: 8px; top: 8px; font: 500 14px/1 Microsoft Yahei; color: #fff;.nav-flight,.nav-train,.nav-car,.nav-trip,.nav-ticket,.nav-week height: 70px;.nav-hotel,.nav-fortun,.nav-strategy height: 93px;.nav-train,.nav-car,.nav-fortun,.nav-strategy,.nav-ticket,.nav-wee
13、k border-left: 5px solid #fff;.nav-flight,.nav-hotel,.nav-trip width: 40%;495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596.nav-train,.nav-car,.nav-fortun,.nav-strategy,.nav-ticket,.nav-week width: 30%;.nav-flight background-color: #368ff4;.nav-train ba
14、ckground-color: #00ae9d;.nav-car background-color: #3;.nav-hotel background-color: #0fc4d9;.nav-fortun background-color: #e8ff;.nav-strategy background-color: #ff;.nav-trip background-color: #84d018;.nav-ticket background-color: #f3b613;.nav-week background-color: #78cdd1;.nav-list .nav-fortun h2,.n
15、av-list .nav-fortun h color: #ff9913;.nav-list .nav-fortun h2 top: 66px;表1-6网页0101.html中部内容的CSS代码序号CSS代码序号CSS代码979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 left: 0; width: 100%; text-align: center;.nav-flight:before top: 24px; left: 60%
16、; width: 60px; height: 35px; background-position: 0 0;.nav-train:before top: 36px; left: 50%; width: 50px; height: 20px; background-position: -70px 0;.nav-car:before top: 30px; left: 50%; width: 35px; height: 31px; background-position: -130px 0;.nav-hotel:before top: 30px; left: 60%; width: 58px; height: 44px; background-position: 0 -40px;134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170.nav-fortun:before top: 24px; left: 50%; width:
