✍️ 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術部落客
十載寒冰，難涼熱血；多年過去，曆經變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 💪堅持原創，熱衷分享，初心未改，繼往開來！
📂文章目錄
- 一、👨🎓網站題目
- 二、✍️網站描述
- 三、📚網站介紹
- 四、🌐網站效果
- 五、🔧 網站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多幹貨
一、👨🎓網站題目
🎮遊戲官網、⛹️遊戲網站、🕹️電競遊戲、🎴遊戲介紹、等網站的設計與制作。
二、✍️網站描述
⭐ 網頁中包含：Div+CSS、滑鼠滑過特效、Table、導航欄效果、banner、表單、二級三級頁面等，視訊音頻元素，同時設計了logo（源檔案），基本期末作業所需的知識點全覆寫。
🏅 一套A+的網頁應該包含 (具體可根據個人要求而定)
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉。
- 要有JS特效，如定時切換和手動切換圖檔輪播。
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。。
- 頁面清爽、美觀、大方，不雷同。 。
- 不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。
三、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。
📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。
📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；
📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html編輯軟體進行運作及修改編輯等操作）。
其中：
（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；
（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。
四、🌐網站效果
五、🔧 網站代碼
🧱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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>超級英雄排行榜</title>
<meta name="description" content="" />
<link href="./css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="index">
<div id="go"><a href="./rankings/10.html">點選進入超級英雄排行榜</a></div>
<audio src="bgmusic/Kim Taylor - I Am You.mp3" controls="controls" hidden="true" autoplay="autoplay" loop="loop" width="0"> </audio>
</div>
</body>
</html> 💒CSS樣式代碼
*{padding:0; margin:0;}
body{min-height:900px; position:relative; font-size:14px; font-family:"微軟雅黑"; color:#666; height:100%; background:url(../images/bg.jpg) no-repeat center top fixed; background-size:cover;}
h3{font-size:16px; padding:0; font-weight:normal;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
a img{border:none;}
ul,li{list-style-type:none;}
.clearfix{clear:both;}
.box-wrapper{width:800px; margin:0 auto;}
#index{width:100%;}
#go{width:500px; height:60px; line-height:60px; position:absolute; font-size:30px; text-align:center; color:#fff; font-weight:bold; left:50%; margin-left:-250px; top:50%; margin-top:-30px;}
#go a{color:#fff;}
#go a:hover{font-size:36px;}
#banner{padding-bottom:40px;}
#logo{height:50px; line-height:50px; text-align: center; font-size:30px; text-align:center; padding-top:150px; padding-bottom:100px;}
#logo a{color:#fff; font-weight:bold;}
#nav{width:800px; margin:0 auto;}
#nav ul{width:900px;}
#nav li{width:20%; float:left; padding-bottom:20px;}
#nav li a{display:block; margin-right:100px; height:80px; background:#fff; color:#44a5f7; text-align:center; line-height:80px; font-weight:bold; font-size:36px;}
#main{background:#fff; min-height:600px;}
.content{padding:20px 20px 50px; background:#eee;}
.content h1{text-align:center; font-size:24px; font-weight:bold;}
.content .description{padding:20px 0;}
.content .pic{text-align:center;}
.content .pic p{padding:5px 0;}
#footer{background:#000; padding:20px 0 40px; text-align:center;}
script {
}
script {
}
script {
}