搜索
1单元1跨平台的网站首页设计单元1跨平台的网站首页设计表1-1网页0101.html的HTML代码序号HTML代码01020304050607080910111213141516171819!DOCTYPEhtmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8/metacharset=utf-8/title酒店预订,机票预订查询,旅游度假-携程旅行网无线版官网/titlelinkhref=css/common.cssrel=stylesheettype=text/cssmedia=screen/linkhref=css/main.cssrel=stylesheettype=text/cssmedia=screen//headbodyheaderdivclass=img-itemimg-sizeahref=#imgsrc=images/01.jpgtitle=携程旅行//a/div/headernavulclass=nav-listliclass=nav-flighth2atitle=机票href=#机票/a/h2/liliclass=nav-trainh2atitle=火车票href=#火车票/a/h2续表序号HTML代码202122232425262728/liliclass=nav-carh2atitle=用车href=#用车/a/h2/liliclass=nav-hotelh2atitle=酒店href=#酒店/a/h2/liliclass=nav-fortunh2atitle=财富中心href=#财富中心/a/h2/liliclass=nav-strategyh2atitle=攻略href=#攻略/a/h2/liliclass=nav-triph2atitle=旅游href=#旅游/a/h2/liliclass=nav-ticketh2atitle=门票href=#门票/a/h2/liliclass=nav-weekh2atitle=周末游href=#周末游/a/h2PART12293031323334353637383940414243444546474849505152/li/ul/navfooterclass=tool-boxdivclass=tool-cnahref=tel:4000086666class=link-tel4000086666/aahref=#class=link-down下载客户端/aahref=#class=link-mc我的携程/a/divdivclass=tool-verahref=#class=englishENGLISH/aahref=#class=computer电脑版/aahref=#class=wap意见反馈/a/divp©labelid=label12014/label携程旅行/p/footerasideclass=c_pop_wrapdivclass=c_popiclass=c_pop_trigon/idivclass=c_pop_cont单击下方图标，选择“添加至主屏幕”/div/div/aside/body/html表1-2网页0101.html主体结构的HTML代码序号HTML代码0102030405060708bodyheader/headernavulclass=nav-list/ul/navfooterclass=tool-box/footerasideclass=c_pop_wrap/aside/body表1-3网页0101.html通用CSS代码序号CSS代码序号CSS代码010203040506html,body,nav,ul,li,h2{padding:0px;margin:0px;}body{min-width:320px;171819202122li{list-style-type:none;}img{border:none3单元1跨平台的网站首页设计07080910111213141516font:normal14px/1.5emTahoma,LucidaGrande,Verdana,MicrosoftYahei,STXihei,hei;color:#000;background:#e7f8ff;overflow-x:hidden;}html,body{height:100%;}23242526272829303132}a{color:#000;text-decoration:none;}h2a:link,h2a:visited{color:#fff;}表1-4网页0101.html主体结构的CSS代码序号CSS代码序号CSS代码01020304050607080910111213141516171819header{position:relative;width:100%;min-height:50px;overflow:hidden;background:#e4f2fc}.nav-list{padding:10px10px5px10px;}.nav-list:after{content:'\0020';display:block;clear:both;height:0;overflow:hidden;}20212223242526272829303132333435363738footer{line-height:27px;text-align:center;font-size:12px;}.tool-box{margin:010px;padding-bottom:5px;}.c_pop_wrap{position:fixed;left:10px;right:10px;z-index:1000;bottom:12px;/*display:none;*/}表1-5网页0101.html顶部内容的CSS代码序号CSS代码序号CSS代码010203040506.img-item{height:100%;overflow:hidden;float:left;margin:10px0px0px;padding:0px;080910111213.img-size{width:1280px;height:110px;}.itemimg{width:100%;407}14}表1-6网页0101.html中部内容的CSS代码序号CSS代码序号CSS代码01020304050607080910111213141516171819202122232425262728293031323334.nav-listli{position:relative;float:left;margin-bottom:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}.nav-listli: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:170px160px;background-repeat:no-repeat;}.nav-listh2{position:absolute;left:8px;top:8px;font:50014px/1MicrosoftYahei;color:#fff;}.nav-flight,.nav-train,.nav-car,.nav-trip,.nav-ticket,.nav-week{height:70px;8687888990919293949596979899100101102103104105106107108109110111112113114115116117118119.nav-week{background-color:#78cdd1;}.nav-list.nav-fortunh2,.nav-list.nav-fortunh2a{color:#ff9913;}.nav-list.nav-fortunh2{top:66px;left:0;width:100%;text-align:center;}.nav-flight:before{top:24px;left:60%;width:60px;height:35px;background-position:00;}.nav-train:before{top:36px;left:50%;width:50px;height:20px;background-position:-70px0;}.nav-car:before{top:30px;续表序号CSS代码序号CSS代码35363738}.nav-hotel,.nav-fortun,.nav-strategy{height:93px;120121122123left:50%;width:35px;height:31px;background-position:-130px0;5单元1跨平台的网站首页设计3940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485}.nav-train,.nav-car,.nav-fortun,.nav-strategy,.nav-ticket,.nav-week{border-left:5pxsolid#fff;}.nav-flight,.nav-hotel,.nav-trip{width:40%;}.nav-train,.nav-car,.nav-fortun,.nav-strategy,.nav-ticket,.nav-week{width:30%;}.nav-flight{background-color:#368ff4;}.nav-train{background-color:#00ae9d;}.nav-car{background-color:#9556f3;}.nav-hotel{background-color:#0fc4d9;}.nav-fortun{background-color:#e7f8ff;}.nav-strategy{background-color:#ff864a;}.nav-trip{background-color:#84d018;}.nav-ticket{background-color:#f3b613;}124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170}.nav-hotel:bef