🎉精彩專欄推薦 💭
✍️ 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術部落客
💂 作者首頁: 【首頁——🚀擷取更多優質源碼】 🎓 web前端期末大作業： 【📚畢設項目精品實戰案例 (1000套) 】
🧡 程式員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 Echarts大屏展示大資料平台可視化(150套) 】
🔖 HTML+CSS+JS執行個體代碼： 【🗂️HTML+CSS+JS執行個體代碼 (炫酷特效網頁代碼) 繼續更新中…】
🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎到進階學習視訊教程 120G幹貨分享】
🥇 關于作者: 💬曆任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲年度十大部落格之星。 十載寒冰，難涼熱血；多年過去，曆經變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 💪堅持原創，熱衷分享，初心未改，繼往開來！
📂文章目錄
- 一、👨🎓網站題目
- 二、✍️網站描述
- 三、📚網站介紹
- 四、🌐網站示範
- 五、⚙️ 網站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多幹貨
一、👨🎓網站題目
🏫 校園網頁設計 、學校班級網頁制作、學校官網、小說書籍、等網站的設計與制作。
二、✍️網站描述
🏷️HTML靜态網頁設計作業使用dreamweaver制作，采用DIV+CSS布局，共有多個頁面，首頁使用CSS排版比較豐富，色彩鮮明有活力。頂部導航及底部區域背景色為100%寬度，主體内容區域寬度
🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)
- 頁面分為頁頭、菜單導航欄(最好可下拉)、中間内容闆塊、頁腳四大部分。
- 所有頁面互相超連結，可到三級頁面，有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>
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>學校</title>
</head>
<body>
<div class="head">
<div class="ma">
<div class="logo"> <img src="images/logo.png" width="250" /></div>
<div class="menu">
<ul class="center">
<li><a href="index.html">首頁</a></li>
<li><a href="worklist.html">作品清單</a></li>
<li><a href="schoollist.html">學校清單</a></li>
<li><a href="show.html">學校展館</a></li>
<li><a href="reg.html">會員注冊</a></li>
</ul>
</div>
<div class="clear"></div></div>
</div>
<div class="banner"><img src="images/timg.jpg" width="100%" /></div>
<div class="content">
<div class="bar"><h3>使用者注冊</h3></div>
<div class="js fss pad">
<form action="login.html">
<table>
<tr>
<td>手機号</td><td><input type="text"> <button>擷取驗證碼</button> </td>
</tr>
<tr>
<td>驗證碼</td><td><input type="text"> </td>
</tr>
<tr>
<td></td><td><input type="submit" value="立即注冊" class="btn"> </td>
</tr>
</table></form>
</div>
<div class="clear"></div>
</div>
<div class="end">
<p>版權所有 </p>
</div>
</body>
</html> 💒CSS樣式代碼
@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
a{ text-decoration:none; color:#000}
body{ width:100%; min-width: 1366px; background:#ddd; margin:0 auto; line-height:21px}
.clear{ clear:both}
.menu li{ list-style:none}
.logo{ margin:15px 0 0 20px; float:left}
.banner{ position:relative; }
.head{ background:#0f5356; height:100px}
.menu{ text-align:center; float:right; width:550px }
.menu li a{ padding:10px 20px; font-size:16px;color:#fff}.menu li { float:left; padding:40px 0; width:20%}
.right{ float:right; width:1000px; margin-right:20px; padding:0px}
.left{ float:left; width:260px; margin-left:20px; padding:0px}
.mid{ float:left; width:460px; margin-left:20px; padding:0px}
.content{ background:#fff ; font-size:14px; padding-bottom:30px; width:100%}
.content,.banner,.ma{ width: 1366px; margin: 0 auto}
.content:after{ clear: both; display: block; content: ''}
.end{ clear:both; background:#0f5356; color:#fff; padding:30px 0; text-align:center;}
.produce img{ margin:0 20px 20px 0}
.produce { line-height:30px}
.pad{ padding:20px; display:block}
.pics p{ text-align:center}
.imglist{ width:100%; margin:0 auto}
.imglist li{ float:left; width:300px; margin:15px ; text-align:center}
.scrollleft{ margin:0 0px}
.scrollleft li{ float:left; width:250px; margin-bottom:10px;}
.news li{ padding:5px;}
.title{ text-align:center; color:#F00; padding:10px}
.fl{ float:left}
.js div{ width:100%; clear:both; margin-bottom:20px; float:left}
.js div img{ float:left; margin-right:20px}
.msg>div{ padding:10px}
.bar{ margin:0px 0; margin-bottom:20px;clear:both; line-height: 50px; color:#0f5356; background:#fff ; border-bottom:#ccc solid 2px; font-size:15px;font-weight:bold; padding:10px}
.pics li img{ width:240px; height: 180px}
.tub li {
background: #fff; width:100%; border: #ccc solid 1px;
padding: 17px 0; font-size:16px; margin-bottom:7px; display:inline-block;
color: #FFFF00; text-indent: 20px;
}.gqlist li {
width: 100%; border-bottom:#ccc dashed 1px;
float: left;
padding:10px 0;
}.gqlist li b{ font-weight:normal}
.tub,.shaixuan{ margin: 20px}
.shaixuan input,.shaixuan select{ padding: 5px; vertical-align: middle}
.xuan{ padding: 0 20px}
.xuan li a{ display: inline-block; border: #ccc solid 1px; padding: 5px 15px; margin: 0 10px}
.xuan li { margin: 10px 0}
.pinlun{ margin: 0 20px}
.pinlun .box{ border-bottom: #ddd solid 1px}
.tool { text-align: center}
.tool a{ display: inline-block; padding: 10px 20px; background: #0f5356; color: #fff; font-size: 18px}
.btn{ display: inline-block; padding: 10px 20px; background: #0f5356; color: #fff; font-size: 18px; border: none}
.fss input,.fss button{ padding: 10px}
.pinlun .box{ padding: 15px} 六、🥇 如何讓學習不再盲目
第一、帶着目标去學習，無論看書報課還是各種線下活動。
首先要明确自己的學習目标是什麼，是想解決什麼問題，實作怎樣的目标。