當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
web前端 html+css+javascript网页设计实例 家乡网站制作
生活随笔
收集整理的這篇文章主要介紹了
web前端 html+css+javascript网页设计实例 家乡网站制作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🌩? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進入主頁—🚀獲取更多源碼】
🎓 web前端期末大作業： 【📚HTML5網頁期末作業 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】
📂文章目錄
- 二、📚網站介紹
- 三、🔗網站效果
- ??1.視頻演示
- 🧩 2.圖片演示
- 四、💒 網站代碼
- 🧱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.視頻演示
D15JP- 我的家鄉安慶 (7頁)HTML+CSS
🧩 2.圖片演示
四、💒 網站代碼
🧱HTML結構代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>家鄉安慶</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div class="page"><div class="banner"><img src="img/banner.jpg" alt=""></div><div class="nav"><ul><a href="index.html"><li>首頁</li></a><a href="yg.html"><li>歷史沿革</li></a><a href="zy.html"><li>自然資源</li></a><a href="jj.html"><li>經濟</li></a><a href="wh.html"><li>歷史文化</li></a><a href="fj.html"><li>風景名勝</li></a><a href="ms.html"><li>特產美食</li></a></ul></div><div class="mid"><h1 class="title">安慶</h1><div class="wz"><p>安慶，簡稱“宜”，安徽省地級市，是長江三角洲中心區27城之一，位于安徽省西南部，長江下游北岸，皖河入江處，西接湖北，南鄰江西，西北靠大別山主峰，東南倚黃山余脈，總面積13589.99平方千米，其中市區面積821平方千米。截至2020年11月，安慶市下轄3個區、5個縣、代管2個縣級市。根據第七次人口普查數據，截至2020年11月1日零時，安慶市常住人口為416.5284萬人。2020年，安慶市實現地區生產總值2467.7億元。</p><img src="img/t1.jpg" alt=""><p>安慶是國家級歷史文化名城，素有“文化之邦”、“戲劇之鄉”、“禪宗圣地”的美譽。是“桐城派”的故里，京劇鼻祖徽班成長的搖籃，是黃梅戲形成和發展的地方，也是中國新文化運動先驅陳獨秀、“兩彈元勛”鄧稼先、通俗小說大師張恨水等人的故鄉。古皖文化、禪宗文化、戲劇文化和桐城派文化在這里交相輝映，形成了獨具特色的安慶文化。清咸豐十一年（1861年）曾國藩創辦的安慶內軍械所，制造了中國第一臺蒸汽機和第一艘機動船。</p><p>東周時期安慶是古皖國所在地，安徽省簡稱“皖”即由此而來。南宋紹興十七年（1147年），改舒州德慶軍為舒州安慶軍，“安慶”自此得名，安慶城始建于嘉定十年（1217年）。東晉詩人郭璞曾稱“此地宜城”，故安慶又別名“宜城”。2019年12月，《長江三角洲區域一體化發展規劃綱要》將安慶定位為長三角區域重點城市。</p></div><h2 class="title">宜城文化</h2><div class="wz bg1"><p><img src="img/t2.jpg" class="fl" alt="">黃梅戲是中國五大戲曲劇種之一，影響深遠。黃梅戲起源于湖北黃梅，原名黃梅調、采茶戲等，現流布于安徽省安慶市、湖北省黃梅縣等地。</p><p>清末湖北省黃梅縣一帶的采茶調傳入毗鄰的安徽省懷寧縣等地區，與當地民間藝術結合，并用安慶方言歌唱和念白，逐漸發展為一個新的戲曲劇種，當時稱為懷腔或懷調，這就是早期的黃梅戲。其后黃梅戲又借鑒吸收了青陽腔和徽調的音樂、表演和劇目，開始演出“本戲”。后以安慶為中心，經過一百多年的發展，黃梅戲成...</p><a href="wh.html" class="more">了解更多</a></div><div class="wz bg1"><p><img src="img/t3.jpg" class="fr" alt="">安慶市境內有國家級風景名勝區2處、省級風景名勝區6處，國家森林公園5個，國家歷史文化名城1座、省級歷史文化名城2座，世界地質公園1處（天柱山），國家地質公園1處（天柱山），國家級自然保護區（鷂落坪）1個，國家級重點文物保護單位16個、省級重點文物保護單位160個，國家級非物質文化遺產16種、省級非遺23種。具有雄、奇、靈、秀特色的天柱山，為國家級5A風景名勝區，景區面積83.45平方千米，保護帶面積333平方千米。司空山因古洞、危崖、險峰、瀑布等景觀稱勝，更因禪宗二祖在此筑壇說法而揚名。長江絕島”小孤山矗立江中，素有“江上小蓬萊...</p><a href="fj.html" class="more">了解更多</a></div></div><div class="foot">我的家鄉安慶</div></div></body> </html>🏠CSS樣式代碼
@charset "utf-8"; *{margin: 0;padding: 0;border: 0;outline: 0; } li{list-style: none; } a{color: #000;text-decoration: none; } .fl{float: left; } .fr{float: right; } .clear{clear: both; } body{background-color: #fafafa;font-size: 12px;color: #333; } .page{width: 1000px;margin: 0 auto;background-color: #FFF; } .banner{width: 100%;height: 400px;overflow: hidden; } .banner img{width: 100%;height: 100%;object-fit: cover; } .nav{width: 100%;background-color: #77488b; } .nav ul{width: 994px;margin: 0 auto;overflow: hidden; } .nav li{width: 142px;text-align: center;line-height: 40px;font-size: 16px;color: #FFF;float: left; }.nav li:hover{background-color: #6b407d; }.mid{width: 100%;padding: 20px;box-sizing: border-box; } h1.title{font-size: 36px;line-height: 50px;font-weight: 400;text-align: center;margin-bottom: 20px; } .wz{width: 100%;padding: 15px;box-sizing: border-box;overflow: hidden; }.wz b{display: block;margin-top: 10px;margin-bottom: 20px;font-size: 16px;font-weight: normal; }.wz p{text-indent: 2em;line-height: 35px;margin-bottom: 10px; }.wz>img{display: block;margin: 10px auto; }.wz p.tu{text-align: center; }.wz p.tu>img{margin: 5px; }.wz p>img{margin: 10px; }.bg1{background-color: #e0c8d1;border-radius: 10px;margin-top: 15px; }a.more{display: inline-block;width: 80px;text-align: center;line-height: 36px;border: 1px solid #fefefe;border-radius: 5px;background-color: #fefefe;margin-left: 20px;margin-top: 10px;transition: border-color .3s,background-color .3s; }a.more:hover{border-color: #333;background-color: transparent; }h2.title{font-size:22px ;font-weight: 400;line-height: 24px;border-bottom: 1px solid #77488b;padding-bottom: 10px; } .foot{width: 100%;background-color: #77488b;text-align: center;line-height: 40px;font-size: 16px;color: #FFF; }.fj{width: 100%;margin-top: 20px; }.fj li{width: 300px;height: 300px;margin: 0 10px 20px;float: left;cursor: pointer; }.fj li img{display: block;width: 100%;height: 220px;object-fit: cover;margin-bottom: 10px; } .fj li h2{text-align: center;line-height: 36px;font-size: 18px;font-weight: 500; } .fj li p{width: 100%;line-height: 26px;overflow: hidden;text-overflow: ellipsis;color: #666;white-space:nowrap;padding: 5px; }.fj li p:hover{overflow: visible;white-space: normal;color: #FFF;background-color: rgba(0,0,0,.7);position: relative;border-radius: 5px;z-index: 999; }五、🎁更多源碼
1.如果我的博客對你有幫助 請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻🉑關注我| 獲取更多源碼】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、等!
📣以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻
總結
以上是生活随笔為你收集整理的web前端 html+css+javascript网页设计实例 家乡网站制作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 媒体查询加上rem实现页面字体大小自适应
- 下一篇： 百度知道1000指数的关键词留链接排名到