web前端大作業(yè) 簡(jiǎn)單的學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)源碼

?? 關(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è)人要求而定)

  1. 頁面分為頁頭实檀、菜單導(dǎo)航欄(最好可下拉)、中間內(nèi)容板塊按声、頁腳四大部分膳犹。

  2. 所有頁面相互超鏈接,可到三級(jí)頁面签则,有5-10個(gè)頁面組成须床。

  3. 頁面樣式風(fēng)格統(tǒng)一布局顯示正常,不錯(cuò)亂渐裂,使用Div+Css技術(shù)豺旬。

  4. 菜單美觀、醒目柒凉,二級(jí)菜單可正常彈出與跳轉(zhuǎn)族阅。

  5. 要有JS特效,如定時(shí)切換和手動(dòng)切換圖片輪播膝捞。

  6. 頁面中有多媒體元素坦刀,如gif、視頻蔬咬、音樂鲤遥,表單技術(shù)的使用。

  7. 頁面清爽林艘、美觀盖奈、大方,不雷同狐援。 钢坦。

  8. 不僅要能夠把用戶要求的內(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末钧萍,一起剝皮案震驚了整個(gè)濱河市褐缠,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌风瘦,老刑警劉巖队魏,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異万搔,居然都是意外死亡胡桨,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門瞬雹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來昧谊,“玉大人,你說我怎么就攤上這事酗捌∧匚埽” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵胖缤,是天一觀的道長(zhǎng)尚镰。 經(jīng)常有香客問我,道長(zhǎng)哪廓,這世上最難降的妖魔是什么狗唉? 我笑而不...
    開封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮撩独,結(jié)果婚禮上敞曹,老公的妹妹穿的比我還像新娘账月。我一直安慰自己,他們只是感情好澳迫,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開白布局齿。 她就那樣靜靜地躺著,像睡著了一般橄登。 火紅的嫁衣襯著肌膚如雪抓歼。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天拢锹,我揣著相機(jī)與錄音谣妻,去河邊找鬼。 笑死卒稳,一個(gè)胖子當(dāng)著我的面吹牛蹋半,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播充坑,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼减江,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了捻爷?” 一聲冷哼從身側(cè)響起辈灼,我...
    開封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎也榄,沒想到半個(gè)月后巡莹,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡甜紫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年降宅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片棵介。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡钉鸯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出邮辽,到底是詐尸還是另有隱情唠雕,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布吨述,位于F島的核電站岩睁,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏揣云。R本人自食惡果不足惜捕儒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧刘莹,春花似錦阎毅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至抢肛,卻和暖如春狼钮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背捡絮。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來泰國打工熬芜, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人福稳。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓涎拉,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親的圆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子曼库,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容