家鄉旅遊景點網頁作業制作 網頁代碼運用了DIV盒子的使用方法，如盒子的嵌套、浮動、margin、border、background等屬性的使用，外部大盒子設定居中，内部左中右布局，下方橫向浮動排列，大學學習的前端知識點和布局方式都有運用，CSS的代碼量也很足、很細緻，使用hover來完成過渡效果、滑鼠滑過效果等，使用表格、表單補充子產品，為友善新手學習頁面中沒有使用js有需要的可以自行添加。
文章目錄🌰
- 一、網頁介紹📖
- 一、網頁效果🌌
- 二、代碼展示😈
- 1.HTML結構代碼 🧱
- 2.CSS樣式代碼 🏠
- 三、個人總結😊
- 四、更多幹貨🚀
一、網頁介紹📖
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>
<html>
<head>
<meta charset="utf-8">
<title>無标題文檔</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<div class="head">
<div class="ban"><img src="images/ban.jpg" width="1000" height="500" border="0"></div>
<div class="nav">
<ul>
<li><a href="index.html">網站首頁</a></li>
<li><a href="zhuti.html">主體建築</a></li>
<li><a href="wenwu.html">文物遺存</a></li>
<li><a href="lisji.html">曆史文化</a></li>
<li><a href="lvyou.html">旅遊指南</a></li>
</ul>
</div>
<div class="xia">
<h2>少林寺</h2>
<div class="zi">
<img src="images/t.jpg" width="268" height="310" align="right" style=" margin-left:20px;">
<Br>
<p>少林寺，位于河南省鄭州市登封市嵩山五乳峰下，因坐落于嵩山腹地少室山茂密叢林之中，故名“少林寺”。是中國佛教禅宗祖庭和中國功夫的發源地之一，世界文化遺産、全國重點文物保護機關、國家AAAAA級旅遊景區。</p>
<p>少林寺始建于北魏太和十九年（495年），是孝文帝為了安置他所敬仰的印度高僧跋陀尊者，在與都城洛陽相望的嵩山少室山北麓敕建而成。少林寺常住院占地面積約57600平方米，現任方丈是曹洞正宗第47世、第33代嗣祖沙門釋永信。 少林寺是世界著名的佛教寺院，是漢傳佛教的禅宗祖庭，在中國佛教史上占有重要地位，被譽為“天下第一名刹”。因其曆代少林武僧潛心研創和不斷發展的少林功夫而名揚天下，素有“天下功夫出少林，少林功夫甲天下”之說。</p>
<p>2010年8月，包括少林寺常住院、初祖庵、塔林在内的天地之中曆史建築群被聯合國科教文組織列為世界文化遺産。</p>
<p></p>
</div><div class="clearit"></div>
<h2>布局結構</h2>
<div class="zi">
<img src="images/t1.jpg" align="right" style=" margin-left:20px;">
<Br>
<p>少林寺常住院建築在河南登封少溪河北岸，從山門到千佛殿，共七進院落，總面積約57600平方米。主要包括常住院、塔林和初祖庵等。常住院的建築沿中軸線自南向北依次是山門、天王殿、大雄寶殿、藏經閣（法堂）、方丈院、立雪亭、千佛殿。另外，寺西有塔林，北有初祖庵、達摩洞、甘露台，西南有二祖庵，東北有廣慧庵。</p>
<p>寺周還有同光禅師塔、法如禅師塔和法華禅師塔等古塔10餘座。</p>
</div><div class="clearit"></div>
</div>
<div class="foot">少林寺</div>
</div>
</body>
</html> 2.CSS樣式代碼 🏠
body, html, div, blockquote, img, label, p, h1, h2, h3, ul,
li, form, a
{margin: 0; padding: 0; border: 0; outline: none;}
body { font-family: "微軟雅黑";font-size: 14px;color: #000;line-height: 20px;text-align:left;}
a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
ul,li{list-style-type:none;}
.clearit{clear:both;}
.head {width:1000px; margin:0 auto; }
.ban {width:1000px; height:500px;}
.nav { width:1000px; height:50px; background:#20140e }
.nav ul li {width:200px; float:left; text-align:center; line-height:50px;}
.nav ul li a { color:#FFF; font-size:16px; width:200px;height:50px; display:block }
.nav ul li A:hover { background: #4f3423;}
.xia h2 { width:1000px; height:35px; border-bottom:1px solid #333; line-height:35px; margin-top:30px;}
.zi { margin-top:20px;}
.zi p { line-height:30px; text-indent:2em;}
.foot { width:1000px; height:60px; background:#20140e;text-align:center; line-height:60px; font-size:16px; margin-top:25px; color:#FFF }
.tu img { margin-top:20px; margin-left:20px;} 三、個人總結😊
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分；
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成；
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉；
- 要有JS特效，如定時切換和手動切換圖檔新聞；
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用；
- 頁面清爽、美觀、大方，不雷同。
- 網站前端程式不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。