家鄉旅遊景點網頁作業制作網頁代碼運用了DIV盒子的使用方法，如盒子的嵌套、浮動、margin、border、background等屬性的使用，外部大盒子設定居中，内部左中右布局，下方橫向浮動排列，大學學習的前端知識點和布局方式都有運用，CSS的代碼量也很足、很細緻，使用hover來完成過渡效果、滑鼠滑過效果等，使用表格、表單補充子產品，為友善新手學習頁面中沒有使用js有需要的可以自行添加。

⚽精彩專欄推薦👇🏻👇🏻👇🏻

❤ 【作者首頁——🔥擷取更多優質源碼】

❤ 【web前端期末大作業——🔥🔥畢設項目精品實戰案例(1000套)】

(文章目錄🌰)

一、網頁介紹📖

1 網頁簡介：此作品為學生個人首頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水準, 非常适合初學者學習使用。

2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟體進行運作及修改編輯等操作）。

3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、滑鼠滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視訊、音頻元素、Flash，同時設計了Logo（源檔案）所需的知識點。

一、網頁效果🌌

二、代碼展示😈

1.HTML結構代碼 🧱

代碼如下（示例）：以下僅展示部分代碼供參考~

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首頁-the Imperial Palace</title>
<meta name="keywords" content="the Imperial Palace" />
<meta name="description" content="the Imperial Palace" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="top">
<div class="logo"><a rel="nofollow" href="index.html"><img src="images/logo.png" height="60" /></a></div>
<div class="webnav">
<ul>
<li class="licur"><a rel="nofollow" href="index.html" title="網站首頁">網站首頁</a></li>
<li><a rel="nofollow" href="list.html" title="景點清單">景點清單</a></li>
<li><a rel="nofollow" href="lyeat.html" title="景點小吃">景點小吃</a></li>
<li><a rel="nofollow" href="lygl.html" title="旅遊攻略">旅遊攻略</a></li>
<li><a rel="nofollow" href="vod.html" title="視訊欣賞">視訊欣賞</a></li>
<li><a rel="nofollow" href="lx.html" title="投訴建議">投訴建議</a></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
<div class="banner">
<img src="images/banner.jpg" height="279" width="1000" /> 
</div>
<div class="index_con">
<div class="left">
<div class="jsbox">
<h3 class="s1"><span class="s1">故宮簡介</span></h3>
<div class="js_con">
北京故宮是中國明清兩代的皇家宮殿，舊稱紫禁城，位于北京中軸線的中心。北京故宮以三大殿為中心，占地面積72萬平方米，建築面積約15萬平方米，有大小宮殿七十多座，房屋九千餘間 。
  京故宮是世界上現存規模最大、儲存最為完整的木質結構古建築之一，是國家AAAAA級旅遊景區， 1961年被列為第一批全國重點文物保護機關；  1987年被列為世界文化遺産。</div>
</div>

<div class="pic_box">
<h3 class="s3"><span class="s3">故宮美景</span></h3>
<script src="js/jquery-1.4.3.min.js"></script>
<script src="js/jQuery-jcMarquee.js" type="text/javascript"></script>
<script>
$(function(){
    $('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':20 });
	// DIVCSS5提示：10px代表間距，第二個20代表滾動速度
});
</script>
<div class="pic_con" id="Marquee_x">
 <ul>
            <li>
                <div><a rel="nofollow" href="#" target="_blank">
				<img src="images/1.jpg" />
				</a>
				<span>故宮全景</span>
				</div>
				<div><a rel="nofollow" href="#" target="_blank">
				<img src="images/2.jpg" />
				</a>
				<span>武英殿</span>
				</div>
				
				<div><a rel="nofollow" href="#" target="_blank">
			<img src="images/3.jpg" />
				</a>
				<span>文華殿</span>
				</div>
				
				
				<div><a rel="nofollow" href="#" target="_blank">
				<img src="images/4.jpg" />
				</a>
				<span>景仁宮</span>
				</div>
				
				
				<div><a rel="nofollow" href="#" target="_blank">
			<img src="images/5.jpg" />
				</a>
				<span>禦花園</span>
				</div>
				<div><a rel="nofollow" href="#" target="_blank">
				<img src="images/6.jpg" />
				</a>
				<span>珍寶館</span>
				</div>
				
				<div><a rel="nofollow" href="#" target="_blank">
				<img src="images/7.jpg" />
				</a>
				<span>慈甯宮</span>
				</div>
				
				
				<div><a rel="nofollow" href="#" target="_blank">
				<img src="images/8.jpg" />
				</a>
				<span>神武門</span>
				</div>
				
				
				
		  </li>
	</ul>
</div>


</div>
<div class="about">
<h3 class="s3"><span class="s3">關于我們</span></h3>
<div class="about_con">
<p><span class="a1">網站名稱：</span><span class="b1">故宮旅遊網</span></p>
<p><span class="a1">學校名稱：</span>xxxx</p>
<p><span class="a1">位址：</span>xxxx</p>
<p><span class="a1">姓名：</span><span class="b1">xxxxx</span></p>
</div>

</div>
</div>


<div class="right">
<div class="lb_box">
<h3 class="s2"><span class="s2">今日推薦</span></h3>
<div class="lb_con">
<img src="images/1.jpg" />
</div>
</div>

<div class="list_box">
<h3 class="s2"><span class="s2">相關資訊</span></h3>
<div class="list_con">
<ul>
<li class="news"><a rel="nofollow" href="#">故宮遊覽路線</a></li>

<li class="news"><a rel="nofollow" href="#">故宮的曆史介紹</a></li>

<li class="news"><a rel="nofollow" href="#">今日故宮開放景點</a></li>

<li class="news"><a rel="nofollow" href="#">故宮四季旅遊介紹</a></li>

<li class="news"><a rel="nofollow" href="#">故宮季節美景觀賞</a></li>
</ul>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="footer">
<p>Copyright &#169; 2019-2020,xxx, All Rights Reserved</p>
</div>
<embed src="images/All.mp3" width="1" height="1" type="audio/mpeg" loop="true" autostart="true">
</body>
</html>

2.CSS樣式代碼 🏠

body, p, form, h1, h2, h3, h4, h5, h6, td, th, table, div, ul, li, ol, dl, dt, dd, input, select {	margin:0;padding:0;}
body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333333; background:#f8f8f8}
a:link, a:visited {text-decoration:none; color:#585858;}
a:hover {text-decoration:none;color:#0766A6;}
.border01{ border:#E3E3E3 1px solid;}
img {border:0;}
ul,ul li{list-style-type:none;}
.clear {clear:both;height:0px;line-height:0;padding:0;border:0;overflow:hidden;font-size: 0px;}
.blank10 {height:10px;overflow:hidden;line-height:0;font-size:0;clear:both;}
h1,h2,h3,h4,h5,h6{ font-size:14px; font-weight:bold;}
.font14{ font-size:14px;}
/*網站頭部*/
.top{ width:1002px; margin:auto; border-bottom:2px solid #006699; background:#EAEAEA; }


.logo{ float:left; width:350px; height:60px; overflow:hidden;display:inline;}
.righttel{ float:right; width:200px; height:30px; overflow:hidden; margin-right:40px; margin-top:10px; display:inline;}
.webnav{ float:right; text-align:right; height:60px; line-height:60px; overflow:hidden;}
.webnav ul{padding-right:20px;}
.webnav li{ float:left;height:60px; line-height:60px; font-family:'微軟雅黑',Arial; font-weight:bold;margin-right:10px; padding-left:10px; padding-right:10px; font-size:14px}
.webnav li a{ display:block}
.webnav li a:link,.webnav li a:visited{ color:#0766A6;}
.webnav li:hover{ background:#0E7CB0; color:#FFFFFF}
.webnav li a:hover{color:#FFFFFF}
.banner{ width:1002px; margin:0 auto; margin-top:10px; }
.banner img{ width:1000px; height:279px;}

/*首頁主體内容*/
.index_con{ width:1002px; margin:0 auto; margin-top:15px;}
.jsbox{ width:660px; background:#FFFFFF; border:1px solid #CCCCCC}
h3.s1{ height:30px; padding-left:20px; background:#526B37; line-height:30px; font-size:14px; font-weight:900; }
.js_con{ padding:20px 10px; text-indent:2em; font-size:12px; background:#EBE7D7; line-height:180%}
.index_con .left{ float:left; width:660px;}
.index_con .right{ float:right; width:330px;}
span.s1{ display:block; width:120px; height:30px; text-align: center; padding:0px 6px; background:#E7E2CE; color:#323126}
.lb_box{width:330px;}
.lb_con{ width:300px; margin:0 auto; padding:0px 15px; background:#EBE7D7}
.lb_con img{ width:300px;height:288px;}
h3.s2{ height:25px; padding-left:20px; padding-top:5px; background:#D5C794; font-size:14px; font-weight:900; border-bottom:2px solid #526B37 }
span.s2{ display:block; width:120px; height:25px;line-height:25px;text-align: center; padding:0px 6px; background:#526B37; color: #FFFFFF;
border-top-left-radius: 5px;border-top-right-radius: 5px;}
.pic_box{width:660px; background:#FFFFFF; border:1px solid #CCCCCC; margin-top:20px;}
.pic_con{ padding:10px 10px; background:#EBE7D7; }

#yj img{ max-width:638px; display:block; margin:0 auto}

三、個人總結😊

一套合格的網頁應該包含(具體可根據個人要求而定)

頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分；
所有頁面互相超連結，可到三級頁面，有5-10個頁面組成；
頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；
菜單美觀、醒目，二級菜單可正常彈出與跳轉；
要有JS特效，如定時切換和手動切換圖檔新聞；
頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用；
頁面清爽、美觀、大方，不雷同。
網站前端程式不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

一個簡單的HTML網頁故宮學生網頁設計作品 dreamweaver作業靜态HTML網頁設計模闆旅遊景點網頁作業制作一、網頁介紹📖一、網頁效果🌌二、代碼展示😈三、個人總結😊四、更多幹貨🚀

一、網頁介紹📖

一、網頁效果🌌

二、代碼展示😈

1.HTML結構代碼 🧱

2.CSS樣式代碼 🏠

三、個人總結😊

四、更多幹貨🚀

繼續閱讀

Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動

HTML addEventListener() 方法和attachEvent()差別分析

web前端布局練手項目

Django之驗證碼（十七）驗證碼

Vue項目 - 單檔案元件和Vue中的路由

龍珠訓練營task04

趕工心得（一）

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

一個簡單的HTML網頁 故宮學生網頁設計作品 dreamweaver作業靜态HTML網頁設計模闆 旅遊景點網頁作業制作一、網頁介紹📖一、網頁效果🌌二、代碼展示😈三、個人總結😊四、更多幹貨🚀

一、網頁介紹📖

一、網頁效果🌌

二、代碼展示😈

1.HTML結構代碼 🧱

2.CSS樣式代碼 🏠

三、個人總結😊

四、更多幹貨🚀

繼續閱讀

一個簡單的HTML網頁故宮學生網頁設計作品 dreamweaver作業靜态HTML網頁設計模闆旅遊景點網頁作業制作一、網頁介紹📖一、網頁效果🌌二、代碼展示😈三、個人總結😊四、更多幹貨🚀