<font color='#16c60c' size='5px'> 🎉精彩專欄推薦👇🏻👇🏻👇🏻 </font>
✍️ 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術部落客
💂 作者首頁: 【首頁——🚀擷取更多優質源碼】
🎓 web前端期末大作業： 【📚畢設項目精品實戰案例 (1000套) 】
🧡 程式員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 echarts大屏展示大資料平台可視化(150套) 】
🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎到進階學習視訊教程 120G幹貨分享】
🥇 關于作者: 曆任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲CSDN年度十大部落格之星。 十載寒冰，難涼熱血；多年過去，曆經變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 💪堅持原創，熱衷分享，初心未改，繼往開來！
<hr>
(📂文章目錄)
<hr>
一、👨🎓網站題目
🧑個人網頁設計、🙋♂️個人履歷制作、👨💼簡單靜态HTML個人網頁作品、👨🏭個人介紹網站模闆 、等網站的設計與制作。
<hr>
二、✍️網站描述
⭐個人網頁設計網站模闆采用DIV CSS布局制作，網頁作品有多個頁面，如 :個人介紹（文字頁面）、我的作品（圖檔清單）、個人技能（圖文頁面）、線上留言（表單頁面）CSS樣式方面網頁整體采用左右布局結構，制作了網頁背景圖檔，導航區域每個導航背景色不同，導航背景色與頁面背景呼應。
🏅 一套A+的網頁應該包含 (具體可根據個人要求而定)
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉。
- 要有JS特效，如定時切換和手動切換圖檔輪播。
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。。
- 頁面清爽、美觀、大方，不雷同。 。
-
不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。
<hr>
三、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言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代碼）。
四、🌐網站示範
<hr>
五、🔧 網站代碼
🧱HTML結構代碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
#tab td:first-child {
min-width: 200px;
text-align: center;
}
#tab td:nth-child(2) {
width: 400px;
padding: 0 40px;
line-height: 40px;
}
#tab1 td {
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div class="body">
<!--nav-->
<div class="nav">
<div class="main">
<ul>
<li>
<a rel="nofollow" href="#"><img src="images/logo.png" height="100%"></a>
</li>
<li>
<a rel="nofollow" href="index.html">部落格首頁</a>
</li>
<li>
<a rel="nofollow" href="index1.html" class="active">個人簡介</a>
</li>
<li>
<a rel="nofollow" href="index2.html">個人作品</a>
</li>
<li>
<a rel="nofollow" href="index3.html">聯系我</a>
</li>
<li>
<a rel="nofollow" href="index4.html">會員登入</a>
</li>
<li>
<a>
<p class="search">
<input type="text" name="" id="" value="" placeholder="搜尋" />
</p>
</a>
</li>
</ul>
</div>
</div>
<!--nav-->
<!-- banner -->
<div class="main">
<div class="banner">
<img src="images/banner1.jpg">
</div>
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" id="tab">
<tr>
<td width="10%">個人頭像</td>
<td style="text-align: center;" width="10%">
<img src="images/me.jpg" width="300">
</td>
<td colspan="2">
<p style="line-height: 40px;padding: 10px 20px;">姓名:xxxxx </p>
<p style="line-height: 40px;padding: 10px 20px;">專業:xxxx</p>
<p style="line-height: 40px;padding: 10px 20px;">學号:xxxx</p>
</td>
</tr>
<tr>
<td>自我評價</td>
<td colspan="3">
xxxxx，來自北京xxxxxx學校的大三，專業:xxxxx，我一個性格開朗，樂于助人的陽光大男孩。平時喜歡攝影，打籃球，聽音樂。喜歡貓咪，養來一隻英國短毛貓，在家時候經常撸貓。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="606" height="214">
<param name="movie" value="images/flash7291.swf" wmode="transparent" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="images/flash7291.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="606" height="214"></embed>
</object>
</td>
</tr>
</table>
</div>
<div class="foot">
© Copyright 版權所有
</div>
</div>
</body>
</html>
💒CSS樣式代碼
* {
margin: 0;
padding: 0;
font-family: "黑體";
font-size: 14px;
color: #5c5c5c;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
color: #5C5C5C;
}
html,
body {
min-height: 1080px;
background: url(../images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
.body {
width: 100%;
overflow: hidden;
}
.main {
width: 1100px;
margin: 0 auto;
overflow: hidden;
background: #efefef;
}
/*nav*/
.nav {
width: 100%;
margin-top: 10px;
overflow: hidden;
background: #efefef;
background-size: 100% 100%;
text-align: center;
}
.nav ul{
overflow: hidden;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
}
.nav ul li {
float: left;
}
.nav ul li a {
line-height: 50px;
font-weight: 700;
display: block;
padding: 0 20px;
}
.active {
border-radius: 5px;
background: #e4e3e3;
}
.search input{
width: 100px;
border: 1px solid #aaa;
border-radius: 5px;
height: 26px;
}
.search img{
vertical-align: middle;
margin-left: -20px;
}
.foot{
background: #efefef;
text-align: center;
height: 40px;
line-height:40px ;
}
<hr>
六、🥇 如何讓學習不再盲目
很多剛入門程式設計的小白學習了基礎文法，卻不知道文法的用途，不知道如何加深映像，不知道如何提升自己，這個時候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網上的程式設計初學者入門訓練。該專題為程式設計入門級别，适合剛學完文法的小白練習，題目涉及程式設計基礎文法，基本結構等，每道題帶有練習模式和考試模式，可還原考試模式進行模拟，也可通過練習模式進行練習 。
<hr>