時間：2023-09-18 07:00:02 | 來源：網(wǎng)站運營
時間：2023-09-18 07:00:02 來源：網(wǎng)站運營
web前端期末大作業(yè)——開心旅游網(wǎng)站設(shè)計與實現(xiàn)(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編輯軟件進行運行及修改編輯等操作）。 其中： （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" style="overflow: auto; overflow-x:hidden;"><head> <title>開心旅游網(wǎng)</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/screen.css" /> <script src="js/jquery.min.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider(); }); </script> <link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" /></head><body> <div class="wrapper"> <div class="top"> <div class="top_link"><a href="#">設(shè)為首頁</a> | <a href="#" class="link2">加入收藏</a></div> </div> <!--end of top--> <div class="nav"> <ul> <li><a href="index.html">網(wǎng)站首頁</a></li> <li><a href="lvyouwh.html">杭州旅游</a></li> <li><a href="njms.html">杭州美食</a></li> <li><a href="jingdian.html">杭州旅游</a></li> <li><a href="meishi.html">杭州美食</a></li> <li><a href="fengjing.html">杭州旅游</a></li> <li><a href="kmms.html">杭州美食</a></li> </ul> </div> <!--end of nav--> <div id="banner"> <div class="flexslider"> <ul class="slides"> <li><a href="#"> <img src="image/ad1.jpg" width="1010" /></a> </li> <li><a href="#"> <img src="image/j2.jpg" width="1010" /></a> </li> <li><a href="#"> <img src="image/j3.jpg" width="1010" /></a> </li> <li><a href="#"> <img src="image/j4.jpg" width="1010" /></a> </li> </ul> </div> </div> <!--end of banner--> <div class="content"> <div class="sidebar"> <div class="pro_box"> <div class="jj_cp2"> <h3>旅游景點</h3> </div> <ul class="pro_list"> <li><a href="jingdian_1.html">金雞湖</a></li> <li><a href="jingdian_2.html">拙政園</a></li> <li><a href="jingdian_3.html">周莊</a></li> <li><a href="jingdian_4.html">同里古鎮(zhèn)</a></li> </ul> </div> <!--end of pro_box--> <div class="pro_box"> <div class="jj_cp2"> <h3>特色美食</h3> </div> <ul class="pro_list"> <li><a href="meishi_1.html">太湖梅鱭</a></li> <li><a href="meishi_2.html">太湖白蝦</a></li> <li><a href="meishi_3.html">采芝齋糖果</a></li> <li><a href="meishi_4.html">松鼠桂魚</a></li> </ul> </div> <!--end of pro_box--> </div> <!--end of sidebar--> <div class="main_con"> <div class="chanp_box"> <div class="jj_cp"> <h3>旅游景點</h3> </div> <div class="show_box"> <div class="show_panel"> <ul id="show_list"> <li> <a href="#"><img alt="" src="image/j1.jpg" width="164" height="168" /><span>景點展示</span></a> <a href="#"><img alt="" src="image/j2.jpg" width="164" height="168" /><span>景點展示</span></a> <a href="#"><img alt="" src="image/j3.jpg" width="164" height="168" /><span>景點展示</span></a> <a href="#"><img alt="" src="image/j4.jpg" width="164" height="168" /><span>景點展示</span></a> </li> </ul> </div> </div> <!--end of show_box--> </div> <!--end of chanp_box--> <div class="chanp_box"> <div class="jj_cp"> <h3>特色美食</h3> </div> <div class="show_box"> <div class="show_panel"> <ul id="show_list"> <li> <a href="#"><img alt="" src="image/m1.jpg" width="164" height="168" /><span>特色美食</span></a> <a href="#"><img alt="" src="image/m2.jpg" width="164" height="168" /><span>特色美食</span></a> <a href="#"><img alt="" src="image/m3.jpg" width="164" height="168" /><span>特色美食</span></a> <a href="#"><img alt="" src="image/m5.jpg" width="164" height="168" /><span>特色美食</span></a> </li> </ul> </div> </div> <!--end of show_box--> </div> <!--end of chanp_box--> <div class="jj_box"> <div class="jj_cp"> <h3>開心旅游網(wǎng)南概況</h3> </div> <div class="jj_cloumn"> <a href="#"><img alt="" src="image/1.jpg" width="237" height="166"/></a> <div class="jj_txt"> <p>開心旅游網(wǎng)主要介紹杭州，杭州河杭州的旅游景點和特色美食。帶您領(lǐng)略旅游的無限開心一刻。</p> <p>杭州，古稱吳，簡稱蘇，又稱姑蘇、平江等，中國華東地區(qū)特大城市之一，位于浙江省東南部、長江以南、太湖東岸、長江三角洲中部，是浙江省省轄市。</p> <p>杭州歷史悠久，是國家首批24個歷史文化名城之一。杭州有文字記載的歷史已逾四千年，是吳文化的發(fā)祥地和集大成者，歷史上長期是江南地區(qū)的政治經(jīng)濟文化中心，杭州是天下四聚之一，杭州城始建于公元前514年，歷史學(xué)家顧頡剛先生經(jīng)過考證，認(rèn)為杭州城為中國現(xiàn)存最古老的城市。</p> <p>杭州文化古跡遍布，從中可以探尋歷史的源頭：杭州陵依山而建，結(jié)構(gòu)嚴(yán)整，觀之而生一股浩然之氣；夫子廟建筑群古色古香，漫步其間，讓你體味明清時代的市井繁榮；中華門氣勢宏偉，設(shè)計巧妙，置身城內(nèi)，壁壘森然，耳邊似有戰(zhàn)馬嘶鳴；此外還有靈谷寺、石象路、三國東吳所筑石頭城遺址、明代朱元璋的陵墓（明孝陵）以及革命紀(jì)念地雨花臺等，引人遐思無限。</p> <p>杭州，別稱"春城"，是浙江省會，浙江省唯一的特大城市和西南地區(qū)第三大城市（僅次于杭州、杭州），是浙江省政治、經(jīng)濟、文化、科技、交通中心，西部地區(qū)重要的中心城市和旅游、商貿(mào)城市，亦是中國面向東南亞、南亞、東盟開放的重要樞紐城市。</p> </div> <!--end of jj_txt--> </div> <!--end of jj_cloumn--> </div> <!--end of jj_box--> </div> <!--end of mian_con--> </div> <!--end of content--> </div> <!--end of wrapper--> <div class="foot"> <div class="copyright"> <p>版權(quán)所有©開心旅游網(wǎng)</p> <p><a href="http://mail.qq.com/">聯(lián)系我們</a><a href="http://www.baidu.com/" target="_blank"> 友情鏈接</a></p> </div> <!--end of copyright--> </div> <!--end of foot--></body></html>/* Browser Resets */.flex-container a:active,.flexslider a:active { outline: none;}.slides,.flex-control-nav,.flex-direction-nav { margin: 0; padding: 0; list-style: none;}/* FlexSlider Necessary Styles*********************************/.flexslider { width: 100%; margin: 0; padding: 0;}.flexslider .slides>li { display: none;}/* Hide the slides before the JS is loaded. Avoids image jumping */.flexslider .slides img {}.flex-pauseplay span { text-transform: capitalize;}/* Clearfix for the .slides element */.slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}html[xmlns] .slides { display: block;}* html .slides { height: 1%;}/* No JavaScript Fallback *//* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */.no-js .slides>li:first-child { display: block;}/* FlexSlider Default Theme*********************************/.flexslider { position: relative; margin-top: 10px; padding-top: 10px; margin-left: 10px; zoom: 1;}.flexslider .slides { zoom: 1;}.flexslider .slides>li { position: relative;}/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */.flex-container { zoom: 1; position: relative;}/* Caption style *//* IE rgba() hack */.flex-caption { background: none; -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000); zoom: 1;}.flex-caption { width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0, 0, 0, .3); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); font-size: 14px; line-height: 18px;}/* Direction Nav */.flex-direction-nav li a { width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(../image/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 150px; cursor: pointer; text-indent: -9999px;}.flex-direction-nav li a.next { background-position: -52px 0; right: -51px;}.flex-direction-nav li a.prev { background-position: 0 0; left: -60px;}.flex-direction-nav li a.disabled { opacity: .3; filter: alpha(opacity=30); cursor: default;}/* Control Nav */.flex-control-nav { width: 100%; position: absolute; bottom: -30px; *bottom: -0px; *bottom: -0px/9; text-align: center;}.flex-control-nav li { margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}.flex-control-nav li:first-child { margin: 0;}.flex-control-nav li a { width: 13px; height: 13px; display: block; background: url(../image/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}.flex-control-nav li a:hover { background-position: 0 -13px;}.flex-control-nav li a.active { background-position: 0 -26px; cursor: default;}請 “ 點贊” “??評論” “ 收藏”一鍵三連哦！??【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！關(guān)鍵詞：設(shè)計,實現(xiàn),旅游,開心,作業(yè)
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
