基于html制作一个介绍自己家乡的网站，排版整洁，内容丰富，主题鲜明
🌩? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進(jìn)入主頁—🚀獲取更多源碼】
🎓 web前端期末大作業(yè)： 【📚HTML5網(wǎng)頁期末作業(yè) (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
📂文章目錄
- 二、📚網(wǎng)站介紹
- 三、🔗網(wǎng)站效果
- ??1.視頻演示
- 🧩 2.圖片演示
- 四、💒 網(wǎng)站代碼
- 🧱HTML結(jié)構(gòu)代碼
- 🏠CSS樣式代碼
- 五、🎁更多源碼
二、📚網(wǎng)站介紹
📔網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁布局結(jié)構(gòu)。
📓網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。
📘網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
📒網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；
📙網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級(jí)頁面；
（2）📑 css文件包含：css全部頁面樣式,文字滾動(dòng), 圖片放大等；
（3）📄 js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁中運(yùn)用到j(luò)s代碼）。
三、🔗網(wǎng)站效果
??1.視頻演示
D29JP-河北-8頁 html+css+js
🧩 2.圖片演示
四、💒 網(wǎng)站代碼
🧱HTML結(jié)構(gòu)代碼
<!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>河北，簡(jiǎn)稱“冀”，是中華人民共和國(guó)省級(jí)行政區(qū)，省會(huì)石家莊。位于中國(guó)華北地區(qū)，界于北緯36°05′-42°40′，東經(jīng)113°27′-119°50′之間，環(huán)抱首都北京，東與天津毗連并緊傍渤海，東南部、南部銜山東、河南兩省，西倚太行山與山西為鄰，西北部、北部與內(nèi)蒙古交界，東北部與遼寧接壤，總面積18.88萬平方千米。 截至2020年11月1日零時(shí)，河北省常住人口7461.0235萬人 。</p><p>河北地處華北平原，東臨渤海、內(nèi)環(huán)京津，西為太行山，北為燕山，燕山以北為張北高原，是中國(guó)唯一兼有高原、山地、丘陵、平原、湖泊和海濱的省份。地跨海河、灤河兩大水系。河北省地處溫帶大陸性季風(fēng)氣候；地處沿海開放地區(qū)，是中國(guó)經(jīng)濟(jì)由東向西梯次推進(jìn)發(fā)展的東部地帶，是中國(guó)重要糧棉產(chǎn)區(qū)。2017年4月，中共中央、國(guó)務(wù)院決定設(shè)立河北雄安新區(qū)。2019年8月，國(guó)務(wù)院新設(shè)中國(guó)（河北）自由貿(mào)易試驗(yàn)區(qū)。</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>版權(quán)所有</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.如果我的博客對(duì)你有幫助 請(qǐng) “👍點(diǎn)贊” “??評(píng)論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻🉑關(guān)注我| 獲取更多源碼】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、等!
📣以上內(nèi)容技術(shù)相關(guān)問題💌歡迎一起交流學(xué)習(xí)👇🏻👇🏻👇🏻
總結(jié)
以上是生活随笔為你收集整理的基于html制作一个介绍自己家乡的网站，排版整洁，内容丰富，主题鲜明的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UNIX网络编程之一：代码环境搭建
- 下一篇： exe dll html病毒专杀,清除更