時(shí)間：2023-10-13 10:42:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-13 10:42:01 來源：網(wǎng)站運(yùn)營(yíng)
web課程設(shè)計(jì)網(wǎng)頁(yè)規(guī)劃與設(shè)計(jì) ：DW旅游主題網(wǎng)頁(yè)設(shè)計(jì)——鳳陽(yáng)智慧旅游官方-地方旅游網(wǎng)站模板html源碼HTML+CSS+JavaScript：? 學(xué)生HTML靜態(tài)網(wǎng)頁(yè)基礎(chǔ)水平制作 ? ，頁(yè)面排版干凈簡(jiǎn)潔。使用HTML+CSS頁(yè)面布局設(shè)計(jì),web大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè)源碼，這是一個(gè)不錯(cuò)的旅游網(wǎng)頁(yè)制作，畫面精明，排版整潔，內(nèi)容豐富，主題鮮明，非常適合初學(xué)者學(xué)習(xí)使用, 這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計(jì)。
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1）html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面； （2）css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等； （3）js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到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>鳳陽(yáng)縣旅游局</title><meta name="keywords" content="鳳陽(yáng)縣旅游局 " /><meta name="description" content="鳳陽(yáng)縣旅游局 " /><link href="css/whir_css.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="script/jquery.js"></script><script type="text/javascript" src="script/superslide.2.1.js"></script></head><body><!--頭部--><div id="header"> <div class="top"> <div class="welcome"> <div class="welleft">歡迎訪問鳳陽(yáng)智慧旅游官方旗艦店！</div> <div class="zhuce"><a href="#">登錄</a> / <a href="#">注冊(cè)</a></div> </div> <div class="searchbox"> <div class="logo"><a href="#" title="鳳陽(yáng)縣旅游局"><img src="images/logo.jpg" /></a></div> <div class="search"> <input type="text" class="input1" value="請(qǐng)輸入查詢關(guān)鍵字" onFocus="this.value='';" onBlur="if(this.value==''){this.value='請(qǐng)輸入查詢關(guān)鍵字';}"name="" /><input type="image" src="images/btn.jpg" class="btn" /> </div> <div class="tel"><img src="images/tel.jpg" /></div> </div> </div> <div class="nav"> <ul class="navmenu"> <li><a href="index.html">網(wǎng)站首頁(yè)</a></li> <li><a href="列表頁(yè).htm">景點(diǎn)門票</a></li> <li><a href="列表頁(yè).htm">酒店賓館</a></li> <li><a href="列表頁(yè).htm">農(nóng)家樂</a></li> <li><a href="列表頁(yè).htm">旅游商品</a></li> <li><a href="列表頁(yè).htm">餐飲美食</a></li> <li><a href="列表頁(yè).htm">旅游攻略</a></li> <li class="login"><a href="個(gè)人資料.html">立即登錄</a></li> </ul> </div></div><div class="fullSlide"> <div class="bd"> <ul> <li _src="url(images/banner.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href="#"></a></li> <li _src="url(images/banner.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href="#"></a></li> <li _src="url(images/banner.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="#"></a></li> <li _src="url(images/banner.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href="#"></a></li> <li _src="url(images/banner.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="#"></a></li> </ul> </div> <div class="hd"> <ul> </ul> </div> <span class="prev"></span> <span class="next"></span> </div><script type="text/javascript">jQuery(".fullSlide").hover(function() { jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)},function() { jQuery(this).find(".prev,.next").fadeOut()});jQuery(".fullSlide").slide({ titCell: ".hd ul", mainCell: ".bd ul", effect: "fold", autoPlay: true, autoPage: true, trigger: "click", startFun: function(i) { var curLi = jQuery(".fullSlide .bd li").eq(i); if ( !! curLi.attr("_src")) { curLi.css("background-image", curLi.attr("_src")).removeAttr("_src") } }});</script><div id="container"> <!--景點(diǎn)門票--> <div class="column"> <div class="title"> <h1>景點(diǎn)門票</h1> </div> <ul class="list"> <li class="li1"> <span class="jdpic"><a href="#"><img src="images/pic.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#">鳳陽(yáng)明皇陵4晚6日自助游</a></span> <div class="jdinfo"><span class="go">01人去過</span><span class="price">￥209</span></div> </li> <li class="li2"> <span class="jdpic"><a href="#"><img src="images/pic1.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#">鳳陽(yáng)韭山洞4晚6日自助游</a></span> <div class="jdinfo"><span class="go">01人去過</span><span class="price">￥209</span></div> </li> <li class="li3"> <span class="jdpic"><a href="#"><img src="images/pic2.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#">鳳陽(yáng)明皇陵4晚6日自助游</a></span> <div class="jdinfo"><span class="go">01人去過</span><span class="price">￥209</span></div> </li> <li> <span class="jdpic"><a href="#"><img src="images/pic3.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#">鳳陽(yáng)大排量4晚6日自助游</a></span> <div class="jdinfo"><span class="go">01人去過</span><span class="price">￥209</span></div> </li> <li class="li4"> <span class="jdpic"><a href="#"><img src="images/pic4.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#">鳳陽(yáng)大水庫(kù)4晚6日自助游</a></span> <div class="jdinfo"><span class="go">01人去過</span><span class="price">￥209</span></div> </li> </ul> </div> <!--酒店賓館--> <div class="column"> <div class="title1"> <h1>酒店賓館</h1> </div> <ul class="list"> <li class="li1"> <span class="jdpic"><a href="#"><img src="images/pic5.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#">鳳陽(yáng)帝城酒店</a></span> <div class="jdinfo"><span class="zhu">01人住過</span><span class="price">￥209</span></div> </li> <li class="li2"> <span class="jdpic"><a href="#"><img src="images/pic6.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#">臻品酒店</a></span> <div class="jdinfo"><span class="zhu">01人住過</span><span class="price">￥209</span></div> </li> <li class="li3"> <span class="jdpic"><a href="#"><img src="images/pic7.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#">鳳陽(yáng)國(guó)際大酒店</a></span> <div class="jdinfo"><span class="zhu">01人住過</span><span class="price">￥209</span></div> </li> <li> <span class="jdpic"><a href="#"><img src="images/pic8.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#">鳳陽(yáng)大排量4晚6日自助游</a></span> <div class="jdinfo"><span class="zhu">01人住過</span><span class="price">￥209</span></div> </li> <li class="li4"> <span class="jdpic"><a href="#"><img src="images/pic9.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#">臻品酒店</a></span> <div class="jdinfo"><span class="zhu">01人住過</span><span class="price">￥209</span></div> </li> </ul> </div> <!--農(nóng)家樂--> <div class="column"> <div class="list1"> <div class="title2"> <h1>農(nóng)家樂</h1> </div> <ul> <li class="jl1"><a href="#"><img src="images/pic11.jpg" width="193" height="310" /><span>森林公園門票</span></a></li> <li class="jl2"><a href="#"><img src="images/pic12.jpg" width="247" height="145" /><span>森林公園門票</span></a></li> <li class="jl3"><a href="#"><img src="images/pic13.jpg" width="217" height="145" /><span>森林公園門票</span></a></li> <li class="jl4"><a href="#"><img src="images/pic13.jpg" width="217" height="145" /><span>森林公園門票</span></a></li> <li class="jl5"><a href="#"><img src="images/pic12.jpg" width="247" height="145" /><span>森林公園門票</span></a></li> <li class="jl6"><a href="#"><img src="images/pic11.jpg" width="193" height="310" /><span>森林公園門票</span></a></li> </ul> </div> <!--旅游攻略--> <div class="lygl"> <div class="title3"> <h1>旅游攻略</h1> </div> <img src="images/pic10.jpg" width="270" height="134" /><br /> <p>中國(guó)最具價(jià)值文化(遺產(chǎn))旅游目的地”推選活動(dòng)由中國(guó)文物保護(hù)基金會(huì)、中國(guó)旅游報(bào)社和新華社手機(jī)電視臺(tái)共同主辦，旨在展示各級(jí)政府在文化遺產(chǎn)保護(hù)與旅游業(yè)發(fā)展實(shí)現(xiàn)良性互動(dòng)取得的卓越成就，建歷史文化和旅游價(jià)值的新景觀、新線路……</p> <p>鳳陽(yáng)歷史文化厚重、旅游資源豐富獨(dú)特，自然風(fēng)光神奇秀美，紅色文化燦爛輝煌，民俗文化豐富多彩……</p> </div> </div> <!--美食--> <div class="column"> <div class="food"> <div class="title4"> <h1>美食</h1> </div> <ul class="list2"> <li class="f1"> <a href="#"><img src="images/pic14.jpg" width="212" height="141" /><br /> 鳳陽(yáng)帝城美食</a> </li> <li class="f2"> <a href="#"><img src="images/pic15.jpg" width="212" height="141" /><br /> 鳳陽(yáng)帝城美食</a> </li> <li class="f3"> <a href="#"><img src="images/pic16.jpg" width="212" height="141" /><br /> 鳳陽(yáng)帝城美食</a> </li> <li class="f4"> <a href="#"><img src="images/pic17.jpg" width="212" height="141" /><br /> 鳳陽(yáng)帝城美食</a> </li> </ul> </div> <!--自由行--> <div class="zyx"> <div class="title5"> <h1>自由行</h1> </div> <ul> <li><span class="zyimg"><a href="#"><img src="images/pic18.jpg" width="107" height="55" /></a></span><span class="zytext">中國(guó)最具價(jià)值文化(遺產(chǎn))旅 游由中國(guó)文物保護(hù)基金中國(guó) 旅游報(bào)社性互……</span></li> <li><span class="zyimg"><a href="#"><img src="images/pic19.jpg" width="107" height="55" /></a></span><span class="zytext">中國(guó)最具價(jià)值文化(遺產(chǎn))旅 游由中國(guó)文物保護(hù)基金中國(guó) 旅游報(bào)社性互……</span></li> <li class="nobg"><span class="zyimg"><a href="#"><img src="images/pic20.jpg" width="107" height="55" /></a></span><span class="zytext">中國(guó)最具價(jià)值文化(遺產(chǎn))旅 游由中國(guó)文物保護(hù)基金中國(guó) 旅游報(bào)社性互……</span></li> </ul> </div> </div></div><!--底部--><div id="footer"> <div class="foot"> <div class="fnav"> <ul> <li><a href="#">關(guān)于我們</a></li> <li><a href="#">免責(zé)條款</a></li> <li><a href="#">加入收藏</a></li> <li class="nobg"><a href="#">設(shè)為首頁(yè)</a></li> </ul> </div> <div class="copyright">版權(quán)所有：鳳陽(yáng)旅游局 電話：0550-66258789 地址：鳳陽(yáng)東華路109 郵編：233100 郵箱：fyx_lyj@163.com<br /> 皖I(lǐng)CP備07501184號(hào) Designed by <a href="#" target="_blank">samxinnet</a></div> </div></div></body></html>@charset "utf-8";body,div,hr,blockquote,ul,ol,li,table,th,td,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,input,button,select,textarea,fieldset,legend{margin:0;padding:0}body{font-size:12px;color:#333; background-color:#fff;font-family:Tahoma,Geneva,sans-serif,'宋體'; min-width:1200px;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}.clearfix{*zoom:1}.clearfix:after{display:block;clear:both;content:".";visibility:hidden;height:0}ul,ol{list-style:none}fieldset,img{border:0}address,cite,dfn,em,var{font-style:normal}strong,.fcu{font-weight:bold}table{border-collapse:collapse;border-spacing:0}button,.fhand{cursor:pointer}button,input,select,textarea{font-size:100%;}html{zoom:expression(function(ele){ele.style.zoom="1";document.execCommand("BackgroundImageCache",false,true)}(this))}.clear {margin:0px; padding:0px; clear:both;}/* ----- Links ----- */a {text-decoration:none; color:#666666;}a:hover {text-decoration:none;color:#193d7c;}.cl { zoom:1; float:right;}/***引導(dǎo)頁(yè)***/.flash{ width:100%; height:800px; background:url(../images/yin.jpg) top center no-repeat;}.biaoyu{ width:300px; height:30px; line-height:30px; color:#000; text-align:center; margin:0px auto; padding-top:185px; font-size:18px; font-family:"微軟雅黑";}.flash .item{ width:560px; height:43px; margin:25px auto;}.flash li{ width:137px; height:43px; line-height:43px; font-size:24px; float:left; margin-left:48px; font-family:"微軟雅黑"; text-align:center;}.flash li a{ display:block; width:137px; line-height:43px; color:#ff0100; background:url(../images/ydicon.png) no-repeat;}.flash li a:hover{ background:url(../images/ydh.png) no-repeat; color:#fff;}/***頭部***/#header{ width:100%; height:196px; margin-bottom:5px;}.top{ width:100%; height:143px; background:url(../images/topbg.jpg) repeat-x;}.welcome{ width:1200px; height:30px; margin:0 auto;}.welleft{ line-height:30px; font-size:12px; color:#9c9c9c; float:left;}.zhuce{ float:right; line-height:30px; color:#9c9c9c;} .zhuce a{ color:#9c9c9c;}.searchbox{ width:1200px; height:113px; margin:0 auto;} .logo{ float:left;}.search{ width:427px; height:38px; margin-top:39px; margin-left:40px; float:left;} .tel{ float:right;}.nav{ width:100%; height:53px; background:url(../images/nav.jpg) repeat-x;}.navmenu{ width:1200px; height:53px; margin:0 auto; font-family:"微軟雅黑";}.navmenu li{ width:150px; height:48px; padding-top:5px; float:left; background:url(../images/navline.jpg) right center no-repeat; text-align:center; font-size:18px;}.navmenu li a{ line-height:53px; color:#fff;} .navmenu li a:hover{ text-shadow:1px 2px 1px #000;}.navmenu li.login{ background:url(../images/login.jpg) no-repeat;}/***圖片切換***/請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”一鍵三連哦！??【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)鍵詞：設(shè)計(jì),旅游,地方,智慧,官方,主題,課程
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
