👨🎓靜态網站的編寫主要是用 HTML DⅣV+ CSSJS等來完成頁面的排版設計👩🎓，一般的網頁作業需要融入以下知識點：div布局、浮動定位、進階css、表格、表單及驗證、js輪播圖、音頻視訊Fash的應用、uli、下拉導航欄、滑鼠劃過效果等知識點，學生網頁作業源碼，制作水準和原創度都适合學習或交作業用。
文章目錄🌰
- 一、網站題目👨🎓
- 二、網站描述✍️
- 三、網站介紹📖
- 四、網站效果🌐
- 五、網站代碼制作部分 📕
- 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代碼）。
四、網站效果🌐
網站設計制作的重點是對網頁整體設計的布局和對網頁整體内容的選題。
網站設計方面：計劃實作簡潔大氣的網頁設計效果。
網站功能方面：計劃實作各個頁面之間的連結跳轉功能、滑鼠懸停在文字上的變色功能、簡單的首頁動态圖檔切換功能、簡單的表單送出功能。
五、網站代碼制作部分 📕
（1）網站首頁布局确定好各個闆塊的内容，并使用了DIV+CSS布局。另外首頁使用到的知識主要有圖檔插入、圖檔動态切換、導覽列、利用CSS固定字型、文字大小、文字顔色、背景顔色。
（2）頁面使用了DIV+CSS布局，使用到的知識主要有圖檔插入、導覽列、利用CSS固定字型、文字大小、文字顔色、背景顔色。
（3）表單部分頁面使用了DIV+CSS布局，使用到的知識主要有運用了form表單、input文本框和input送出按鈕，完成表單資訊收集。利用CSS設定input送出按鈕文字大小和顔色。
HTML結構代碼🧱
<!DOCTYPE HTML>
<html>
<head>
<title>首頁</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link href="css/slider.css" rel="stylesheet" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="container" style="width:100%;padding: 0px;margin: 0px;">
<div class="wrap-box"></div>
<div class="header">
<div class="wrap">
<div class="header-top ">
<div class="cssmenu">
<ul>
<li class="active">
<a href="">
<span>首頁</span>
</a>
</li>
<li>
<a href="expo.html">
<span>博覽</span>
</a>
</li>
<li class="has-sub">
<a href="life.html">
<span>熱門</span>
</a>
</li>
<li>
<a href="login.html">
<span>登入</span>
</a>
</li>
<li class="last">
<a href="register.html">
<span>注冊</span>
</a>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div class="slider">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="picture/baohu5.jpg" alt="">
<img src="picture/baohu2.jpg" alt="">
<img src="picture/baohu3.jpg" alt="">
<img src="picture/baohu4.jpg" alt="">
<img src="picture/banner2.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="main">
<div class="wrap">
<div class="about">
<div class="about-top row">
<div class="col span_1_of_about col-md-8 col-ms-12">
<h3>熱門目的地</h3>
<div class="services-box">
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic10.jpg" alt="">
<div class="mask">周莊</div>
</div>
<p class="text1">周莊</p>
</div>
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic11.jpg" alt="">
<div class="mask">巴厘島</div>
</div>
<p class="text1">巴厘島</p>
</div>
<div class="clear"></div>
</div>
<div class="services-box">
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic12.jpg" alt="">
<div class="mask">羅浮宮</div>
</div>
<p class="text1">羅浮宮</p>
</div>
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic13.jpg" alt="">
<div class="mask">洱海</div>
</div>
<p class="text1">洱海</p>
</div>
<div class="clear"></div>
</div>
<div class="services-box">
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic14.jpg" alt="">
<div class="mask">故宮</div>
</div>
<p class="text1">故宮</p>
</div>
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic15.jpg" alt="">
<div class="mask">八達嶺長城</div>
</div>
<p class="text1">八達嶺長城</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="col span_1_of_about1">
<h3>遊記|書籍</h3>
<ul class="comments-custom unstyled">
<li class="comments-custom_li">
<div class="icon"></div>
<div class="right-text">
<h4 class="comments-custom_h">日本花見</h4>
<div class="comments-custom_txt">
<a href="#" title="Go to this comment">爛漫春光，賞盡櫻吹雪</a>
</div>
</div>
<div class="clear"></div>
</li>
<li class="comments-custom_li">
<div class="icon"></div>
<div class="right-text">
<h4 class="comments-custom_h">芭提雅</h4>
<div class="comments-custom_txt">
<a href="#" title="Go to this comment">風光旖旎的東方夏威夷</a>
</div>
</div>
<div class="clear"></div>
</li>
<li class="comments-custom_li">
<div class="icon"></div>
<div class="right-text">
<h4 class="comments-custom_h">蘇梅島</h4>
<div class="comments-custom_txt">
<a href="#" title="Go to this comment">拒絕好萊塢選景榮耀的純天然海島</a>
</div>
</div>
<div class="clear"></div>
</li>
<li class="comments-custom_li">
<div class="icon"></div>
<div class="right-text">
<h4 class="comments-custom_h">巴厘島</h4>
<div class="comments-custom_txt">
<a href="#" title="Go to this comment">極具人文&熱帶風情的度假天堂</a>
</div>
</div>
<div class="clear"></div>
</li>
<li class="comments-custom_li">
<div class="icon"></div>
<div class="right-text">
<h4 class="comments-custom_h">甲米</h4>
<div class="comments-custom_txt">
<a href="#" title="Go to this comment">詩情畫意、宛如天堂秘境的熱帶半島</a>
</div>
</div>
<div class="clear"></div>
</li>
</ul>
<h3>熱門國家排行榜</h3>
<div class="poling">
<div class="poll">
<div class="text2">中國</div>
<div class="percent"> 48%</div>
<div class="clear"></div>
<div class="skills">
<div style="width:45%"> </div>
</div>
</div>
<div class="poll">
<div class="text2">日本</div>
<div class="percent">29%</div>
<div class="clear"></div>
<div class="skills">
<div style="width:35%"> </div>
</div>
</div>
<div class="poll">
<div class="text2">美國</div>
<div class="percent">19%</div>
<div class="clear"></div>
<div class="skills">
<div style="width:25%"> </div>
</div>
</div>
<div class="poll">
<div class="text2">澳洲</div>
<div class="percent">10%</div>
<div class="clear"></div>
<div class="skills">
<div style="width:15%"> </div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="about-bottom row">
<div class="about-topgrids">
<div class="about-topgrid1">
<h3>旅遊攻略推薦</h3>
<img src="picture/xian.jpg" title="name">
<div class="command">
<h3>西安</h3>
<div class="sidebar-nav">
<ul>
<li>
<a href="">詳細的吃、住、行、景點、線路、實用資訊</a>
</li>
</ul>
</div>
<p>
<a href="#">any</a>點評了下京區的
<a href="#">京都站前天然</a>
</p>
<p>
<a href="#">冷冷冷</a>點評了西城的
<a href="#">北京合德緣四</a>
</p>
<p>
<a href="#">羊羊羊</a>點評了東港區的
<a href="#">日照晨陽漁家</a>
</p>
<p>
<a href="#">…展開…</a>
</p>
</div>
</div>
</div>
<div class="about-histore">
<div class="weizhi">
<div>
<h3 style="display: inline-block;">未知旅行實驗室</h3>
<a href="#">檢視更多 ></a>
</div>
<img src="picture/weizhi.jpg" alt="" style="width: 294px; height: 184px;">
</div>
<div>
<h3>旅行家專欄</h3>
<div class="sidebar-nav">
<ul>
<li>
<a href="">西班牙+法國南部深度16晚19日郵輪之旅</a>
</li>
<li>
<a href="">香港直飛斯裡蘭卡6天5晚半自助遊</a>
</li>
<li>
<a href="">[上海送簽]日本單次旅遊簽證</a>
</li>
<h4>
<img src="picture/marker2.png" alt="">更多</h4>
</ul>
</div>
<div class="clear"> </div>
</div>
</div>
<div class="about-services">
<h3>最新活動</h3>
<img src="picture/activity.jpg" alt="">
<br>
</div>
<div class="about-services">
<h3>加入我們</h3>
<img src="picture/join.jpg" alt="">
<br>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="wrap">
<div class="footer-top">
<div class="col_1_of_4 span_1_of_4">
<h3>關于我們</h3>
<ul class="first">
<li>
<a href="#">關于網站</a>
</li>
<li>
<a href="#">隐私政策</a>
</li>
<li>
<a href="#">服務協定</a>
</li>
<li>
<a href="#">網站地圖</a>
</li>
<li>
<a href="#">聯系我們</a>
</li>
<li>
<a href="#">加入我們</a>
</li>
</ul>
</div>
<div class="col_1_of_4 span_1_of_4">
<h3>旅行服務</h3>
<ul class="first">
<li>
<a href="#">旅遊攻略</a>
</li>
<li>
<a href="#">旅遊問答</a>
</li>
<li>
<a href="#">旅遊指南</a>
</li>
<li>
<a href="#">旅遊咨詢</a>
</li>
<li>
<a href="#">旅遊特價</a>
</li>
</ul>
</div>
<div class="col_1_of_4 span_1_of_4">
<h3>去哪兒</h3>
<ul class="first">
<li>
<a href="#">酒店預定</a>
</li>
<li>
<a href="#">國際租車</a>
</li>
<li>
<a href="#">旅遊保險</a>
</li>
<li>
<a href="#">定火車票</a>
</li>
<li>
<a href="#">商家入駐</a>
</li>
</ul>
</div>
<div class="col_1_of_4 span_1_of_4 footer-lastgrid">
<h3>聯系我們</h3>
<ul class="follow_icon">
<li>
<a href="#">
<img src="picture/qq.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="picture/rss.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="picture/wx.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="picture/wb.png" alt="">
</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html> CSS樣式代碼🏡
.slider{
position:relative;
}
.theme-default .nivoSlider {
position:relative;
background:#fff url(../image/loading.gif) no-repeat 50% 50%;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding-top:10px;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:15px;
height:15px;
background:#FFF;
border-radius:2em;
text-indent:-9999px;
border:0;
margin:0 4px;
}
.theme-default .nivo-controlNav a.active,.theme-default .nivo-controlNav a:hover{
background:#C0392B;
}
.theme-default .nivo-directionNav a {
display:block;
width:40px;
height:40px;
background:url(../image/l-r-arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:0px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
background-position:-40px 0;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
background:url(../image/prev.png) no-repeat;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
position: absolute;
bottom:25px;
z-index: 9;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
@media all and (max-width:320px) {
.nivo-controlNav {
bottom:5px;
}
}