時間：2023-09-17 02:18:01 | 來源：網(wǎng)站運營
時間：2023-09-17 02:18:01 來源：網(wǎng)站運營
web前端期末大作業(yè)網(wǎng)課設(shè)計與實現(xiàn) _簡單DIV布局旅游網(wǎng)頁——簡潔的旅游酒店公寓(15頁)HTML+CSS+JavaScript：? 學(xué)生HTML靜態(tài)網(wǎng)頁基礎(chǔ)水平制作 ? ，頁面排版干凈簡潔。使用HTML+CSS頁面布局設(shè)計,web大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的旅游網(wǎng)頁制作，畫面精明，排版整潔，內(nèi)容豐富，主題鮮明，非常適合初學(xué)者學(xué)習(xí)使用, 這個實例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運行及修改編輯等操作）。 其中： （1）html文件包含：其中index.html是首頁、其他html為二級頁面； （2）css文件包含：css全部頁面樣式,文字滾動, 圖片放大等； （3）js文件包含：js實現(xiàn)動態(tài)輪播特效, 點擊事件等等（個別網(wǎng)頁中運用到j(luò)s代碼）。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>天堂鳥-高品質(zhì)服務(wù)公寓,酒店式公寓,家庭旅館,日租房,短租房,度假公寓,服務(wù)式公寓</title><link href="css/Home.css" rel="stylesheet" type="text/css" /><link href="css/common/head.css" rel="stylesheet" type="text/css" /><link href="css/common/foot.css" rel="stylesheet" type="text/css" /><script type='text/javascript' src="Js/head.js"></script><script type="text/javascript" src="Js/ThemeFocus/jquery-1.9.1.min.js"></script><script type="text/javascript" src="Js/ThemeFocus/jquery.nav.js"></script><script type="text/javascript" src="Js/DestinationSearch/citySelector.js"></script><script type="text/javascript" src="Js/My97DatePicker/WdatePicker.js"></script> </head><body> <div id="container"> <!--top 整個頭部--> <div id="nav"> <!--logo--> <div class="logo"> <img src="Common/images/logo.png" width="120" height="80" border="0"/> </div> <!--導(dǎo)航--> <ul id="navMenu"> <li><a href="#" rel='dropmenu1'>國內(nèi)目的地</a></li> <li><a href="#" rel='dropmenu2'>主題推薦</a></li> <li><a href="#" rel='dropmenu3'>出游類型</a></li> <li><a href="Theme/TravelGuide.html" rel='dropmenu4'>旅游指南</a></li> </ul> <div class="attention"> <a href="#" class="atnimg"><img src="Common/images/attention.jpg" width="70" height="25" border="0"/></a> </div> <!--手動搜索--> <div class="search" valign="middle"> <!--下拉框--> <div class="selectBox"> <input type="text" class="cityinput" id="citySelect" value="城市名" style="border:0;background: none transparent scroll repeat 0% 0%;width:95px;height:20px;"> </div> <input name="text" type="text" class="searcText" style="border:0;background: none transparent scroll repeat 0% 0%;width:130px;height:20px;margin:10px 0 0 2px;float:left;"/> <div class="searcher"> <a href="#"><img src="Common/images/searcher.jpg" width="20" height="20" border="0"/></a> </div> </div> </div> <!--導(dǎo)航下拉菜單--> <div id="dropmenu1" class="dropMenu"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="80" class="tdborder"> <span class="province">直轄市</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">港澳臺</span> </td> <td class="tdborder"> <ul> <li><a href="#">香港</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="House/CityHouse.html" target="_blank">三亞</a></li> <li><a href="#">博鰲(瓊海)</a></li> <li><a href="#">文章</a></li> <li><a href="#">五指山</a></li> <li><a href="#">陵水（三亞）</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">西南</span> </td> <td class="tdborder"> <ul> <li><a href="#">桂林</a></li> <li><a href="#">大理</a></li> <li><a href="#">麗江</a></li> <li><a href="#">杭州</a></li> <li><a href="#">騰沖</a></li> <li><a href="#">西雙版納</a></li> <li><a href="#">香格里拉</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">威海</a></li> <li><a href="#">杭州</a></li> <li><a href="#">蓬萊</a></li> <li><a href="#">杭州</a></li> <li><a href="#">棲霞（杭州）</a></li> <li><a href="#">棗莊</a></li> <li><a href="#">泰安</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> <li><a href="#">鎮(zhèn)江</a></li> <li><a href="#">盱眙</a></li> <li><a href="#">周莊</a></li> <li><a href="#">杭州</a></li> <li><a href="#">昆山</a></li> <li><a href="#">連云港</a></li> <li><a href="#">鹽城</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">千島湖</a></li> <li><a href="#">杭州</a></li> <li><a href="#">舟山</a></li> <li><a href="#">西塘</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">九寨溝</a></li> <li><a href="#">峨眉山</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">山陜</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">延安</a></li> <li><a href="#">平遙</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">東北</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">營口</a></li> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">黃山</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> <li><a href="#">武夷山</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">廬山</a></li> <li><a href="#">婺源</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> <li><a href="#">杭州</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州漢</a></li> <li><a href="#">洛陽</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">承德</a></li> <li><a href="#">秦皇島</a></li> <li><a href="#">張家口</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">西北</span> </td> <td class="tdborder"> <ul> <li><a href="#">杭州</a></li> </ul> </td> </tr> <tr> <td class="tdborder"> <span class="province">浙江</span> </td> <td class="tdborder"> <ul> <li><a href="#">呼倫貝爾</a></li> <li><a href="#">滿洲里</a></li> </ul> </td> </tr> </table> </div> <ul id="dropmenu2" class="dropMenu"> <li><a href="#">相約海島</a></li> <li><a href="Theme/SpecialTopic.html" target="_blank">海濱漫步</a></li> <li><a href="#">休閑時光</a></li> <li><a href="#">極致體驗</a></li> <li><a href="#">賞花踏青</a></li> </ul> <ul id="dropmenu3" class="dropMenu"> <li><a href="#">浪漫之旅</a></li> <li><a href="#">家庭出游</a></li> <li><a href="#">朋友聚會</a></li> </ul> <script type="text/javascript">cssdropdown.startchrome("navMenu")</script> <!--top 頭部結(jié)束--> <!--banner焦點圖內(nèi)部--> <div id="focus"> <div id="inner"> <div class="hot-event"> <!--登錄注冊行--> <div class="link"> <a href="#">手機(jī)客戶端</a> <a href="#">在線客服</a> <!-- <a href="UserInfo/OrderList.html">我的天堂鳥</a>--> <a href="Account/Register.html" target="_blank">注冊</a> <a href="Account/Login.html" target="_blank">登錄</a> <!--<a href="../index.html">退出</a> <div class="username"> <a href="UserInfo/OrderList.html">187****9013</a> <span>您好，</span> </div>--> </div> <!--浮動在焦點圖上的搜索--> <div class="searching"> <table> <tr height="40"> <td align="right" width="100"> <span class="q1">目的地</span> </td> <td width="20"> </td> <td width="258" align="left"> <!--下拉框--> <div class="selectBox2"> <div class="textbg"><!--加一個背景圖片--> <input type="text" class="cityinput" id="citySelect1" value="城市名" style="border:0;background: none transparent scroll repeat 0% 0%;width:180px;height:20px;margin-top:5px;"> </div> </div> </td> </tr> <tr height="40"> <td align="right"> <span class="q1">入住日期</span> </td> <td width="20"> </td> <td valign="middle"> <div class="textbg"> <input name="text2" type="text" class="Wdate" style="border:0;background: none transparent scroll repeat 0% 0%;width:180px;height:20px;margin-top:5px;" onclick="WdatePicker()" /></div> </td> </tr> <tr height="40"> <td align="right"> <span class="q1">退房日期</span> </td> <td width="20"> </td> <td> <div class="textbg"> <input name="text2" type="text" class="Wdate" style="border:0;background: none transparent scroll repeat 0% 0%;width:180px;height:20px;margin-top:5px;" onclick="WdatePicker()" /></div> </td> </tr> <tr height="40"> <td align="right"> <span class="q1">臥室數(shù)</span> </td> <td width="20"> </td> <td class="nubroom"> <a href="#" class="nubroom1">一室</a> <a href="#" class="nubroom2">二室</a> <a href="#" class="nubroom3">三室</a> <a href="#" class="nubroom4">不限</a> </td> </tr> <tr align="center" height="50"> <td colspan="3"> <input type="submit" value="搜索" id="btn" /> </td> </tr> </table> </div> <div class="switch-nav"><a href="#" onclick="return false;" class="prev"><i class="ico i-prev"></i><span class="hide-clip">上一個</span></a><a href="#" onclick="return false;" class="next"><i class="ico i-next"></i><span class="hide-clip">下一個</span></a></div> <div class="event-item" style="display: block;"><span class="event-item" style="display: block;"><a href="#" class="banner"><img src="Images/focus/banner01.jpg" class="photo" style="width: 960px; height: 350px;" /></a></span></div> <div class="event-item" style="display: none;"> <a href="#" class="banner"> <img src="Images/focus/banner02.jpg" class="photo" style="width: 960px; height: 350px;"/> </a> </div> <div class="event-item" style="display: none;"> <a href="#" class="banner"> <img src="Images/focus/banner03.jpg" class="photo" style="width: 960px; height: 350px;" /> </a> </div> <div class="event-item" style="display: none;"> <a href="#" class="banner"> <img src="Images/focus/banner04.jpg" class="photo" style="width: 960px; height: 350px;" /> </a> </div> <div class="event-item" style="display: none;"> <a href="#" class="banner"> <img src="Images/focus/banner05.jpg" class="photo" style="width: 960px; height: 350px;" /> </a> </div> <div class="switch-tab"> <a href="#" onclick="return false;" class="current">1</a> <a href="#" onclick="return false;">2</a> <a href="#" onclick="return false;">3</a> <a href="#" onclick="return false;">4</a> <a href="#" onclick="return false;">5</a> </div> </div> </div> <script type="text/javascript"> $('#inner').nav({ t: 3000, a: 1000 }); </script> </div> <!--banner焦點圖內(nèi)部結(jié)束--> <!--熱門城市--> <div id="hotcity"> <!--標(biāo)題欄--> <div class="title"> <span class="titlename1">熱門城市</span> </div> <!--熱門城市左側(cè)--> <div class="hotcityleft"> <!--map地圖--> <div class="map"> <img src="Images/map.jpg" width="470" height="380" border="0"/> </div> <!--top城市--> <div class="Topcity"> <span class="topct">Top城市：</span> 1.<a href="#">杭州 </a> 2.<a href="#">杭州 </a> 4.<a href="#">杭州 </a> 5.<a href="#">杭州 </a> 6.<a href="#">杭州 </a> 7.<a href="#">杭州 </a> 8.<a href="#">杭州 </a> 9.<a href="#">杭州 </a> 10.<a href="#">杭州 </a> </div> </div> <!--map地圖右側(cè)--> <div class="citydetial"> <!--城市圖片--> <div class="citydetialimg"> <a href="#"><img src="Images/citydetial/citydetial01.jpg" width="150" height="100" border="0"/></a> </div> <!--城市簡介--> <div class="textdetail"> <p><a href="#" class="cityname">杭州</a>,是在中國江南傳統(tǒng)文化（吳文化）的基礎(chǔ)上，與開埠后傳入的對杭州影響深遠(yuǎn)的歐美文化等融合而逐步形成，既古老又現(xiàn)代，既傳統(tǒng)又時尚，區(qū)別于中國文化，具有開放而又自成一體的獨特風(fēng)格。<a href="#" class="readdetail">查看更多>></a></p> </div> <!--城市著名景點--> <div class="attraction"> <a href="#">徐家匯</a> <a href="#">陸家嘴</a> <a href="#">杭州公園</a> <a href="#">人民廣場</a> </div> <div class="clear"></div> <!--房屋關(guān)注率排行--> <div class="attentionrate"> <span class="textatnrate">房屋關(guān)注率排行：</span> <table> <tr height="30"> <td width="20"> 1. </td> <td> <a href="#">都是家園圣天地 標(biāo)準(zhǔn)大...</a> </td> <td width="120"> <span class="city-nubroom">1室1廳</span> </td> <td width="30"> <a href="#">評論</a> </td> </tr> <tr height="30"> <td width="20"> 2. </td> <td width="160"> <a href="#">徽苑酒店公寓外灘店家...</a> </td> <td width="120"> <span class="city-nubroom">1室1廳1衛(wèi)</span> </td> <td> <a href="#">評論</a> </td> </tr> <tr height="30"> <td width="20"> 3. </td> <td> <a href="#">品尊名致豪華復(fù)式房</a> </td> <td width="120"> <span class="city-nubroom">3室1廳1衛(wèi)1廚</span> </td> <td> <a href="#">評論</a> </td> </tr> <tr height="30"> <td width="20"> 4. </td> <td> <a href="#">新港灣酒店公寓普通大...</a> </td> <td width="120"> <span class="city-nubroom">2室1廳1衛(wèi)</span> </td> <td> <a href="#">評論</a> </td> </tr> <tr height="30"> <td width="20"> 5. </td> <td> <a href="#">新港灣酒店公寓普通標(biāo)...</a> </td> <td width="120"> <span class="city-nubroom">1室1廳1衛(wèi)</span> </td> <td> <a href="#">評論</a> </td> </tr> </table> </div> </div> </div> <!--熱門城市結(jié)束--> <!--特色推薦--> <div id="recommend"> <!--標(biāo)題欄--> <div class="title"> <span class="titlename2">特色推薦</span> </div> <!--推薦地點--> <div class="rmdcity"> <a href="#" class="rightpitch"><img src="Images/rmdcity/rmdcity01.jpg" width="234" height="160" border="0"/></a> <a href="#" class="rightpitch"><img src="Images/rmdcity/rmdcity03.jpg" width="234" height="160" border="0"/></a> <a href="#" class="rightpitch"><img src="Images/rmdcity/rmdcity02.jpg" width="234" height="160" border="0"/></a> <a href="#"><img src="Images/rmdcity/rmdcity04.jpg" width="234" height="160" border="0"/></a> </div> </div> <!--特色推薦結(jié)束--> <!--廣告語--> <div id="slogan"> <div id="slogan1"> <div class="sloganimg"> <a href="#"><img src="Images/sloganimg1.jpg" width="40" height="40" border="0"/></a> </div> <div class="textslogan"> <a href="#">100%真實房源</a> <p>專業(yè)驗證員實地驗真，確保每一套房屋真實有效。</p> </div> </div> <div id="slogan1"> <div class="sloganimg"> <a href="#"><img src="Images/sloganimg2.jpg" width="40" height="40" border="0"/></a> </div> <div class="textslogan"> <a href="#">特色房屋，性價比高</a> <p>配備家電，可洗衣做飯的一居、多居房全面滿足各種需求。</p> </div> </div> <div id="slogan1"> <div class="sloganimg"> <a href="#"><img src="Images/sloganimg3.jpg" width="40" height="40" border="0" /></a> </div> <div class="textslogan"> <a href="#">到店無房，賠付首晚</a> <p>預(yù)訂成功到店無房賠付首晚房費，1000萬保障基金先行賠付。</p> </div> </div> <div id="slogan2"> <div class="sloganimg"> <a href="#"><img src="Images/sloganimg4.jpg" width="40" height="40" border="0"/></a> </div> <div class="textslogan"> <a href="#">7×24小時服務(wù)專線</a> <p>400客服專線隨時解答處理任何問題。</p> </div> </div> </div> <!--廣告語結(jié)束--> <!--foot--> <div id="foot"> <a href="#">關(guān)于我們 |</a> <a href="#">業(yè)務(wù)介紹 |</a> <a href="#">加入天堂鳥 |</a> <a href="#">幫助中心 |</a> <a href="#">網(wǎng)站地圖</a> <p>@ Copyright 2013 tiantangniao.com 天堂鳥 版權(quán)所有 不得轉(zhuǎn)載</p> <p>京ICP備11043397號</p> </div> <!--foot結(jié)束--></div> <script type="text/javascript"> var test=new Vcity.CitySelector({input:'citySelect'}); var test2=new Vcity.CitySelector({input:'citySelect1'}); </script></body></html>*{margin:0;padding:0;list-style-type:none;}body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color:#fff;}#container{ width:960px; margin:0 auto;}/*導(dǎo)航菜單*/#nav{ width:960px; height:40px; line-height:40px; background:url(../../Common/images/nav-bg.jpg); display:block; overflow:hidden;}.logo{ float:left; margin:0 80px 0 30px; height:40px;}#navMenu ul{ float:left; height:40px;}#navMenu li{ float:left; padding:5px 0 0 0;}#navMenu li a{ color:#fff!important; text-decoration:none; width:91px; height:40px; line-height:35px; text-align:center; background-image:url(../../Common/images/navbg.jpg); display:block;}#navMenu li a.last{ width:92px;}#navMenu li a:hover{ background-position:0 -40px;}/*加入關(guān)注*/.attention{ float:left; width:70px; height:30px; margin:10px 0 0 0;}/*搜索框*/.search{ float:right; height:40px; width:280px; background:url(../../Common/images/searvhbg.jpg) no-repeat;}.selectBox{ float:left; margin:10px 3px 0 10px;}.searcher{ float:right; width:20px; height:20px; margin:10px 10px 10px 0;}/*-------- 下拉菜單 --------------*/.dropMenu{ position:absolute; top:0; z-index:100; visibility:hidden; margin-top:-2px; border:1px solid #CCCCCC; border-top:0; background-color:#FFFFFF; padding:10px; width:400px;}#dropmenu1{ padding:0 10px 10px 10px; width:500px;}.province{ font-weight:bold; color:#999999; padding:0 0 0 5px;}.dropMenu li{ float:left; width:80px; height:20px;}.dropMenu li a{ display:block; padding:5px 0 0 5px; text-decoration:none; color:#0000FF; }.dropMenu a:hover{ text-decoration:underline; color:#FF6633;}.tdborder{ border-bottom:1px dashed #CCCCCC; border-left:none; border-right:none;}/*按首字母選擇城市*/.citySelector{background: #fff; }.cityslide { width:250px; list-style:none; margin:0; padding:0; }.cityslide li { list-style:none; overflow:hidden; height:16px; padding:4px 5px;}.cityslide li.on{ background:#9CD9FF; color:#fff;}.cityslide li b { font-weight:normal;}.cityslide li.empty{ background: #fff2e8; color: #666;}.cityslide li.empty em{ color: red; font-style:normal;}.cityname { float:left;}.cityspell { float:right;}.cityBox{ width: 320px; border: 1px solid #85BEE5; overflow: hidden; box-shadow: 2px 2px 3px rgba(0,0,0,0.3);}.cityBox ul{ margin: 0; padding: 0; overflow: hidden;}.cityBox ul li{ float: left; list-style: none; padding: 2px 4px; border: 1px solid #85BEE5; cursor:pointer; margin-left: 4px; display: inline; background: #E1EFFE;}.cityBox ul li.on{ background: #fff; border-bottom-color:#fff; position: relative;}.hide{ display: none;}p.tip{ color:#666; line-height: 20px; padding: 5px; margin: 0; text-indent: 3px;}.hotCity{ border-top: 1px solid #85BEE5; margin-top: -1px; clear:left; overflow: hidden; padding-bottom: 5px; padding-top: 5px; _margin-bottom:8px;}.cityTab{ overflow: hidden;}.cityTab dl{ margin:0; padding: 0; overflow: hidden; }.cityTab dl dt{ float: left; padding-left: 3px; color: #F30; text-indent: 5px; font-family: "Lucida console","consolas","courier new"; line-height: 22px; font-size: 14px; width: 20px;}.cityTab dl dd{ margin-left:2px; float:left; width: 290px;}.cityTab dl dd a{ padding-left:5px; width:66px; line-height: 22px; display: inline-block; color: #000; text-decoration: none;}.cityTab dl dd a:hover{ text-decoration:underline; color: red;}請 “ 點贊” “??評論” “ 收藏”一鍵三連哦！??【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！關(guān)鍵詞：旅游,布局,簡潔,簡單,作業(yè),設(shè)計,實現(xiàn)
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
