dreamweaver郑州旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板
家鄉旅游景點網頁作業制作 網頁代碼運用了DIV盒子的使用方法，如盒子的嵌套、浮動、margin、border、background等屬性的使用，外部大盒子設定居中，內部左中右布局，下方橫向浮動排列，大學學習的前端知識點和布局方式都有運用，CSS的代碼量也很足、很細致，使用hover來完成過渡效果、鼠標滑過效果等，使用表格、表單補充模塊，為方便新手學習頁面中沒有使用js有需要的可以自行添加。
?精彩專欄推薦👇🏻👇🏻👇🏻
? 【作者主頁——🔥獲取更多優質源碼】
? 【web前端期末大作業——🔥🔥畢設項目精品實戰案例(1000套)】
文章目錄🌰
- 一、網頁介紹📖
- 一、網頁效果🌌
- 二、代碼展示😈
- 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 href="css/css.css" rel="stylesheet" type="text/css" /> <body> <div><audio src="media/1.mp3" autoplay=""></audio><!--音頻--><div class="banner"><img src="images/4a8a641594a443688149db220deebd61.jpeg"></div><div class="gundong"><marquee><p>歡迎觀賞鄭州美景</p></marquee></div><div class="nav"><a href="index.html">鄭州簡介</a><a href="meishi.html">特色美食</a><a href="zhaopian.html">美景照片</a><a href="fengjing.html">景點介紹</a><a href="shipin.html">美景鄭州</a></div><div class="main"><div class="cont"> <p>鄭州市，簡稱“鄭”，是河南省會，地處華北平原南部，河南省中部偏北，黃河下游。 北臨黃河，西依嵩山，東南為廣闊的黃淮平原。鄭州在3600年前，成為中國商代早期和中期都城，是商文明的發源地。全市各類文物古跡達10000余處，其中國家級重點文物保護單位38處43項。包括登封“天地之中”歷史建筑群、黃帝故里、商城遺址等歷史名勝。鄭州地處中國地理中心，是全國重要的鐵路、航空、高速公路、電力、郵政電信主樞紐城市，中國中部地區重要的工業城市。目前有汽車、裝備制造、煤電鋁、食品、紡織服裝、電子信息等六大優勢產業。鄭州歷史上曾五次為都 ，擁有不可移動文物近萬處，其中世界文化遺產2處 ，全國重點文物保護單位74處80項 。 </p><p>鄭州市位于秦嶺東段余脈、中國第二級地貌臺階與第三級地貌臺階的交接過渡地帶。總的地勢為西南高、東北低，呈階梯狀下降，由西部、西南部構造侵蝕中低山，逐漸下降過渡為構造剝蝕丘陵、黃土丘陵、傾斜（崗）平原和沖積平原，形成較為完整的地貌序列。</p><p>鄭州市屬北溫帶大陸性季風氣候，冷暖氣團交替頻繁，春夏秋冬四季分明。冬季漫長而干冷，雨雪稀少；春季干燥少雨多春旱，冷暖多變大風多；夏季比較炎熱，降水高度集中；秋季氣候涼爽，時間短促。</p><p>鄭州是華夏文明的重要發祥地、國家歷史文化名城 、國家重點支持的六個大遺址片區之一、中國八大古都之一、世界歷史都市聯盟成員 。 </p><img src="images/CBD玉米樓.jpeg"><img src="images/下載 (1).jfif"></div></div><div class="foot"><p>家鄉美食美景介紹</p></div> </body> </html>2.CSS樣式代碼 🏠
@charset "utf-8"; * {margin:0;padding:0; } body {font-size:14px;color:#6e6e6e;background: url(../images/bj.jpg) top center fixed;} a,a:link,a:visited {color:#7f0d0d;text-decoration:none; } a:hover {text-decoration: underline; } .banner{width:980px;margin:auto; } .banner img {width:100%; } .gundong{width:980px;height:50px;line-height:50px;background:#dd9137;margin:auto;margin-bottom:10px;text-align:center;font-size:28px;color:#ffffff; } .nav{width:980px; height:60px;line-height:60px;background-color:#CCCCCC; margin:10px auto; text-align:center; } .nav a{ font-size:24px; margin:10px; } .nav a:hover{ color:#F00; text-decoration:none; } .main{width:980px; height:auto; background:#ffffff; margin:auto;padding-top:50px;padding-bottom:50px; } .main .cont{width:800px;margin:auto; } .main .cont p{padding:10px;font-size:16px;color:333;text-indent:32px;line-height:28px; } .main .cont img{width:750px;height:500px; } .main video{display:block;margin:auto; } .foot{width:980px;height:50px;line-height:50px;background:#fff;margin:auto;text-align:center;margin-top:30px;font-size:20px;color:#000; }三、個人總結😊
一套合格的網頁應該包含(具體可根據個人要求而定)
四、更多干貨🚀
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.??【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.以上內容技術相關問題😈歡迎一起交流學習👇🏻👇🏻👇🏻🔥
總結
以上是生活随笔為你收集整理的dreamweaver郑州旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OKR真正有效的的4个最佳实践 [OKR
- 下一篇： HTML三大布局方式