2022年大一网页期末作业（纯HTML+CSS实现）(1)
生活随笔
收集整理的這篇文章主要介紹了
2022年大一网页期末作业（纯HTML+CSS实现）(1)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
📂文章目錄
- 一、👨?🎓網(wǎng)站題目
- 二、??網(wǎng)站描述
- 三、📚網(wǎng)站介紹
- 四、🌐網(wǎng)站演示
- 五、?? 網(wǎng)站代碼
- 🧱HTML結(jié)構(gòu)代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學(xué)習(xí)不再盲目
- 七、🎁更多干貨
一、👨?🎓網(wǎng)站題目
🏮傳統(tǒng)春節(jié)網(wǎng)頁(yè)設(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è)作業(yè)成品采用DIV CSS布局制作，主要內(nèi)容包括節(jié)日介紹、節(jié)日發(fā)展、習(xí)俗慶祝、地區(qū)特色等內(nèi)容，作品共多個(gè)頁(yè)面，學(xué)生HTML靜態(tài)網(wǎng)頁(yè)基礎(chǔ)水平制作，頁(yè)面排版干凈簡(jiǎn)潔。網(wǎng)頁(yè)技術(shù)方面應(yīng)用包括網(wǎng)頁(yè)背景顏色、字號(hào)字體設(shè)置、超鏈接、圖文頁(yè)面、菜單欄、頂部大圖等網(wǎng)頁(yè)基礎(chǔ)知識(shí)點(diǎn)
🏅 一套優(yōu)質(zhì)的💯網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該包含 (具體可根據(jù)個(gè)人要求而定)
三、📚網(wǎng)站介紹
📔網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁(yè)布局結(jié)構(gòu)。
📓網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁(yè)編程語(yǔ)言HTML5+CSS3+JS程序語(yǔ)言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開(kāi)后就能即時(shí)看到網(wǎng)站的效果。
📘網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁(yè)風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁(yè)尺寸的圖片。
📒網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類(lèi)包含：html網(wǎng)頁(yè)結(jié)構(gòu)文件、css網(wǎng)頁(yè)樣式文件、js網(wǎng)頁(yè)特效文件、images網(wǎng)頁(yè)圖片文件；
📙網(wǎng)頁(yè)編輯方面：網(wǎng)頁(yè)作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面；
（2）📑 css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等；
（3）📄 js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）。
四、🌐網(wǎng)站演示
五、?? 網(wǎng)站代碼
🧱HTML結(jié)構(gòu)代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Holiday Christmas</title> <meta name="keywords" content="" /> <meta name="description" content="" /></head> <body id="subpage"><div id="tooplate_wrapper"><div id="tooplate_header"><embed src="music/Bells.mp3" autostart="true" loop="true" hidden="true"></embed><div id="site_title"><a href="index.html">Holiday Christmas</a></div><div id="tooplate_menu" class="ddsmoothmenu"><ul><li><a href="index.html">首頁(yè)</a></li><li><a href="news.html" class="selected">禮物</a><!--<ul><li><a href="news.html">Category One</a></li><li><a href="news.html">Category Two</a></li><li><a href="news.html">Category Three</a></li><li><a href="news.html">Category Four</a></li><li><a href="news.html">Category Five</a></li> </ul>--></li><li><a href="gallery.html">飲食</a></li><li><a href="about.html">地區(qū)特色</a></li> <li><a href="contact.html">登錄注冊(cè)</a></li></ul><br style="clear: left" /></div> <!-- end of tooplate_menu --><div class="clear"></div></div> <!-- END of header --><div id="middle_page_intro"><h1>禮物</h1><p>gift</p></div> <!-- END of middle --><div id="tooplate_main"><div id="tooplate_content" class="left"><div class="content_wrapper content_mb_60"><h2>圣誕節(jié)櫥窗</h2><div class="col_2"><img class="img_border img_border_b img_fl" src="images/news/01.jpg" alt="image" /></div><div class="col_2 no_margin_right"><p>圣誕櫥窗也是墨爾本一道靚麗的風(fēng)景線，每年的圣誕節(jié)來(lái)臨前商店的櫥窗設(shè)計(jì)人員就會(huì)動(dòng)足腦筋，將這個(gè)圣誕節(jié)的主題發(fā)揮得淋漓盡致，而且絕不會(huì)和往年的風(fēng)格重合，這里也是媽媽最愿意帶孩子們來(lái)的地方。圣誕爺爺醇厚的嗓音講述著驚心動(dòng)魄的經(jīng)歷，故事還是那個(gè)故事，但聲、光、電的組合更生動(dòng)有趣。排隊(duì)入場(chǎng)是瑪雅櫥窗參觀中不成文的規(guī)定，欄桿外是急匆匆路過(guò)的人流，欄桿內(nèi)有序參觀，每個(gè)櫥窗有數(shù)分鐘的演繹。每個(gè)櫥窗左下角是滾動(dòng)的屏幕，立體聲喇叭中講述的故事，都能在這里顯示，掃描一下二維碼還能下載。 </p><a href="#" class="button button_small button_small_gray">More</a></div><div class="clear"></div></div> <div class="content_wrapper content_mb_60"> <div class="col_2"><img class="img_border img_border_s img_nom" src="images/news/02.jpg" alt="image" /><h4>圣誕節(jié)環(huán) </h4><p>西方國(guó)家圣誕節(jié)其間掛在家門(mén)口用的裝飾品，通常用綠色的枝葉或藤條（松毛、松針等）和銀色的金屬及金色的鈴鐺配以紅色的緞帶組成主色調(diào)綠、白、黃、紅代表歡樂(lè)喜慶上面寫(xiě)著MERRY CHRISMAS或者簡(jiǎn)寫(xiě)為X'mas</p><a href="#" class="button button_small button_small_gray">More</a></div><div class="col_2 no_margin_right"><img class="img_border img_border_s img_nom" src="images/news/03.jpg" alt="image" /><h4>圣誕卡</h4><p>圣誕卡（圣誕卡片）在美國(guó)和歐洲很流行，許多家庭隨賀卡帶上年度家庭合照或家庭新聞，新聞一般包括家庭成員在過(guò)去一年的優(yōu)點(diǎn)特長(zhǎng)等內(nèi)容。圣誕節(jié)這天，指出天下一家世界大同的理想，只有以和平與仁愛(ài)的言行達(dá)成。寄贈(zèng)圣誕卡，除表示慶賀圣誕的喜樂(lè)外，就是向親友祝福，以表懷念之情。尤其對(duì)在孤寂中的親友，更是親切的關(guān)懷和安慰。</p><a href="#" class="button button_small button_small_gray">More</a></div><div class="clear h60"></div><div class="col_2"><img class="img_border img_border_s img_nom" src="images/news/04.jpg" alt="image" /><h4>圣誕帽</h4><p>是一頂紅色帽子，據(jù)說(shuō)晚上戴上睡覺(jué)除了睡得安穩(wěn)和有點(diǎn)暖外，第二天你還會(huì)發(fā)現(xiàn)在帽子里多了點(diǎn)心愛(ài)的人送的禮物。</p><a href="#" class="button button_small button_small_gray">More</a></div><div class="col_2 no_margin_right"><img class="img_border img_border_s img_nom" src="images/news/05.jpg" alt="image" /><h4>圣誕樹(shù)</h4><p>圣誕樹(shù)（Christmas tree）是圣誕節(jié)慶祝中最有名的傳統(tǒng)之一。通常人們?cè)谑フQ前后把一棵常綠植物如松樹(shù)弄進(jìn)屋里或者在戶(hù)外，并用圣誕燈和彩色的裝飾物裝飾。并把一個(gè)天使或星星放在樹(shù)的頂上。</p><a href="#" class="button button_small button_small_gray">More</a></div><div class="clear"></div></div> <div class="pagging"><ul><li><a href="#" target="_parent">Previous</a></li><li><a href="#" target="_parent">1</a></li><li><a href="#" target="_parent">2</a></li><li><a href="#" target="_parent">3</a></li><li><a href="#" target="_parent">4</a></li><li><a href="#" target="_parent">5</a></li><li><a href="#" target="_parent">6</a></li><li><a href="#" target="_parent">Next</a></li></ul><div class="clear"></div></div></div> <!-- END of content --><div id="tooplate_sidebar" class="right"><div class="content_wrapper content_mb_60"><h3>圣誕唯美詞語(yǔ)</h3><ul class="sidebar_link"><li><a href="#">reindeer：馴鹿</a></li><li><a href="#">sleigh：雪橇</a></li><li><a href="#">fireplace：壁爐</a></li><li><a href="#">candle stick：燭臺(tái)</a></li><li><a href="#">Christmas hymn：圣誕圣歌</a></li><li><a href="#">evergreen bough：常青樹(shù)枝</a></li><li><a href="#">Christmas feast：圣誕大餐</a></li><li><a href="#">nativity：耶穌的誕生</a></li></ul></div><div class="content_wrapper content_mb_60"><h3>圣誕唯美句子</h3><ul class="comment_list"><li><span>請(qǐng)記住這個(gè)微笑,那是我對(duì)你的祝福,圣誕快樂(lè)！</span><span class="comment_meta"><strong></strong><a href="#">Please remember this smile. It's my wish for you. Merry Christmas!</a></span></li><li><span>baby祝你：圣誕快樂(lè)！其實(shí)我更想祝你：剩下的天也是快快樂(lè)樂(lè)的-永遠(yuǎn)快樂(lè)！寶貝！</span><span class="comment_meta"><strong></strong><a href="#">Best wishes to you: Merry Christmas! In fact, I would like to wish you more: the rest of the day is happy-Always happy! Baby!</a></span></li><li><span>愛(ài)是雪,情是花,變成雪花飄你家,鈴兒響,鹿兒跑,把我的心帶給你,平安夜,狂歡夜,有你有我才精彩。</span><span class="comment_meta"><strong></strong><a href="#">Love is snow, love is flower, turn into snow floating in your home, bell ringing, deer running, bring my heart to you, Christmas Eve, Carnival night, I am wonderful with you.</a></span></li><li><span>安全之夜的使者,向你報(bào)一聲平安,帶著盈盈的相思,帶著舒適的祝福,祝愿你圣誕快樂(lè)！</span><span class="comment_meta"><strong></strong><a href="#">Messenger of Safety Night, I wish you a Merry Christmas with peace, full of love and comfortable wishes.</a></span></li></ul></div></div> <!-- END of sidebar --><div class="clear"></div></div> <!-- END of main --><div class="clear"></div> </div> <!-- END of wrapper --> <div id="tooplate_footer_wrapper"><div id="tooplate_footer" class="center"><div class="col_4"><h4>Pages</h4><ul class="nobullet bottom_list"><li><a href="index.html">首頁(yè)</a></li><li><a href="news.html">禮物</a></li><li><a href="gallery.html">飲食</a></li><li><a href="about.html">地區(qū)特色</a></li><li><a href="contact.html">登錄注冊(cè)</a></li></ul></div><div class="col_4"><h4>禮物</h4><ul class="nobullet bottom_list"><li><a href="#" target="_parent">圣誕卡</a></li> <li><a href="#" target="_parent">圣誕襪</a></li><li><a href="#" target="_parent">圣誕帽</a></li><li><a href="#" target="_parent">圣誕樹(shù)</a></li><li><a href="#" target="_parent">圣誕節(jié)櫥窗</a></li></ul></div><div class="col_4"><h4>飲食</h4><ul class="nobullet bottom_list"><li><a href="#">火雞</a></li><li><a href="#">glogi酒</a></li><li><a href="#">沙灘宴</a></li><li><a href="#">玉米粥</a></li><li><a href="#">樹(shù)干蛋糕</a></li></ul></div><div class="col_4 no_margin_right"><h4>地區(qū)特色</h4><p><a href="#" target="_blank">英國(guó)特色</a>.</p><p><a href="#" target="_parent">美國(guó)特色</a></p><p><a href="#" target="_parent">法國(guó)特色</a>.</p><P><a href="#">瑞士特色</a></p></div><div class="clear"></div></div> <!-- END of tooplate_footer --> <div id="tooplate_copyright" class="center"><p>Copyright ? 2018 Your Company Name | Design: <a href="#" target="_parent">Tooplate</a>. More Templates <a title="圣誕快樂(lè)">圣誕快樂(lè)</a></p><ul id="social"><li><a href="#"><img src="images/rss.png" alt="RSS" /></a></li><li><a href="#"><img src="images/facebook.png" alt="Facebook" /></a></li><li><a href="#"><img src="images/twitter.png" alt="Twitter" /></a></li><li><a href="#"><img src="images/linkedin.png" alt="Linkedin" /></a></li></ul><div class="clear"></div></div> </div> <!-- END of tooplate_wrapper --></body> </html>💒CSS樣式代碼
/* Skin Name: Nivo Slider Default Theme Skin URI: http://nivo.dev7studios.com Skin Type: flexible Description: The default skin for the Nivo Slider. Version: 1.0 Author: Gilbert Pellegrom Author URI: # */.theme-default .nivoSlider {position:relative;width: 400px;height: 240px;background:#fff url(loading.gif) no-repeat 50% 50%; } .theme-default .nivoSlider img {position:absolute;width: 400px;height: 240px;top:0px;left:0px;display:none; } .theme-default .nivoSlider a {border:0;display:block; } .theme-default .nivo-controlNav {position:absolute;left:50%;bottom:-32px;margin-left:-40px; /* Tweak this to center bullets */ } .theme-default .nivo-controlNav a {display:block;width:14px;height:15px;background: url(../images/slider_control_btn.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left; } .theme-default .nivo-controlNav a.active {background-position: -14px 0; }.theme-default .nivo-directionNav a {display:block;width:38px;height:46px;background: url(../images/slider_next_previous.png) no-repeat;text-indent:-9999px;border:0; } .theme-default a.nivo-nextNav {background-position:-38px 0;right:-50px; } .theme-default a.nivo-prevNav {left:-50px; }.theme-default .nivo-caption {font-family: Helvetica, Arial, sans-serif; } .theme-default .nivo-caption a {color:#fff;border-bottom:1px dotted #fff; } .theme-default .nivo-caption a:hover {color:#fff; }/** jQuery Nivo Slider v2.7* http://nivo.dev7studios.com** Copyright 2011, Gilbert Pellegrom* Free to use and abuse under the MIT license.* http://www.opensource.org/licenses/mit-license.php* * March 2010*//* The Nivo Slider styles */ .nivoSlider {position:relative; } .nivoSlider img {position:absolute;top:0px;left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none; } /* The slices and boxes in the Slider */ .nivo-slice {display:block;position:absolute;z-index:5;height:100%; } .nivo-box {display:block;position:absolute;z-index:5; } /* Caption styles */ .nivo-caption {position:absolute;display: block;padding: 10px;width: 380px;left: 0;bottom:0px;background:#000;color:#fff;opacity:0.8; /* Overridden by captionOpacity setting */z-index:8; } .nivo-caption p {font-size: 16px;color: #fff;margin: 0; padding: 0; } .nivo-caption a {display:inline !important; } .nivo-html-caption {display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer; } .nivo-prevNav {left:0px; } .nivo-nextNav {right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a {position:relative;z-index:9;cursor:pointer; } .nivo-controlNav a.active {font-weight:bold; }六、🥇 如何讓學(xué)習(xí)不再盲目
很多剛?cè)腴T(mén)編程的小白學(xué)習(xí)了基礎(chǔ)語(yǔ)法，卻不知道語(yǔ)法的用途，不知道如何加深映像，不知道如何提升自己，這個(gè)時(shí)候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網(wǎng)上的編程初學(xué)者入門(mén)訓(xùn)練。該專(zhuān)題為編程入門(mén)級(jí)別，適合剛學(xué)完語(yǔ)法的小白練習(xí)，題目涉及編程基礎(chǔ)語(yǔ)法，基本結(jié)構(gòu)等，每道題帶有練習(xí)模式和考試模式，可還原考試模式進(jìn)行模擬，也可通過(guò)練習(xí)模式進(jìn)行練習(xí) 。
七、🎁更多干貨
1.如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “👍點(diǎn)贊” “??評(píng)論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻關(guān)注我| 💬獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！
3.
以上內(nèi)容技術(shù)相關(guān)問(wèn)題💌歡迎一起交流學(xué)習(xí)👇🏻👇🏻👇🏻💬總結(jié)
以上是生活随笔為你收集整理的2022年大一网页期末作业（纯HTML+CSS实现）(1)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【日常】联想笔记本如何开启电池养护模式
- 下一篇： 数据加密存储常见的加密方式