當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
HTML5期末大作业：游戏网站设计与实现——基于bootstrap响应式游戏资讯网站制作HTML+CSS+JavaScript
生活随笔
收集整理的這篇文章主要介紹了
HTML5期末大作业：游戏网站设计与实现——基于bootstrap响应式游戏资讯网站制作HTML+CSS+JavaScript
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
🎉精彩專欄推薦👇🏻👇🏻👇🏻
?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
💂 作者主頁: 【主頁——🚀獲取更多優(yōu)質(zhì)源碼】
🎓 web前端期末大作業(yè)： 【📚畢設(shè)項目精品實戰(zhàn)案例 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】
🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎(chǔ)到高級學習視頻教程 120G干貨分享】
🥇 關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長，教學總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術(shù)的探索和追求從未停歇。 💪堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
📂文章目錄
- 一、👨?🎓網(wǎng)站題目
- 二、??網(wǎng)站描述
- 三、📚網(wǎng)站介紹
- 四、🌐網(wǎng)站效果
- 五、🔧 網(wǎng)站代碼
- 🧱HTML結(jié)構(gòu)代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多干貨
一、👨?🎓網(wǎng)站題目
🎮游戲官網(wǎng)、??游戲網(wǎng)站、🕹?電競游戲、🎴游戲介紹、等網(wǎng)站的設(shè)計與制作。
二、??網(wǎng)站描述
? 網(wǎng)頁中包含：Div+CSS、鼠標滑過特效、Table、導航欄效果、banner、表單、二級三級頁面等，視頻音頻元素，同時設(shè)計了logo（源文件），基本期末作業(yè)所需的知識點全覆蓋。
🏅 一套A+的網(wǎng)頁應該包含 (具體可根據(jù)個人要求而定)
三、📚網(wǎng)站介紹
📔網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。
📓網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網(wǎng)站的效果。
📘網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網(wǎ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)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）📄 js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到j(luò)s代碼）。
四、🌐網(wǎng)站效果
五、🔧 網(wǎng)站代碼
🧱HTML結(jié)構(gòu)代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="css/bootstrap.css" /> <link type="text/css" rel="stylesheet" href="css/css.css"/><script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script><!--以下是頁面獨有JS,請不要放在公用php文件中--><!--以上是頁面獨有JS,請不要放在公用php文件中--> <title>綜合性游戲網(wǎng)站</title> </head><body style=" background:#fff;"> <!--頂部--> <header><div class="logo"> <img src="images/logo.jpg"/> </div><div class="nav"> <a href="index.html">主頁</a> <a href="xingwen.html">游戲新聞</a> <a href="fuwu.html">關(guān)于我們</a> <a href="shouji.html">單機游戲下載</a> <a href="diannao.html">經(jīng)典游戲下載</a> <a href="denlu.html">會員登錄</a> </div><div class="clear"></div> </header> <div class="banner"> <div id="myCarousel" class="carousel slide"><!-- 輪播（Carousel）指標 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol> <!-- 輪播（Carousel）項目 --><div class="carousel-inner"><div class="item active"><img src="images/a1.jpg" alt="First slide"></div><div class="item"><img src="images/a2.jpg" alt="Second slide"></div><div class="item"><img src="images/a3.jpg" alt="Third slide"></div></div></div> </div> <script> $(document).ready(function(){ $('#myCarousel').carousel({interval:5000});//每隔5秒自動輪播 }); </script> <!--內(nèi)容--> <div class="container con"><div class="container product"><div class="col-lg-6 Part1"><ul><li><h3 class="nov">單機游戲新聞</h3></li><li><a href="xq.html">《糖豆人》3.5賽季更新：全新關(guān)卡及更多皮膚</a></li><li><a href="xq.html">IGN《靈媒》前18分鐘演示：XSX平臺的流暢4K畫面</a></li><li><a href="xq.html">《坎巴拉太空計劃》2月2日登陸WeGame 首發(fā)售價25元</a></li><li><a href="xq.html">《光環(huán)無限》將有新消息 重磅信息今年晚些時候公布</a></li><li><a href="xq.html">349元！《萊莎煉金工房2》Steam解禁 支持簡體中文</a></li></ul></div><div class="col-lg-6 Part1"><ul><li><h3 class="nov">網(wǎng)絡(luò)游戲新聞</h3></li><li><a href="xq.html">探索東海秘境！《夢幻西游》新資料片全服上線</a></li><li><a href="xq.html">拳頭畫師為The Shy繪制凱爾畫作 畫功精湛英氣逼人</a></li><li><a href="xq.html">金牛鬧春送祥瑞 《劍網(wǎng)3》新春賀歲版本邀你狂歡</a></li><li><a href="xq.html">《新天龍八部》經(jīng)典版 國寶名畫天龍傳承</a></li><li><a href="xq.html">《LOL》情人節(jié)“水晶玫瑰”皮膚一覽：婕拉、斯維因</a></li></ul></div></div><div class="col-lg-4"><div class="pic"> <img src="images/4.jpg"/> </div></div><div class="col-lg-8"><div class="text"><h2 class="Title1">Cyberpunk 2077</h2><p>在《賽博朋克2077》的架空世界觀中，美國在經(jīng)歷了20世紀末的一系列戰(zhàn)爭和恐怖襲擊后分崩離析，聯(lián)邦政府變得極其弱勢。各大跨國高科技公司則趁機崛起，控制了人們生活的方方面面，社會貧富差距由此開始空前拉大。農(nóng)民因為大企業(yè)的收購和兼并紛紛失去土地，最后不得不以家族為單位流浪在各大城市之間成為準軍事化組織；城市中下階層則因為大規(guī)模失業(yè)妻離子散、家庭破碎，最終組成了街頭幫派互相割據(jù)；在大企業(yè)的打工人雖然外表過著光鮮亮麗的生活，但畢竟是千軍萬馬爭搶少得可憐的晉升通道，職場環(huán)境爾虞我詐、人人自危。而玩家將從以上三種背景當中選擇其一，開始這趟旅程。 </p></div></div> </div><div class="container con"><div class="col-lg-4"><div class="pic"> <img src="images/timg.jpg"/> </div></div><div class="col-lg-8"><div class="text"><h2 class="Title1"> 《糖豆人：終極淘汰賽》</h2><p>《糖豆人》的關(guān)卡設(shè)計，正好適合玩家自己大開腦洞。加上外界已經(jīng)有了許多玩家飯制皮膚，玩家這么有熱情創(chuàng)作。雖然游戲首發(fā)的24個關(guān)卡數(shù)量并不算少，但奈何游戲熱度太高，玩家進步的速度又實在太快。這24個關(guān)卡眼看著就要被玩家一一破解，索然無味只在一念之間。（17173評 [8] ）《糖豆人：終極淘汰賽》是一款小品級的多人闖關(guān)綜藝游戲，各種腦洞大開、樂趣十足的小游戲讓游玩過程充滿了歡樂。只可惜游戲目前的體量還不足以支撐除了60人匹配以外的模式，也不能與好友開啟私人聯(lián)機，因此想要把這款游戲當聚會游戲玩的玩家們，可能要失望了。 </p></div></div> </div><div class="container con"><div class="col-lg-4"><div class="pic"> <img src="images/5.jpg"/> </div></div><div class="col-lg-8"><div class="text"><h2 class="Title1">《怪物獵人：世界》</h2><p>《怪物獵人：世界》是由CAPCOM制作發(fā)行的一款動作冒險游戲，在全球范圍內(nèi)都享有盛贊，本代怪物獵人發(fā)生了諸多進化，玩法與畫面都有非常巨大的進步，游戲最多支持16人聯(lián)機集會所，4人聯(lián)機狩獵。 [7] 在游戲中玩家將扮演一位第五期團的推薦組獵人，探索新大陸的深處，解開古龍遷徙的秘密。獵人們必須利用他們的聰明才智和個人能力才能在激烈、變化多端的戰(zhàn)斗中存活下來，并且最終成為“指引明路的蒼藍星”。 </p></div></div> </div><!--底部--> <footer> <p>綜合性游戲網(wǎng)站</p> </footer> </body> </html>💒CSS樣式代碼
/*通用類*/ * {margin: 0;padding: 0; } body {margin: 0 auto;line-height: 21px } img {border: none;} a {cursor: pointer;color: #333;text-decoration: none;outline: none; } em {font-style: normal; } .lt {float: left; } .rt {float: right; } ul, li, h1, h2, h3, p {padding: 0;margin: 0;list-style: none } ul {list-style-type: none; } .clear {clear: both } /*header 開始*/ .width {width: 1200px;margin: 0 auto; } footer {text-align: center;color: #fff;background: #737373;margin-top:50px;font-size: 18px; } footer p {height: 80px;line-height: 80px; } header {background: #fff;border-bottom: 2px solid #f1f1f1; } header .logo {float: left;height: 120px;width: auto;background: #fff;margin: 0 auto; } header .logo img {width: auto;height: 100%; } header .nav {float: right;text-align: center;height: 120px;line-height: 120px; } header .nav a {float: left;display: inline-block;text-align: center;color: #333;font-size: 20px;margin-top: 5px;padding:0px 20px;text-decoration:none; font-weight:bold } header .nav a:hover {color: #09F; } .banner {background-size: cover; } .banner img {width: 100%;display: block; } .con {padding: 50px 0; } .pic .pic { } .pic img {width: 100%; } .Title1 {color: #223b51;display: inline-block;border-bottom: 2px solid #223b51;padding-bottom: 5px;font-size: 30px;height: 60px;line-height: 60px; } .con .text p {margin: 20px 0; } .con .text p a {color: #06F; } .nov {margin: 10px 0; } .textt h2{font-size: 30px;padding: 20px 0; } .product {padding: 15px; } .product>div {height: 400px; } .product .Part1 li {line-height: 65px;border-bottom: 1px solid #CCC; }.product .Part1 li a{font-size: 18px; } .Part3 h3 {text-align: center; } .Part3 .phone {display: block;text-align: center;height: 40px;line-height: 40px;margin: 10px auto;border: 1px solid #999;color: #666;width: 80%; } .Part3 .phone.noi {background: #09F;border: 1px solid #09F;color: #fff; } .Title {width: 100%;text-align: center;margin: 20px auto;display: block; } .Title h2 {color: #154087; border-bottom:#000 solid 1px;padding-bottom: 10px; font-weight:bold;font-size: 36px;height: 60px;line-height: 60px;display: inline-block; } .news {}.news h3 {margin-bottom: 10px;color: #09F; } .news p {font-size: 16px;color: #666; } .news li {margin-bottom: 30px; } .shouji .pci {width: 80%;text-align: center;display: block;margin: 0 auto; } .shouji .pci img {width: 100%; } .shouji p {text-align: center;margin: 20px 0; } .zhuce {padding: 50px 0; } .zhuce li {text-align: center;margin-left: -100px; } .zhuce li span {width: 160px;font-size: 18px;text-align: right;display: inline-block;margin-right: 10px; } .zhuce li .phone2 {width: 30%;height: 50px;line-height: 50px;display: inline-block;font-size: 18px;padding: 0 10px; } .zhuce li button {background: #FC3E04;width: 30%;height: 50px;line-height: 50px;font-size: 18px;color: #fff;border-radius: 5px;border: none; }@media only screen and (max-width:1200px) { header .logo {height: 60px;} header .nav {width: 80%;height: 80px;line-height: 80px;margin-top: 0px; } }@media only screen and (max-width:1000px) {header .nav a{ font-size:14px;}.ts{ font-size:18px}.content{ margin:10px; font-size:12px} header .nav {width: 100%;height: 80px;line-height: 80px;margin-top: 0px; } video{ max-width:100%} .product>div {height: auto;margin-bottom: 20px } .Title {font-size: 24px; } .Title {font-size: 30px; } .news .pic {width: 100%;text-align: center;margin: 20px 0; }}@media only screen and (max-width:746px) {.nav{ background:#222}.product .Part1 li a{ font-size:12px;}header .nav a{ padding:0} header .nav {height: auto;line-height: 50px; } header .nav a {width: 33%; margin:0; color:#fff; } .Title h2{ font-size:30px;} .zhuce li span {font-size: 16px; } .zhuce li .phone2 {font-size: 16px;height: 40px;line-height: 40px; } .zhuce li button {height: 40px;line-height: 40px; } }.Reg_L .RegLcon .input {width: 100%;height: auto; }.Reg_L .RegLcon .input input.Sex {float: left;width: 14px;height: 14px;border: 0; }.Reg_L .RegLcon .input label {margin-right: 10px;padding-left: 5px;display: inline-block;width: auto;height: 14px;line-height: 14px; }.Reg_L .RegLcon .input a {display: inline-block;line-height: 14px; }六、🥇 如何讓學習不再盲目
很多剛?cè)腴T編程的小白學習了基礎(chǔ)語法，卻不知道語法的用途，不知道如何加深映像，不知道如何提升自己，這個時候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網(wǎng)上的編程初學者入門訓練。該專題為編程入門級別，適合剛學完語法的小白練習，題目涉及編程基礎(chǔ)語法，基本結(jié)構(gòu)等，每道題帶有練習模式和考試模式，可還原考試模式進行模擬，也可通過練習模式進行練習 。
七、🎁更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！
3.
以上內(nèi)容技術(shù)相關(guān)問題💌歡迎一起交流學習👇🏻👇🏻👇🏻🔥總結(jié)
以上是生活随笔為你收集整理的HTML5期末大作业：游戏网站设计与实现——基于bootstrap响应式游戏资讯网站制作HTML+CSS+JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BestCoder #88(1001 1
- 下一篇： ExtJS2.0实用简明教程——可编辑表