天天看點
傳回

HTML旅遊景點網頁作業制作——旅遊中國11個頁面(HTML+CSS+JavaScript)

👨‍🎓學生HTML靜态網頁基礎水準制作👩‍🎓，頁面排版幹淨簡潔。使用HTML+CSS頁面布局設計,web大學生網頁設計作業源碼，這是一個不錯的旅遊網頁制作，畫面精明，排版整潔，内容豐富，主題鮮明，非常适合初學者學習使用, 這個執行個體比較全面，有助于同學的學習,本文将介紹如何通過從頭開始設計個人網站并将其轉換為代碼的過程來實踐設計。

文章目錄🌰

  • ​​一、網站題目👨‍🎓​​
  • ​​二、網站描述✍️​​
  • ​​三、網站介紹📖​​
  • ​​四、網站效果🌐​​
  • ​​五、網站代碼制作部分 📕​​
  • ​​HTML結構代碼🧱​​
  • ​​CSS樣式代碼🏡​​
  • ​​六、遇到問題及如何解決🔍​​
  • ​​七、實訓總結😊​​
  • ​​八、更多幹貨🎁​​

一、網站題目👨‍🎓

🚀 旅遊景點介紹、旅遊風景區、家鄉介紹、等網站的設計與制作。

二、網站描述✍️

旅遊景點介紹、旅遊風景區是一個介紹簡介、行政區劃、地理環境、自然環境、教育事業、體育事業、旅遊景點、城市榮譽等等。網站集中主要展示了的地方風土人情，并通過訪客留言，增加遊客的互動體驗。同時，地方旅遊網站裡的每一個網頁都采用了統一的設計風格，以加強城市整體面貌統一的宣傳效果。最重要的是做出旅遊網站獨特的風格，更能吸引浏覽者的眼球。

三、網站介紹📖

網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。

網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。

網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。

網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；

網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：​

​Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++​

​​ 等任意html編輯軟體進行運作及修改編輯等操作）。

其中：

（1）html檔案包含：其中index.html是首頁、其他html為二級頁面；

（2）css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；

（3）js檔案包含：js實作動态輪播特效, 點選事件等等（個别網頁中運用到js代碼）。

四、網站效果🌐

網站設計制作的重點是對網頁整體設計的布局和對網頁整體内容的選題。

網站設計方面：計劃實作簡潔大氣的網頁設計效果。

網站功能方面：計劃實作各個頁面之間的連結跳轉功能、滑鼠懸停在文字上的變色功能、簡單的首頁動态圖檔切換功能、簡單的表單送出功能。

HTML旅遊景點網頁作業制作——旅遊中國11個頁面(HTML+CSS+JavaScript)
HTML旅遊景點網頁作業制作——旅遊中國11個頁面(HTML+CSS+JavaScript)
HTML旅遊景點網頁作業制作——旅遊中國11個頁面(HTML+CSS+JavaScript)
HTML旅遊景點網頁作業制作——旅遊中國11個頁面(HTML+CSS+JavaScript)
HTML旅遊景點網頁作業制作——旅遊中國11個頁面(HTML+CSS+JavaScript)
HTML旅遊景點網頁作業制作——旅遊中國11個頁面(HTML+CSS+JavaScript)
HTML旅遊景點網頁作業制作——旅遊中國11個頁面(HTML+CSS+JavaScript)
HTML旅遊景點網頁作業制作——旅遊中國11個頁面(HTML+CSS+JavaScript)
HTML旅遊景點網頁作業制作——旅遊中國11個頁面(HTML+CSS+JavaScript)
HTML旅遊景點網頁作業制作——旅遊中國11個頁面(HTML+CSS+JavaScript)

五、網站代碼制作部分 📕

（1）網站首頁布局确定好各個闆塊的内容，并使用了DIV+CSS布局。另外首頁使用到的知識主要有圖檔插入、圖檔動态切換、導覽列、利用CSS固定字型、文字大小、文字顔色、背景顔色。

（2）頁面使用了DIV+CSS布局，使用到的知識主要有圖檔插入、導覽列、利用CSS固定字型、文字大小、文字顔色、背景顔色。

（3）表單部分頁面使用了DIV+CSS布局，使用到的知識主要有運用了form表單、input文本框和input送出按鈕，完成表單資訊收集。利用CSS設定input送出按鈕文字大小和顔色。

HTML結構代碼🧱 

<html>
<head>
<meta charset="UTF-8">
<title>旅遊中國</title>
<link href="css/style.css" rel="stylesheet" media="all" type="text/css">
<script src="js/lunbo.js" type="text/javascript"></script>
</head>
<body>
<div class="head"><img src="images/logo.png" width="240"></div>
<div class="nav">
  <ul>
    <li><a href="index.html">首頁</a></li>
    <li><a href="liuyan.html">留言</a></li>
    <li><a href="gentuanyou.html">跟團遊</a></li>
    <li><a href="zixun.html">新聞資訊</a></li>
    <li><a href="fengguang.html">圖檔風光</a></li>
    <li><a href="shipin.html">精彩視訊</a></li>
    <li><a href="denglu.html">會員登入</a></li>
    <li><a href="zhuce.html">會員注冊</a></li>
  </ul>
</div>
<div  class="banner2" id="banner">
  <ul id="b_pic">
    <li style="display: block;"><img src="images/banner1.jpg"  alt=""></li>
    <li><img src="images/banner2.jpg"  alt=""></li>
    <li><img src="images/banner3.jpg"  alt=""></li>
  </ul>
  <ul id="b_an">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div  class="main">
  <div class="fls" >
    <h2 class="bar">自由行</h2>
    <ul>
      <li><img src="images/1.jpg" width="100%">
        <p>四川成都+稻城亞丁+理塘+珍珠海+新都橋7日6晚私家團·越野自駕·</p>
      </li>
      <li><img src="images/2.jpg" width="100%">
        <p>可選專車接送站/一日遊/包車|穿越時光·遇見長安|停留天數随心定·旅行說走就走</p>
      </li>
      <li><img src="images/3.jpg" width="100%">
        <p>住1晚市區+1晚黃山山頂+1晚宏村 · 嚴選包車遊</p>
      </li>
    </ul>
  </div>
  <div class="mls">
    <h2 class="bar">推薦線路</h2>
    <ul class="txtlist">
      <li> <a href="zyinfo.html"><img src="images/b1.jpg" width="140"></a>
        <div> <a href="zyinfo.html">阿壩3日2晚跟團遊·純玩丨九寨溝+黃龍【熊貓樂園/都江堰任選其一】（可更新頭等艙/熊貓主題食宿/千古情晚會/三鑽-五鑽多檔住宿·供君選擇）贈價值150元藏家晚會（酥油茶、青稞酒、土火鍋）+含去程動車費用+三環内包接~</a>
          <p></p>
        </div>
      </li>
      <li> <a href="gtyinfo.html"><img src="images/b2.jpg" width="140"></a>
        <div> <a href="gtyinfo.html">九寨溝+成都3日2晚跟團遊·3晚+去程動車票| 真純玩0購物0自費4鑽｜小團/旅拍/熊貓主題｜A線熊貓樂園/B線都江堰/C線峨眉樂山/D線達古冰川/E線四姑娘山/F線若爾蓋草原，贈送百元川秀/更新/玩法任選|三環包接~</a>
          <p></p>
        </div>
      </li>
      <li> <a href="zyinfo.html"><img src="images/b3.jpg" width="140"></a>
        <div> <a href="zyinfo.html">成都+九寨溝+黃龍風景名勝區4日3晚跟團遊·全程入住優選4鑽酒店+成都首尾自由活動+有限的時間隻與美景相遇+高端真純玩精選行程無存在某種問題或陰謀+24小時免費接送機站讓你的假期出行無憂+可選更新保姆車2+1座椅</a>
          <p></p>
        </div>
      </li>
      <li> <a href="gtyinfo.html"><img src="images/b4.jpg" width="140"></a>
        <div> <a href="gtyinfo.html">海南海口+三亞蜈支洲島5日4晚跟團遊·親子出遊更新海口五星*三亞連住海邊不挪窩+蜈支洲島暢遊+浪漫雨林天堂公園+南山+打卡網紅亞特蘭蒂斯水世界+揚帆出海【爸媽·蜜月·親子·閨蜜出遊必選】24H線上管家服務~~</a>
          <p></p>
        </div>
      </li>
      <li> <a href="zyinfo.html"><img src="images/b5.jpg" width="140"></a>
        <div> <a href="zyinfo.html">三亞+蜈支洲島+亞龍灣5日4晚跟團遊·【五•一特惠 高端出遊行程】贈送好萊塢車技表演 0購物純玩 單/雙飛可選 全程五星度假酒店 4大5A熱門景點 海南美食盛宴更新海鮮大餐+養生素齋 本土導遊跟随講解</a>
          <p></p>
        </div>
      </li>
    </ul>
  </div>
  <div class="rls" >
    <h2 class="bar">跟團遊</h2>
    <ul>
      <li><img src="images/c1.jpg" width="100%">
        <p>貴州黃果樹+梵淨山+鎮遠+西江千戶苗寨+荔波7...</p>
      </li>
      <li><img src="images/c2.png" width="100%">
        <p>海南三亞+蜈支洲島6日5晚跟團遊(5鑽)·限時特惠...</p>
      </li>
      <li><img src="images/c3.jpg" width="100%">
        <p>成都+稻城亞丁4日3晚跟團遊·稻城出發 【純玩無購物...</p>
      </li>
    </ul>
  </div>
  <div style="clear:both"></div>
  <h2 class="bar">風光圖檔</h2>
  <ul class="imglist">
    <li><img src="images/f1.jpg"></li>
    <li><img src="images/f2.jpg"></li>
    <li><img src="images/f3.jpg"></li>
    <li><img src="images/f4.jpg"></li>
    
  </ul>
  <div style="clear:both"></div>
</div>
<div class="end">旅遊網</div>
</body>
</html>

CSS樣式代碼🏡 

/* CSS Document */
body{width:1200px; background-color:#fff; line-height:24px; font-size:13px; margin:0px auto; background:#C2E7FC}

.main{padding:20px; background:#FFFFFF}
.fls{float:left; width:220px; margin-right:30px; }
.mls{float:left; width:640px; margin-left:20px; }
.rls{float:right; width:200px;  }
a{ text-decoration:none;}
ul,li{list-style:none; margin:0; padding:0;}
.nav{ height:50px; background:#0066CC}
.nav li{ display:inline-block;  line-height:50px  }
.nav li a{color:#fff; font-size:18px; padding:10px 40px}

.end{ background:#0066CC; color:#fff; padding:11px 0;  text-align:center}
.c li{ box-shadow:0px 0px 15px #888888;margin-top:30px; height:350px; width:30%; margin:1.666%; float:left;}
.c li img{ max-width:100%; height:200px}
.c li p{ padding:0 20px}
.c a{ color:#000; font-size:16px;} 
.clear{ clear:both}
.dl2{ margin:0 auto; font-size:16px; background:url(../images/login.jpg) no-repeat; background-size:cover; padding:120px}
.dl2 input{ padding:5px 10px}
.dl2 span{ display:inline-block; width:100px; text-align:right; padding-right:15px;}
.dl2 div{ margin:10px 0}
.tit{ font-size:18px}
.txtlist li{ height:100px; background:#DCF3FA; padding:5px; margin-bottom:20px; font-size:14px; line-height:22px}
.txtlist li img{ width:120px; display:block; float:left; margin:0 20px 0 0 }
.txtlist li a{ color:#000}
.imglist li{ float:left; width:24%; padding:0.5%;}
.imglist li img{ width:100% ; height:200px}
.bar{ border-bottom:#ccc solid 1px; font-size:16px; padding-bottom:10px}
#banner {
  width: 100%;
  height: 450px;
  position: relative;
}

#banner ul#b_pic li {
  width: 100%;
  height: 450px;
  overflow: hidden;
  position: absolute;
  top: 0;
  display: none;
}

#banner ul#b_pic li img {
  width: 100%;
  height: 450px;
  display: block;
}

#banner ul#b_an {
  position: absolute;
  width: 100%;
  bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#banner ul#b_an li {
  width: 13px;
  height: 13px;
  background: #fff;
  margin: 0 3px;
  border-radius: 13px
}

.v{ background:#000}

六、遇到問題及如何解決🔍

七、實訓總結😊

js css html web div+css 戰士 休賽期
上一篇: 自己實作atoi函數
下一篇: r語言c函數定義函數,R語言自定義函數

繼續閱讀