?? 關(guān)于作者: ??歷任研發(fā)工程師杭朱，技術(shù)組長(zhǎng)阅仔，教學(xué)總監(jiān)；曾于2016年弧械、2020年兩度榮獲CSDN年度十大博客之星八酒。 十載寒冰，難涼熱血刃唐；多年過去羞迷，歷經(jīng)變遷，物是人非唁桩。 然而闭树，對(duì)于技術(shù)的探索和追求從未停歇。 ??堅(jiān)持原創(chuàng)荒澡，熱衷分享报辱，初心未改，繼往開來单山！
@TOC
一碍现、????網(wǎng)站題目
??傳統(tǒng)春節(jié)網(wǎng)頁設(shè)計(jì)、??圣誕節(jié)節(jié)日發(fā)展米奸、??中秋昼接、端午傳統(tǒng)節(jié)日習(xí)俗慶祝、??地區(qū)特色悴晰，網(wǎng)站模板 慢睡、等網(wǎng)站的設(shè)計(jì)與制作逐工。
二、??網(wǎng)站描述
??? 大學(xué)生傳統(tǒng)節(jié)日網(wǎng)頁作業(yè)成品采用DIV CSS布局制作漂辐，主要內(nèi)容包括節(jié)日介紹泪喊、節(jié)日發(fā)展、習(xí)俗慶祝髓涯、地區(qū)特色等內(nèi)容袒啼，作品共多個(gè)頁面，學(xué)生HTML靜態(tài)網(wǎng)頁基礎(chǔ)水平制作纬纪，頁面排版干凈簡(jiǎn)潔蚓再。網(wǎng)頁技術(shù)方面應(yīng)用包括網(wǎng)頁背景顏色、字號(hào)字體設(shè)置包各、超鏈接摘仅、圖文頁面、菜單欄髓棋、頂部大圖等網(wǎng)頁基礎(chǔ)知識(shí)點(diǎn)
?? 一套優(yōu)質(zhì)的??網(wǎng)頁設(shè)計(jì)應(yīng)該包含 (具體可根據(jù)個(gè)人要求而定)
頁面分為頁頭实檀、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊按声、頁腳四大部分膳犹。
所有頁面相互超鏈接，可到三級(jí)頁面签则，有5-10個(gè)頁面組成须床。
頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯(cuò)亂渐裂，使用Div+Css技術(shù)豺旬。
菜單美觀、醒目柒凉，二級(jí)菜單可正常彈出與跳轉(zhuǎn)族阅。
要有JS特效，如定時(shí)切換和手動(dòng)切換圖片輪播膝捞。
頁面中有多媒體元素坦刀，如gif、視頻蔬咬、音樂鲤遥，表單技術(shù)的使用。
頁面清爽林艘、美觀盖奈、大方，不雷同狐援。 钢坦。
不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來究孕，還要滿足布局良好、界面美觀场钉、配色優(yōu)雅蚊俺、表現(xiàn)形式多樣等要求。
三逛万、??網(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)站演示
[圖片上傳失敗...(image-5e3a90-1659967612182)]
[圖片上傳失敗...(image-7ce8e4-1659967612182)]
[圖片上傳失敗...(image-3dd0c5-1659967612182)]
[圖片上傳失敗...(image-7672e2-1659967612182)]
[圖片上傳失敗...(image-e237e9-1659967612182)]
[圖片上傳失敗...(image-8fed29-1659967612182)]
五恬叹、?? 網(wǎng)站代碼
??HTML結(jié)構(gòu)代碼
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" contenteditable="true" cid="n48" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: mononoki, monospace; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(38, 50, 56); position: relative !important; margin: 15px auto; padding: 0.7em 1em; text-shadow: none; color: rgb(233, 237, 237); border: none; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>建軍節(jié)</title>
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<header class="head clearfix">
<nav class="">
<a href="index.html">主頁</a>
<a href="jieshao.html">基本介紹</a>
<a href="lishi.html">歷史沿革</a>
<a href="tupian.html">建軍風(fēng)光</a>
<a href="shipin.html">閱兵視頻</a>
<a href="zhuce.html">注冊(cè)</a>
</nav>
</header>
<div class="main clearfix">
<div class="banner clearfix">
<img src="images/j.jpg" width="100%">
</div>
<div class="div4" style="width:980px; height:220px">
<div class="bar">
<h3>建軍風(fēng)采</h3>
</div>
<div class="img" align="center"> <img src="images/a1.jpg" width="235" height="160"> <img
src="images/a2.jpg" width="235" height="160"> <img src="images/a3.jpg" width="235" height="160">
<img src="images/a4.jpg" width="235" height="160">
</div>
</div>
<div class="div4 bg000 ">
<div class="bar">
<h3>基本介紹</h3>
</div>
<div class="ne">
<div>
八一建軍節(jié)（Army Day）是中國人民解放軍建軍紀(jì)念日，定為每年的八月一日同眯，由中國人民革命軍事委員會(huì)設(shè)立绽昼，為紀(jì)念中國工農(nóng)紅軍成立的節(jié)日。
1933年7月11日须蜗，中華蘇維埃共和國臨時(shí)中央政府根據(jù)中央革命軍事委員會(huì)6月30日的建議硅确，決定8月1日為中國工農(nóng)紅軍成立紀(jì)念日 目溉。1949年6月15日，中國人民革命軍事委員會(huì)發(fā)布命令菱农，以“八一”兩字作為中國人民解放軍軍旗和軍徽的主要標(biāo)志缭付。中華人民共和國成立后，將此紀(jì)念日改稱為中國人民解放軍建軍節(jié)循未。
2019年7月30日陷猫，中華人民共和國國防部在人民大會(huì)堂舉行招待會(huì)，熱烈慶祝中國人民解放軍建軍92周年的妖。
2021年8月1日绣檬，中華人民共和國國防部網(wǎng)熱烈慶祝中國人民解放軍建軍94周年。
</div>
</div>
</div>
<div class="div4 bg000 ">
<div class="bar">
<h3>軍旗簡(jiǎn)介</h3>
</div>
<div class="ne">
軍旗嫂粟，是象征軍隊(duì)或建制的旗幟娇未。中國人民解放軍軍旗為紅色，上綴金黃色的五角星及“八一”兩字星虹，表示中國人民解放軍自1927年8月1日南昌起義以來經(jīng)過艱苦卓絕的長(zhǎng)期斗爭(zhēng)零抬，終于在黨的領(lǐng)導(dǎo)下取得了中國革命的偉大勝利。
中國人民解放軍軍旗的規(guī)格（按照總參1951年1月頒布的條令執(zhí)行）：
軍旗可以授予團(tuán)級(jí)以上部隊(duì)和院校宽涌，授旗時(shí)可以舉行儀式平夜。
軍旗主要用于參加典禮、檢閱护糖、隆重集會(huì)褥芒、游行等場(chǎng)合，由掌旗員掌握軍旗嫡良，左右各有一名護(hù)旗兵锰扶，位于部隊(duì)的前列。
中國人民解放軍軍旗是中華人民共和國武裝力量的標(biāo)志寝受，是中國人民解放軍榮譽(yù)坷牛、勇敢和光榮的象征。它激勵(lì)全體指戰(zhàn)員牢記自己的神圣職責(zé)很澄，忠于祖國京闰，忠于人民，忠于黨甩苛，不惜犧牲自己的生命來捍衛(wèi)祖國的神圣領(lǐng)土和尊嚴(yán)蹂楣。
</div>
</div>
<div class="div4 bg000 " style="margin-right:0">
<div class="bar">
<h3>節(jié)日由來</h3>
</div>
<div class="ne">
1927年8月1日，周恩來領(lǐng)導(dǎo)發(fā)動(dòng)了南昌起義讯蒲，打響了武裝反抗國民黨反動(dòng)派的第一槍痊土，中國共產(chǎn)黨領(lǐng)導(dǎo)的人民軍隊(duì)從此誕生。
<img src="images/cc.jpg" width="100%" height="260"> </div>
</div>
<div class="clearfix"></div>
</div>
<footer class="footer"> 八一 </footer>
</body>
</html>
</pre>
??CSS樣式代碼
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css" contenteditable="true" cid="n50" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: mononoki, monospace; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(38, 50, 56); position: relative !important; margin: 15px auto; padding: 0.7em 1em; text-shadow: none; color: rgb(233, 237, 237); border: none; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
/* CSS Document */
a {
font-size: 14px;
text-decoration: none;
color: #333
}
a:hover {
color: #33CCFF
}
h1,
h2,
h3 {
margin: 0;
padding: 0
}
body {
margin: 0 auto;
padding: 0;
background: #602;
width: 1000px;
color: #333;
line-height: 24px
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
.head {
height: 84px;
background: #ff0000;
overflow: hidden
}
.head a {
color: #fff;
padding: 5px 10px;
}
.head a {
font-size: 24px;
margin: 25px 10px;
display: inline-block
}
.fl {
float: left
}
.fr {
float: right
}
.banner img {}
.img {
padding: 20px 0;
}
.div2 .fr div {
margin: 5px 5px;
height: 332px
}
.div2 {
float: left;
margin-top: 20px;
width: 480px;
}
.div4 {
float: left;
padding: 10px;
margin-right: 20px;
margin-top: 20px;
background: #977;
width: 300px;
height: 500px;
}
.footer {
text-align: center;
padding: 30px 0;
font-size: 20px;
color: #fff;
background-color: #FF0000;
margin-top: 30px;
}
.con {
padding: 0 20px;
}
.title {
color: #FF0000;
text-align: center;
padding: 20px 0;
border-bottom: #333 dashed 1px;
margin-bottom: 20px
}
.ne {
margin-top: 10px;
}
.bar2 {
padding: 20px;
}
.bgcon {
background: #FFCC99;
padding-bottom: 30px;
}
.msg {
margin: 0 auto;
width: 500px;
font-size: 18px;
}
.msg .inp {
padding: 10px 10px;
border: none;
background: #CC9999;
width: 240px
}
#submit {
background: #990000;
color: #fff;
padding: 10px 50px;
border: none
}
.imglist li {
list-style: none;
float: left;
width: 24%;
margin: 0.5%;
}
</pre>
六墨林、?? 如何讓學(xué)習(xí)不再盲目
很多剛?cè)腴T編程的小白學(xué)習(xí)了基礎(chǔ)語法赁酝，卻不知道語法的用途犯祠，不知道如何加深映像，不知道如何提升自己酌呆，這個(gè)時(shí)候每天刷自主刷一些題就非常重要（百煉成神）衡载，可以去牛客網(wǎng)上的編程初學(xué)者入門訓(xùn)練隙袁。該專題為編程入門級(jí)別痰娱，適合剛學(xué)完語法的小白練習(xí)，題目涉及編程基礎(chǔ)語法菩收，基本結(jié)構(gòu)等猜揪，每道題帶有練習(xí)模式和考試模式，可還原考試模式進(jìn)行模擬坛梁，也可通過練習(xí)模式進(jìn)行練習(xí) 。
七腊凶、??更多干貨
【干貨分享】自學(xué)編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)划咐、計(jì)算機(jī)基礎(chǔ)到前端常用框架的教程，涵蓋前端大部分必備知識(shí)（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
Gitee倉庫地址（來個(gè)Star吧~）： https://gitee.com/zhanyuqiu2022/my-app
