基于html制作一个介绍自己家乡的网站，排版整洁，内容丰富，主题鲜明
🌩? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進入主頁—🚀獲取更多源碼】
🎓 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.視頻演示
D29JP-河北-8頁 html+css+js
🧩 2.圖片演示
四、💒 網站代碼
🧱HTML結構代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="css/all.css" rel="stylesheet" media="all" type="text/css" /> <title>河北</title> </head> <body> <div class="main"><nav class="menu"><ul class="center"><li><a href="index.html">首頁</a></li><li><a href="jieshao.html">介紹</a></li><li><a href="meishi.html">美食</a></li><li><a href="shipin.html">視頻</a></li></ul></nav><banner> <img src="images/201133058101657.jpg" alt=""> </banner><div class="content"><div class="pad"><div class="text"><p>河北，簡稱“冀”，是中華人民共和國省級行政區，省會石家莊。位于中國華北地區，界于北緯36°05′-42°40′，東經113°27′-119°50′之間，環抱首都北京，東與天津毗連并緊傍渤海，東南部、南部銜山東、河南兩省，西倚太行山與山西為鄰，西北部、北部與內蒙古交界，東北部與遼寧接壤，總面積18.88萬平方千米。 截至2020年11月1日零時，河北省常住人口7461.0235萬人 。</p><p>河北地處華北平原，東臨渤海、內環京津，西為太行山，北為燕山，燕山以北為張北高原，是中國唯一兼有高原、山地、丘陵、平原、湖泊和海濱的省份。地跨海河、灤河兩大水系。河北省地處溫帶大陸性季風氣候；地處沿海開放地區，是中國經濟由東向西梯次推進發展的東部地帶，是中國重要糧棉產區。2017年4月，中共中央、國務院決定設立河北雄安新區。2019年8月，國務院新設中國（河北）自由貿易試驗區。</p></div><div class="list"><ul><li> <img src="images/0.jpg" height="150" width="100%" /></li><li> <img src="images/1.jpg" height="150" width="100%" /></li><li> <img src="images/2.jpg" height="150" width="100%" /></li><li> <img src="images/3.jpg" height="150" width="100%" /></li></ul></div><video width="100%" controls><source src="video/v.mp4" type="video/mp4"></video></div><div class="clear"></div></div><footer class="end"><p>版權所有</p></footer> </div> </body> </html>🏠CSS樣式代碼
@charset "utf-8"; ul, li, h1, h2, h3, p {padding: 0;margin: 0;list-style: none } a{ text-decoration:none; color:#000} img {max-width: 100% } body {background: #fdf6f8 } .main {width: 1000px;position: relative;margin: 0px auto;background: #9bb3cc;color: #7c6946;line-height: 21px } .clear {clear: both } .banner {position: relative; clear:both } .menu {width: 100%;text-align: center} .menu li a {color: #fff; text-decoration:none } .menu li { width:25%; text-align:center; background:#a8bade;float:left; line-height:60px; font-size:20px} .right {float: right;width: 780px; } .left {min-height: 300px;z-index: 5;float: left;width: 220px;position: absolute; } .content {padding-bottom: 20px;font-size: 16px;line-height: 26px;display: inline-block;color: #eee;width: 100% } .end {clear: both;background: #333;color: #fff;padding: 30px 0;text-align: center; } .produce img {margin: 0 20px 20px 0 } .produce {line-height: 30px } .pad {font-size: 14px;padding: 20px;display: block } .pics p {margin: 1px;text-align: center } .text p{text-indent: 2rem; } .pad p{text-indent: 2rem; } .imglist {width: 840px;margin: 0 auto } .imglist li {float: left;width: 400px;margin: 10px;text-align: center } .scrollleft li img{height: 300px; } .list {width: 100%; } .list li {float: left;width: 23%;margin: 1%;overflow: hidden;text-align: center }.scrollleft {margin: 0 0px } .scrollleft li {text-align: center;width: 480px;margin: 10px;float: left } .scrollleft li img {border-radius: 5px; } .title {text-align: center;color: #F00;padding: 10px } .fl {float: left } .js div {width: 100%;clear: both;margin-bottom: 20px;float: left } .js div img {float: left;margin-right: 20px } .msg>div {padding: 10px } .bar {border-bottom: #000 solid 1px;margin: 10px;text-align: center;font-size: 18px;clear: both;font-weight: bold;padding: 25px } form {padding: 30px 0;color: #fff;display: block;margin: 0 auto; } form p {margin: 10px 0;font-size: 16px; } form input {width: 50%;height: 36px; } form textarea {width: 50%;height: 140px; } form button {width: 120px;height: 36px;background: #CCC;display: block;margin: 20px 0; }五、🎁更多源碼
1.如果我的博客對你有幫助 請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻🉑關注我| 獲取更多源碼】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、等!
📣以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻
總結
以上是生活随笔為你收集整理的基于html制作一个介绍自己家乡的网站，排版整洁，内容丰富，主题鲜明的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UNIX网络编程之一：代码环境搭建
- 下一篇： exe dll html病毒专杀,清除更