🍅 作者主頁：Java李楊勇
🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? 簡歷模板、學習資料、面試題庫、技識訓助【關注我，都給你】
🍅 歡迎點贊 👍 收藏 ?留言 📝
臨近期末, 你還在為HTML網頁設計結課作業,老師的作業要求感到頭大？HTML網頁作業無從下手？網頁要求的總數量太多？沒有合適的模板？等等一系列問題，你想要解決的問題，在專欄👇🏻👇🏻👇🏻👇🏻
java專案精品實戰分享案例《100套》
web前端期末大作業網頁實戰《100套》
Html+Css+JavaScript期末大作業《100套》
都能滿足你的需求，原始HTML+CSS+JS頁面設計, web大學生網頁設計作業原始碼，這是一個不錯的網頁制作，畫面精明，非常適合初學者學習使用，
網頁實作截圖：文末獲取原始碼
視頻演示連接： HTML5+CSS+JS--期末大作業 創建回應式旅游網頁網站設計【附完整原始碼】
網站首頁
關于我們
途牛旅游網創立于2006年10月，以“讓旅游更簡單”為使命，為消費者提供由北京、xx、廣州、深圳等180個城市出發的旅游產品預訂服務，產品全面，價格透明，全年365天24小時400電話預訂，并提供豐富的后續服務和保障，目前，途牛旅游網提供100萬余種旅游產品供消費者選擇，涵蓋跟團、自助、自駕、郵輪、酒店、簽證、景區門票以及公司旅游等，已成功服務累計超過1500萬人次出游，同時基于途牛旅游網全球中文景點目錄以及中文旅游社區，可以更好地幫助游客了解目的地資訊，妥善制定好出游計劃，并方便地預訂旅程中的服務專案，
主題旅游
<p class="tt3">香港2日半自助游</p>
<p class="tt4">特色：港式早茶 線路編號:HK01
<br> 銷量：1348484 滿意度：100% 推薦：五星<br>
行程：2日半自助游 出團日期：2017-2-6</p>
<p class="tt5"><em>原價：499</em><span><i>348</i>起/人</span></p>
熱門目的地
新聞資訊
舒適酒店
聯系我們
專案組織結構：
主要原始碼展示：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>主題旅游_回應式旅游旅行社類網站 模板(自適應移動端)</title>
<body data-spy="scroll">
<div id="wrap_index">
<!-- 側邊導航 -->
<div class="class page-prev visible-xs visible-sm">
<div class="close"></div>
<div class="class-top">
<form name="formsearch" action="/plus/search.php">
<input type="hidden" name="kwtype" value="0">
<input type="text" class="txt1" name="q" value="請輸入關鍵字">
<input type="submit" class="btn1" value="">
</form>
</div>
<div class="class-m">
<ul class="nnav">
<li><a href="../../../13097.html" class="ce">網站首頁</a></li>
<li class="menu_head"> <a href="../guanyuwomen/Index.html" class="ce">關于我們</a>
<ul class="menu_body">
</ul>
</li>
<li class="menu_head">
<dl class="ericon">
<span class="icon1"></span><span class="icon2"></span>
</dl>
<a href="" class="ce">主題旅游</a>
<ul class="menu_body">
<li><a href="guonayou/Index.html" class="er">國內游</a></li>
<li><a href="chujingyou/Index.html" class="er">出境游</a></li>
</ul>
</li>
<li class="menu_head">
<dl class="ericon">
<span class="icon1"></span><span class="icon2"></span>
</dl>
<a href="../remenmudedi/Index.html" class="ce">熱門目的地</a>
<ul class="menu_body">
<li><a href="../remenmudedi/yunnan/Index.html" class="er">云南</a></li>
<li><a href="../remenmudedi/sichuan/Index.html" class="er">四川</a></li>
<li><a href="../remenmudedi/fujian/Index.html" class="er">福建</a></li>
</ul>
</li>
<li class="menu_head"> <a href="../xinwenzixun/Index.html" class="ce">新聞資訊</a>
<ul class="menu_body">
</ul>
</li>
<li class="menu_head">
<dl class="ericon">
<span class="icon1"></span><span class="icon2"></span>
</dl>
<a href="../shushijiudian/Index.html" class="ce">舒適酒店</a>
<ul class="menu_body">
<li><a href="../shushijiudian/shuangrenjian/Index.html" class="er">雙人間</a></li>
<li><a href="../shushijiudian/danrenjian/Index.html" class="er">單人間</a></li>
<li><a href="../shushijiudian/zongtongtaofang/Index.html" class="er">總統套房</a></li>
</ul>
</li>
<li class="menu_head"> <a href="../lianxiwomen/Index.html" class="ce">聯系我們</a>
<ul class="menu_body">
</ul>
</li>
</ul>
</div>
</div>
<div class="opacity2"></div>
<div id="header" class="head visible-lg visible-md">
<div class="container-fluid">
<div class="logo wow fadeInLeft col-md-3"><a href="../../../13097.html"><img src="../../../static/picture/logo.png"></a></div>
<div class="col-md-9" style="height: 56px;">
<div class="search col-md-3 wow fadeInRight" style="float: right;">
<form name="formsearch" action="/plus/search.php">
<input type="hidden" name="kwtype" value="0">
<input class="txt1" type="text" name="q" placeholder="請輸入關鍵字">
<input class="btn1" type="submit" value="">
</form>
</div>
<div class="col-md-9 nav wow fadeInDown navbar-nav nav_box" style="float: right; text-align: right;">
<div class="yiji current"><a href="../../../13097.html">首頁</a></div>
<div class="yiji"><a href="../guanyuwomen/Index.html"><em>關于我們</em></a>
<div style="display:none">
</div>
</div>
<div class="yiji"><a href=""><em>主題旅游</em></a>
<div class="libox">
<a href="guonayou/Index.html"><em>國內游</em></a> <a href="chujingyou/Index.html"><em>出境游</em></a> </div>
</div>
<div class="yiji"><a href="../remenmudedi/Index.html"><em>熱門目的地</em></a>
<div class="libox">
<a href="../remenmudedi/yunnan/Index.html"><em>云南</em></a> <a href="../remenmudedi/sichuan/Index.html"><em>四川</em></a> <a href="../remenmudedi/fujian/Index.html"><em>福建</em></a> </div>
</div>
<div class="yiji"><a href="../xinwenzixun/Index.html"><em>新聞資訊</em></a>
<div style="display:none">
</div>
</div>
<div class="yiji"><a href="../shushijiudian/Index.html"><em>舒適酒店</em></a>
<div class="libox">
<a href="../shushijiudian/shuangrenjian/Index.html"><em>雙人間</em></a> <a href="../shushijiudian/danrenjian/Index.html"><em>單人間</em></a> <a href="../shushijiudian/zongtongtaofang/Index.html"><em>總統套房</em></a> </div>
</div>
<div class="yiji"><a href="../lianxiwomen/Index.html"><em>聯系我們</em></a>
<div style="display:none">
</div>
</div>
</div>
</div>
</div>
</html> style.css
@media (min-width: 1700px) {
/*#wrap_index .container,#footer .container{width: 100% !important;}
#wrap_index .ny_main .container{width: 80% !important;}
#wrap_index .ny_prolist .container{width: 94% !important;} */
}
#wrap_index {
overflow: hidden;
position: relative;
}
/*頭部*/
@media (min-width: 991px) {
#header {
display: block;
}
#molheader {
display: none;
}
}
@media (max-width: 990px) {
#molheader1 {
display: block;
}
#header {
display: none;
}
}
/*panle導航開始*/
.class {
width: 280px;
height: 100%;
z-index: 7;
background: #090b0f;
position: fixed;
top: 0px;
right: 0px;
color: #7e8696;
z-index: 44;
}
.class .close {
position: absolute;
opacity: 1;
left: -30px;
top: 18px;
background: url(../image/close.png) no-repeat;
background-size: 100% 100%;
width: 24px;
height: 24px;
}
.class.page-prev .close {
left: 0;
}
.class-top {
height: 70px;
overflow: hidden;
background: #12161e;
margin: 0;
font-size: 24px;
text-align: center;
line-height: 70px;
}
.class-top form {
width: 230px;
margin: 16px auto;
height: 40px;
position: relative;
}作品來自于網路收集、侵權立刪
獲取完整原始碼：
大家點贊、收藏、關注、評論啦 、查看下方👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻
打卡 文章 更新 70/ 100天
專欄推薦閱讀：
Java畢設專案精品實戰案例《100套》
HTML5大作業實戰案例《100套》
Web大作業前端網頁實戰《100套》
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304590.html
標籤：其他
上一篇：掃雷游戲設計及代碼實作