📂文章目錄
- 二、📚網站介紹
- 三、🔗網站效果
- ▶️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;
}