時間：2023-09-14 15:24:02 | 來源：網(wǎng)站運營
時間：2023-09-14 15:24:02 來源：網(wǎng)站運營
HTML5期末大作業(yè)：千島湖旅游網(wǎng)站設計——千島湖旅游(6頁) HTML+CSS+JavaScript web網(wǎng)頁設計—— 出游 旅途：常見網(wǎng)頁設計作業(yè)題材有個人、 美食、 公司、 學校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他等網(wǎng)頁設計題目,A+水平作業(yè), 可滿足大學生網(wǎng)頁大作業(yè)網(wǎng)頁設計需求, 喜歡的可以下載!
在線咨詢
PC電腦端關注我們1.網(wǎng)頁作品簡介 ：HTML期末大學生網(wǎng)頁設計作業(yè) A+水平 ,喜歡的可以下載，文章頁支持手機PC響應式布局。2.網(wǎng)頁作品編輯：作品下載后可使用任意HTML編輯軟件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML軟件編輯修改網(wǎng)頁）。3.網(wǎng)頁作品技術：Div+CSS、鼠標滑過特效、Table、導航欄效果、banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設計了logo（源文件），基本期末作業(yè)所需的知識點全覆蓋。<!DOCTYPE html><html> <head> <title>首頁</title> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="css/initi.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <!-- 下面滾動圖插件開始 --> <link rel="stylesheet" type="text/css" href="css/plus1.css" /> <!-- 下面滾動圖插件結束 --> <!-- 焦點圖插件開始 --> <link type="text/css" href="css/style.css" rel="stylesheet"/> <!-- 焦點圖插件結束 --> <script type="text/javascript" src="js/jquery.js"></script> <!-- 焦點圖插件開始 --> <script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script> <script type="text/javascript" src="js/jquery.touchSlider.js"></script> <!-- 焦點圖插件結束 --> <script type="text/javascript"> $(function() { //焦點圖插件代碼開始 $(".main_visual").hover( function(){ $("#btn_prev,#btn_next").fadeIn() }, function(){ $("#btn_prev,#btn_next").fadeOut() } ); $dragBln = false; $(".main_image").touchSlider({ flexible : true, speed : 200, btn_prev : $("#btn_prev"), btn_next : $("#btn_next"), paging : $(".flicking_con a"), counter : function (e){ $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on"); } }); $(".main_image").bind("mousedown", function() { $dragBln = false; }); $(".main_image").bind("dragstart", function() { $dragBln = true; }); $(".main_image a").click(function(){ if($dragBln) { return false; } }); timer = setInterval(function(){ $("#btn_next").click(); }, 5000); $(".main_visual").hover( function(){ clearInterval(timer); }, function(){ timer = setInterval( function(){ $("#btn_next").click(); },5000 ); } ); $(".main_image").bind("touchstart",function(){ clearInterval(timer); }).bind("touchend", function(){ timer = setInterval(function(){ $("#btn_next").click(); }, 5000); }); //焦點圖插件代碼結束 //topbar 單擊樣式 $(".topbar li a").click(function(){ $(this).css("color", "#0153a5"); $(this).parent().siblings().find("a").css("color", "#666"); }); //鼠標經(jīng)過列表樣式 $(".left_ul li").hover ( function(){ $(this).addClass("li_click_b"); }, function(){ $(this).removeClass("li_click_b"); } ); <!-- 下面滾動圖插件開始 --> $li1 = $(".apply_nav .apply_array"); $window1 = $(".apply .apply_w"); $left1 = $(".apply .img_l"); $right1 = $(".apply .img_r"); $window1.css("width", $li1.length*176); var lc1 = 0; var rc1 = $li1.length-5; $left1.click(function(){ if (lc1 < 1) { return; } lc1--; rc1++; $window1.animate({left:'+=176px'}, 1000); }); $right1.click(function(){ if (rc1 < 1){ return; } lc1++; rc1--; $window1.animate({left:'-=176px'}, 1000); }); <!-- 下面滾動圖插件結束 --> }); </script> </head> <body> <div class="main"> <div class="header"> <div class="help"> <a href="">聯(lián)系我們</a> | <a href="">站點幫助</a> | <a href="">問題反饋</a> </div> </div> <div class="topbar"> <ul> <li><a class="clicked" href="index.html">首頁</a></li> <li><a href="about.html">公園簡介</a></li> <li><a href="news.html">新聞動態(tài)</a></li> <li><a href="show.html">圖片墻</a></li> <li><a href="map.html">詳細地址</a></li> <li><a>圖片展示</a></li> <li><a>聯(lián)系我們</a></li> <li><a>學習資料</a></li> <li><a>搞笑圖片</a></li> </ul> </div> <!-- 好像只有添加iframe才能使頭部獨立成一個文件來處理，而且使用js給導航欄添加單擊樣式 <iframe name="contain" width="100%" height="100%"></iframe> --> <div class="content"> <!-- 焦點圖開始 --> <div class="main_visual"> <div class="flicking_con"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div> <div class="main_image"> <ul> <li><span class="img_1"></span></li> <li><span class="img_2"></span></li> <li><span class="img_3"></span></li> <li><span class="img_1"></span></li> <li><span class="img_2"></span></li> </ul> <a href="javascript:;" id="btn_prev"></a> <a href="javascript:;" id="btn_next"></a> </div> </div> <!-- 焦點圖結束 --> <!-- 通知 --> <div class="notice"> <p>通知：<a href="">1. 冬季來臨大家注意保暖。 </a><a href="" class="more">更多>></a></p> </div> <!-- 信息展示框 --> <div class="message"> <div class="left"> <div class="left_m"> <div class="one_left"> <img src="images/one.jpg" style="*float: left" /> <img src="images/more_y.jpg" class="float_right" /> <div class="clear"></div> </div> <ul class="left_ul"> <li><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li class="li_click"><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> </ul> <div class="clear: both"></div> </div> <div class="shadow"> <img src="images/shadow.jpg" /> </div> </div> <div class="right"> <div class="right_m"> <div class="one_left"> <img src="images/two.jpg" style="_float: left" /> <div class="clear"></div> </div> <div class="login"> <table> <tr> <td> <p class="user">用戶名：</p> </td> <td> <input type="text" name="username" class="username" /> </td> <td> </td> </tr> <tr> <td> <p class="pass">密<span style="margin: 0px 6px 0px 7px"></span>碼：</p> </td> <td> <input type="text" name="password" class="password" /> </td> <td> <p class="forget"> 忘記密碼！</p> </td> </tr> <tr> <td> <input type="submit" value="登錄" class="sub" /> </td> <td> <input type="reset" value="取消" class="res" /> </td> <td></td> </tr> </table> </div> <div class="clear: both"></div> </div> <div class="shadow"> <img src="images/shadow.jpg" /> </div> </div> <div class="clear"></div> <div class="left"> <div class="left_m"> <div class="one_left"> <img src="images/three.jpg" style="*float: left" /> <img src="images/more_b.jpg" class="float_right" /> <div class="clear"></div> </div> <ul class="left_ul"> <li><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li ><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> </ul> <div class="clear: both"></div> </div> <div class="shadow"> <img src="images/shadow.jpg" /> </div> </div> <div class="right"> <div class="right_m"> <div class="one_left"> <img src="images/four.jpg" style="*float: left" /> <img src="images/more_b.jpg" class="float_right" /> <div class="clear"></div> </div> <ul class="left_ul"> <li><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li ><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是陽光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> </ul> <div class="clear: both"></div> </div> <div class="shadow"> <img src="images/shadow.jpg" /> </div> </div> <div class="clear"></div> </div> <!-- 下面滾動圖片代碼 --> <div class="apply"> <div class="img_l"><img src="images/left.gif" /></div> <div class="apply_nav"> <div class="apply_w"> <div class="apply_array"> <div class="apply_img"><img src="images/sinaminiblog.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/kaixin001.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">開心001</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/renren.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人網(wǎng)</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/sinaminiblog.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/kaixin001.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">開心001</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/renren.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人網(wǎng)</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/sinaminiblog.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/kaixin001.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">開心001</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/renren.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人網(wǎng)</a></div> </div> </div> </div> <div class="img_r"><img src="images/right.gif" /></div> </div> <div class="clear"></div> </div> </div> <div class="footer"> <p class="address">地址：浙江省寶雞市千陽縣南寨鎮(zhèn)閆家村五組27號</p> <p>張旭超個人版權所有</p> </div> <p style="text-align: center"> 來源:<a href="http://www.mycodes.net/" target="_blank">源碼之家</a> </p> </body></html>web前端 零基礎-入門到高級 (視頻+源碼+開發(fā)軟件+學習資料+面試題) 一整套 (教程) 適合入門到高級的童鞋們?nèi)胧謣送1000套HTML+CSS+JavaScript模板網(wǎng)站 HTML5期末考核大作業(yè)源碼 包含 個人、 美食、 公司、 學校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他* 可滿足大學生網(wǎng)頁大作業(yè)網(wǎng)頁設計需求, 喜歡的可以下載! 關鍵詞：旅游,設計,作業(yè)
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
