當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

web前端期末大作业：JavaScript大作业——福五鼠动漫网页制作(6页)带轮播图效果学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作

發布時間：2023/12/8 javascript 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端期末大作业：JavaScript大作业——福五鼠动漫网页制作(6页)带轮播图效果学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML實例網頁代碼, 本實例適合于初學HTML的同學。該實例里面有設置了css的樣式設置，有div的樣式格局，這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設計個人網站并將其轉換為代碼的過程來實踐設計。

?精彩專欄推薦👇🏻👇🏻👇🏻

? 【作者主頁——🔥獲取更多優質源碼】
? 【web前端期末大作業——🔥🔥畢設項目精品實戰案例(1000套)】

文章目錄🌰

一、網頁介紹📖
一、網頁效果🌌
二、代碼展示😈
- 1.HTML代碼結構 🧱
- 2.CSS樣式代碼 🏠
三、個人總結😊
四、更多干貨🚀

一、網頁介紹📖

1 網頁簡介：此作品為學生個人主頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。

2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。

3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視頻、音頻元素、Flash，同時設計了Logo（源文件）所需的知識點。

一、網頁效果🌌

二、代碼展示😈

1.HTML代碼結構 🧱

代碼如下（示例）：以下僅展示部分代碼供參考~

<!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" style="overflow: auto; overflow-x:hidden;"><head><title>福五鼠動漫網</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><link rel="stylesheet" type="text/css" href="css/screen.css" /><script src="js/jquery.min.js"></script><script src="js/jquery.flexslider-min.js"></script><script type="text/javascript">$(window).load(function() {$('.flexslider').flexslider();});</script><link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" /></head><body> <div class="wrapper"><div class="top"><div class="top_link"><a href="#">設為首頁</a> | <a href="#" class="link2">加入收藏</a></div></div><div class="nav"><ul><li><a href="index.html">網站首頁</a></li><li><a href="gushi.html">故事背景</a></li><li><a href="juese.html">角色介紹</a></li><li><a href="huaxu.html">動漫圖集</a></li><li><a href="zhizuo.html">登場武器</a></li><li><a href="pinjia.html">留言板</a></li></ul> </div><div id="banner"><div class="flexslider"><ul class="slides"><li><a href="#" > <img src="image/ad1.jpg" width="1010" /></a> </li><li><a href="#" > <img src="image/ad2.jpg" width="1010" /></a> </li><li><a href="#" > <img src="image/ad3.jpg" width="1010" /></a> </li><li><a href="#" > <img src="image/ad4.jpg" width="1010" /></a> </li><li><a href="#" > <img src="image/ad5.jpg" width="1010" /></a> </li><li><a href="#" > <img src="image/ad6.jpg" width="1010" /></a> </li></ul></div></div><div class="content"><div class="sidebar"><div class="pro_box"><div class="jj_cp2"><h3>福五鼠動漫網</h3></div><ul class="pro_list"><li><a href="gushi.html">故事背景</a></li><li><a href="juese.html">角色介紹</a></li><li><a href="huaxu.html">動漫圖集</a></li><li><a href="pinjia.html">動漫評價</a></li></ul></div><div class="pro_box"><div class="jj_cp2"><h3>角色介紹</h3></div><ul class="pro_list"><li><a href="juese.html">福福鼠</a></li><li><a href="juese.html">毅毅鼠</a></li><li><a href="juese.html">儒儒鼠</a></li><li><a href="juese.html">翔翔鼠</a></li></ul></div> </div><div class="main_con"><div class="chanp_box"><div class="jj_cp"><h3>角色介紹</h3></div><div class="show_box"><div class="show_panel"><ul id="show_list"><li><a href="#"><span></span></a> <a href="#"><img alt="" src="image/j2.jpg" width="133" height="168" /><span>福福鼠</span></a> <a href="#"><span></span></a> <a href="#"><img alt="" src="image/j2.jpg" width="140" height="168" /><span>福福鼠</span></a> <a href="#"><img alt="" src="image/j3.jpg" width="140" height="168" /><span>毅毅鼠</span></a> <a href="#"><img alt="" src="image/j4.jpg" width="140" height="168" /><span>儒儒鼠</span></a> </li></ul></div></div> </div><div class="chanp_box"><div class="jj_cp"><h3>角色介紹 </h3></div><div class="show_box"><div class="show_panel"><ul id="show_list"><li> <a href="#"><img alt="" src="image/m1.jpg" width="164" height="168" /><img alt="" src="image/j1.jpg" width="164" height="168" /></a> <a href="#"><img alt="" src="image/m2.jpg" width="164" height="168" /><span></span></a> <a href="#"><img alt="" src="image/m3.jpg" width="164" height="168" /></a> <a href="#"><img alt="" src="image/m4.jpg" width="164" height="168" /><span></span></a> </li></ul></div></div> </div><div class="jj_box"><div class="jj_cp"><h3>角色介紹</h3></div><div class="jj_cloumn"> <a href="#"><img alt="" src="image/1.jpg" width="237" height="166"/></a><div class="jj_txt"><p>在一個奇妙的世界里，有三個王國，分別是老鼠王國、貓王國和狗王國。一位新來的貓王為了滿足自己的私欲向狗王讒，利用狗國的強勢將鼠國分遣到地質環境惡劣的布布島。布布島怪石嶙峋，土壤干涸，難以耕種，被人們稱之為：步步倒，即行走與生活艱難，似乎多行一步就會倒下！鼠國處于這種環境無以為生，人民長期食不果腹，甚至連鼠王自己也常常面臨缺糧的危機。一天，貓王帶了大量糧食前來拜訪，并附上一張"以萬斤大米換取萬民壯丁"的契約。鼠王面對誘人的糧食，忍耐不住饑餓，最終簽署了條約。貓王隨即派百民貓兵送萬民鼠民往黃金島開采黃金。黃金島四面處海，了無人煙，食物、水源由每月新老貓兵更換時送到小島上。被遣送到黃金島的鼠民，過著悲慘的生活。他們終日開采，吃著貓兵們的殘羹剩飯，干活不留神就被貓兵狠狠抽打，生病了也無藥可醫。沒幾日工夫，就倒下了幾百鼠民。福福鼠是很有正義感且有勇有謀的志士，帶領著他的四位好友吉吉鼠、翔翔鼠、儒儒鼠、毅毅鼠和在鼠國時的一批追隨者，決定奮勇起來抵抗強大的貓國，解救被貓國壓榨受苦受難的鼠民。每當看著倒下的鼠國兄弟們，福福鼠就心如刀絞，對貓兵的殘酷行徑咬牙切齒。在如此惡劣的情況下他與好友們尋思著一條出路，開始了周詳的計劃，并將自己的想法向鼠民們傳遞了，要大家緊密配合行動。首先他招集了幾百個機靈的鼠兄弟，利用空隙時間考察地形，摸清貓兵輪崗間隔時間、每次幾人看守，送糧食和水源的船只與大概每次貓兵更新人數……一切都按計劃進行著，萬事俱備，只差關鍵時刻了。福福鼠又進行了最后一次確認后，向鼠兄弟們吩咐下去，行動就在這幾日，并要求大家更加勤奮的干活，對貓兵們順從聽話。不知狀況的貓兵們，看著鼠民一個個乖順呆滯很是得意，慢慢疏于防備，更多時間寧愿自己睡大頭覺，多飲幾杯酒，也不愿去管"乖順"的鼠民們。吉吉鼠看到時機已經成熟，決定在更換新兵的前一日行動，分四路人馬做好埋伏將貓兵一網打盡。這天晚上，吉吉鼠將白天偷到的鑰匙打開了牢門，并帶著兄弟把喝得亂醉的貓兵綁了起來關進大牢。然后，帶著十幾名鼠兄弟來到糧倉放火，等驚慌的貓兵逃竄出來時，藏在周圍的幾百鼠民蜂擁而上，一舉拿下。另一些兄弟則直搗貓營，用迷煙讓貓兵們熟睡不醒，再一個個的綁起來。還有一些則對付四種巡邏的貓兵們，分別將他們引誘到提前挖好的陷阱里……鼠民們打了個大勝仗，所有的貓兵都被關進了大牢。</p></div> </div> </div> </div> </div> </div>  <div class="foot"><div class="copyright"><p>福五鼠動漫網20164601036 </p><p><a href="http://mail.qq.com/">聯系我們</a><a href="http://www.baidu.com/" target="_blank"> 友情鏈接</a></p></div> </div>  </body> </html>

2.CSS樣式代碼 🏠

/* CSS Reset */ html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;color: #FFF; }table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;} strong{ font-weight:bold;} img{ vertical-align:top;} .cl{ clear:both; font-size:0;}a{ color:#000; font-size:12px; text-decoration:none;} a:hover{color: #FFF;text-decoration: none; }body{ font-size:12px; color:#000; font-family:"宋體" "新宋體" "Microsoft YaHei"; background:url(../image/bg.jpg) center top fixed no-repeat;} .wrapper{width: 1010px;padding: 10px;overflow: hidden;margin: 0 auto;background-color: rgba(37,24,67,0.9); } .top{ width:970px; height:96px; background:url(../image/top.png) left top no-repeat; line-height:55px;overflow:hidden; text-align:right; padding-right:40px;} .top_link a{ margin: 0 4px; display:inline;} .top_link a:hover{color: #FFFFFF;text-decoration: underline; }.nav{ width:1010px; height:37px; margin-bottom:6px; background:url(../image/nav_bg.jpg) 0 0 repeat-x;} .nav ul{ width:990px; overflow:hidden; padding-left:20px;} .nav ul li{ text-align:center;float:left;height:37px; line-height:37px; } .nav ul li a{font-size:16px; color:#fff;letter-spacing:1px;width:110px;display:block;font-weight:bold; } .nav ul li a:hover{color: #0F0; }#banner{ width:1009px; height:420px!important; overflow:hidden; margin-bottom:10px; margin:auto; margin-left:-5px;}.content{ width:1010px; overflow:hidden; margin-bottom:10px;} .sidebar{ width:220px; float:left; overflow:hidden;} .pro_box{ width:218px; border:1px solid #b4b4b4; margin-bottom:10px;} .pro_box h3{ margin-bottom:12px;} .pro_list{width:206px; margin-left:7px; overflow:hidden;} .pro_list li{ margin-bottom:5px;} .pro_list li a{ display:block; width:190px; height:35px; line-height:35px; background:url(../image/pro_li_bg.jpg) 0 0 no-repeat; padding-left:43px;} .pro_list li a:hover{ color:#ff0000; text-decoration:underline;}.contact_box{ width:220px; height:231px; background:url(../image/contact_bg.jpg) 0 0 no-repeat; overflow:hidden; } .contact_txt{ width:200px; margin:40px 0 0 15px; height:170px; overflow:hidden;} .contact_txt p{ line-height:200%;}.main_con{ width:780px; float:right; overflow:hidden;} .chanp_box{ width:778px; margin-bottom:10px; overflow:hidden;border:1px solid #b4b4b4;} .show_box{ width:760px; padding:10px 0 10px 8px; border-top:none;} .show_panel{ width:760px; overflow:hidden;} #show_list{ width:760px; overflow:hidden;} #show_list li{ width:760px; overflow:hidden; margin-bottom:12px;} #show_list li a{ float:left; margin: 0 13px; display:inline; text-align:center;} #show_list li span{display: block;padding-top: 8px;color: #FFFFFF; }.jj_box{width:778px; overflow:hidden;border:1px solid #b4b4b4;} .jj_cp{ width:778px; overflow:hidden; background:url(../image/main_cp.jpg) 0 0 repeat-x; height:25px; line-height:25px;} .jj_cp h3{ float:left; color:#fff; font-size:14px; font-weight:bold; letter-spacing:1px; margin-left:37px; display:inline;} .jj_cp a{ float:right;} .jj_cloumn{ width:732px;overflow:hidden; padding:10px 18px; height:auto; min-height:180px;} .jj_cloumn img{ float:left;border:1px solid #b4b4b4; padding:2px;} .jj_txt{width: 470px;float: right;overflow: hidden;height: auto;color: #FFF; } .jj_cloumn p{text-indent: 20px;line-height: 190%;color: #FFF; } .foot{ width:1010px; padding:10px; margin:auto;overflow:hidden;font-family:Arial, Helvetica, sans-serif; color:#fff; background:url(../image/foot.jpg) 0 0 repeat-x; padding-top:25px; height:61px; text-align:center;}.foot a{ font-size:14px; color:#fff; line-height:26px;} .copyright p{ margin-bottom:10px;color:#fff; font-size:14px}.main_con2{ width:778px; float:right;border:1px solid #b4b4b4; padding-bottom:20px;} .jj_cp2{ width:778px; overflow:hidden; background:url(../image/main_cp.jpg) 0 0 repeat-x; height:25px; line-height:25px; margin-bottom:15px;} .jj_cp2 h3{ float:left; color:#fff; font-size:14px; font-weight:bold; letter-spacing:1px; margin-left:10px; display:inline;} .jj_cp2 p{ float:right; margin-right:28px; display:inline; color:#fff;} .jj_cp2 a{ color:#fff;} .jj_cp2 a:hover{ color:#ff0000; text-decoration:underline;}.com_txt{width:738px; overflow:hidden; padding:0 20px;} .com_txt p{color: #FFF;text-indent: 25px;line-height: 200%;margin-bottom: 10px; }.main_div2{width:700px; height:auto; margin:auto;} .main_div2_img{width:660px; margin:10px auto; text-align:center;} .main_div2_img img{width:660px; margin:10px auto; text-align:center;} .main_div2 h3{width:800px; height:30px; color:#333; text-indent:1em; font-size:22px; line-height:28px;} .main_div2 h3 a{color:#333; text-indent:1em; font-size:22px; line-height:28px;} .main_div2 p{color:#333; text-indent:2em; font-size:16px; line-height:28px;} .com_txt .zi {line-height: 50px;font-size: 14px; } td {border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid; }

三、個人總結😊

一套合格的網頁應該包含(具體可根據個人要求而定)

頁面分為頁頭、菜單導航欄（最好可下拉）、中間內容板塊、頁腳四大部分；

所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成；

頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；

菜單美觀、醒目，二級菜單可正常彈出與跳轉；

要有JS特效，如定時切換和手動切換圖片新聞；

頁面中有多媒體元素，如gif、視頻、音樂，表單技術的使用；

頁面清爽、美觀、大方，不雷同。

網站前端程序不僅要能夠把用戶要求的內容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

四、更多干貨🚀

1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！

2.??【關注我| 獲取更多源碼 | 優質文章】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業HTML模板、期末大作業模板、等! 「在這里有好多前端開發者，一起探討前端 Node 知識，互相學習」！

3.以上內容技術相關問題😈歡迎一起交流學習🔥

總結

以上是生活随笔為你收集整理的web前端期末大作业：JavaScript大作业——福五鼠动漫网页制作(6页)带轮播图效果学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：「面试必背」Redis面试题（2022最
下一篇： MKS Robin Nano V3.0使