<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>
<head>
<meta charset="utf-8">
<title>首頁</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="107" valign="middle"><img src="images/0.jpg" width="90" height="90"></td>
<td width="793" valign="middle">
原神
</td>
</tr>
<tr>
<td height="30" colspan="2" valign="middle">
<hr>
</td>
</tr>
</table>
<div id="container">
<!-- 輪播圖 -->
<ul id="img_ul">
<!-- 與之前相比，前後多了兩張圖檔 -->
<li><img src="images/01.jpg"></li>
<li><img src="images/0.jpg"></li>
<li><img src="images/02.jpg"></li>
<li><img src="images/03.jpg"></li>
<li><img src="images/5.png"></li>
<li><img src="images/6.jpg"></li>
</ul>
<!-- 底部按鈕 -->
<ul id="litCir_ul"></ul>
<!-- 左右切換按鈕 -->
<div id="buttons">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" height="30"><a rel="nofollow" href="index.html" id="Moveout" class="Moveout" onmouseover="Moveoutsover()"
onmouseout="MoveoutSout()">首頁</a>
</td>
<td width="16%"><a rel="nofollow" href="wy2.html" id="Moveout1" class="Moveout" onmouseover="Moveoutsover()"
onmouseout="MoveoutSout()">星空</a></td>
<td width="17%"><a rel="nofollow" href="wy3.html" id="Moveout2" class="Moveout" onmouseover="Moveoutsover()"
onmouseout="MoveoutSout()">向日葵</a></td>
<td width="20%"><a rel="nofollow" href="wy4.html" id="Moveout3" class="Moveout" onmouseover="Moveoutsover()"
onmouseout="MoveoutSout()">松柏樹</a></td>
<td width="16%"><a rel="nofollow" href="wy5.html" id="Moveout4" class="Moveout" onmouseover="Moveoutsover()"
onmouseout="MoveoutSout()">午睡</a></td>
<td width="16%"> </td>
</tr>
<tr>
<td width="15%" height="30"><a rel="nofollow" href="index.html" class="contenter" id="content" style="display: none;">首頁</a>
</td>
<td width="16%"><a rel="nofollow" href="wy2.html" class="contenter" id="content1" style="display: none;">星空</a></td>
<td width="17%"><a rel="nofollow" href="wy3.html" class="contenter" id="content2" style="display: none;">向日葵</a></td>
<td width="20%"><a rel="nofollow" href="wy4.html" class="contenter" id="content3" style="display: none;">松柏樹</a></td>
<td width="16%"><a rel="nofollow" href="wy5.html" class="contenter" id="content4" style="display: none;">午睡</a></td>
<td width="16%"> </td>
</tr>
</table>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="40" colspan="2">
<hr>
</td>
</tr>
<tr>
<td width="627">
<h2 align="center">梵高介紹</h2>
<p>文森特·梵高（Vincent van Gogh，1853年3月30日—1890年7月29日），荷蘭後印象派畫家。代表作有《星月夜》、自畫像系列、向日葵系列等。</p>
<p>
梵高出生于1853年3月30日荷蘭鄉村津德爾特的一個新教牧師家庭，早年的他做過職員和商行經紀人，還當過礦區的傳教士最後他投身于繪畫。他早期畫風寫實，受到荷蘭傳統繪畫及法國寫實主義畫派的影響。1886年，他來到巴黎，結識印象派和新印象派畫家，并接觸到日本浮世繪的作品，視野的擴充使其畫風巨變，他的畫，開始由早期的沉悶、昏暗，而變得簡潔、明亮和色彩強烈。1888年，來到法國南部小鎮阿爾，已經擺脫印象派及新印象派的影響，走到了與之背道而馳的境地。同年與高更交往，但由于二人性格的沖突和觀念的分歧，合作很快便告失敗。此後，梵高的瘋病（有人記載是“癫痫病”）時常發作，但神志清醒時他仍然堅持作畫，1890年7月，他在精神錯亂中開槍自殺，年僅37歲。
</p>
</td>
<td width="273">
<div>
<p>
<span>使用者名:</span><input type="text" placeholder="請輸入使用者名">
</p>
<p>
<span>密 碼:</span><input type="text" placeholder="請輸入密碼">
</p>
<p>
<button>登入</button>
</p>
</div>
</td>
</tr>
</table>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="40"> </td>
</tr>
</table>
</body>
<script>
var img_ul = document.getElementById("img_ul"); // 輪播圖
var litCir_ul = document.getElementById("litCir_ul"); // 圓點按鈕 ul
var buttons = document.getElementById("buttons"); // 左右切換按鈕
var cLis = litCir_ul.children; // 圓點按鈕
var len = img_ul.children.length - 2; // 真實圖檔數，圖檔清單有6張，真實圖檔數隻有4張
var width = 500; //每張圖檔的寬度
var picN = 1; //目前顯示的圖檔下标為1，展示第一張圖檔
// 根據圖檔數添加小圓點
for (let i = 0; i < len; ++i) {
var a_li = document.createElement("li");
a_li.className = 'quiet';
litCir_ul.appendChild(a_li);
}
// 預設把第一個圓點按鈕設定 active
litCir_ul.children[0].className = 'active';
// 觸碰小圓點切換圖檔
for (var i = 0; i < len; i++) {
// 給每個小圓點綁定 mouseover 事件
cLis[i].onmouseover = function () {
// 停止輪播
clearInterval(img_ul.timer);
for (var j = 0; j < len; j++) {
cLis[j].className = "quiet";
}
this.className = "active";
picN = i + 1; // 切換的圖檔下标
img_ul.style.left = (picN * width * -1) + 'px'; // 切換圖檔
}
// 開啟輪播
cLis[i].onmouseout = function () {
Roll();
}
}
function setActiveSpot() {
for (var j = 0; j < len; j++) {
cLis[j].className = "quiet";
}
// 這裡是 picN - 1 是因為下标picN的圖檔對應着下标為picN - 1的圓點
cLis[picN - 1].classList = "active";
}
function Roll() {
clearInterval(img_ul.timer);
img_ul.timer = setInterval(() => {
++picN;
img_ul.style.transition = "all .5s";
img_ul.style.left = (picN * width * -1) + 'px';
if (picN === len + 1) {
picN = 1;
setActiveSpot();
setTimeout(() => {
img_ul.style.transitionProperty = "none"; // 取消動畫
img_ul.style.left = -width + 'px'; // 改變 left 值
}, 500)
} else {
setActiveSpot();
}
}, 2000)
}
Roll();
// 停止輪播
buttons.children[0].onmouseover = function () {
clearInterval(img_ul.timer);
}
buttons.children[1].onmouseover = function () {
clearInterval(img_ul.timer);
}
// 開啟輪播
buttons.children[0].onmouseout = function () {
Roll();
}
buttons.children[1].onmouseout = function () {
Roll();
}
// 節流函數
function throttle(fn, time) {
let canRun = true;
// 閉包
return function () {
if (!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, time);
}
}
// 上一張按鈕
buttons.children[0].onclick = throttle(function () {
--picN;
img_ul.style.transition = "all .5s";
img_ul.style.left = (picN * width * -1) + 'px';
if (picN === 0) {
picN = len;
setActiveSpot();
setTimeout(() => {
img_ul.style.transitionProperty = "none";
img_ul.style.left = (picN * width * -1) + 'px';
}, 500);
} else {
setActiveSpot();
}
}, 500)
// 下一站按鈕
buttons.children[1].onclick = throttle(function () {
++picN;
img_ul.style.transition = "all .5s";
img_ul.style.left = (picN * width * -1) + 'px';
if (picN === len + 1) {
picN = 1;
setActiveSpot();
setTimeout(() => {
img_ul.style.transitionProperty = "none";
img_ul.style.left = 0;
}, 500);
} else {
setActiveSpot();
}
}, 500)
var Moveout = document.getElementById("Moveout");
var content = document.getElementById("content");
//滑鼠移入顯示
Moveout.onmouseover = function () {
content.style.display = "block";
}
function Moveoutsover() {
content.style.display = "block";
}
//滑鼠移出隐藏
Moveout.onmouseout = function () {
content.style.display = "none";
}
function MoveoutSout() {
content.style.display = "none";
}
var Moveout1 = document.getElementById("Moveout1");
var content1 = document.getElementById("content1");
//滑鼠移入顯示
Moveout1.onmouseover = function () {
content1.style.display = "block";
}
function Moveoutsover() {
content1.style.display = "block";
}
//滑鼠移出隐藏
Moveout1.onmouseout = function () {
content1.style.display = "none";
}
function MoveoutSout() {
content1.style.display = "none";
}
var Moveout2 = document.getElementById("Moveout2");
var content2 = document.getElementById("content2");
//滑鼠移入顯示
Moveout2.onmouseover = function () {
content2.style.display = "block";
}
function Moveoutsover() {
content2.style.display = "block";
}
//滑鼠移出隐藏
Moveout2.onmouseout = function () {
content2.style.display = "none";
}
function MoveoutSout() {
content2.style.display = "none";
}
var Moveout3 = document.getElementById("Moveout3");
var content3 = document.getElementById("content3");
//滑鼠移入顯示
Moveout3.onmouseover = function () {
content3.style.display = "block";
}
function Moveoutsover() {
content3.style.display = "block";
}
//滑鼠移出隐藏
Moveout3.onmouseout = function () {
content3.style.display = "none";
}
function MoveoutSout() {
content3.style.display = "none";
}
var Moveout4 = document.getElementById("Moveout4");
var content4 = document.getElementById("content4");
//滑鼠移入顯示
Moveout4.onmouseover = function () {
content4.style.display = "block";
}
function Moveoutsover() {
content4.style.display = "block";
}
//滑鼠移出隐藏
Moveout4.onmouseout = function () {
content4.style.display = "none";
}
function MoveoutSout() {
content4.style.display = "none";
}
</script>
<style>
/* 包裹輪播圖的容器需要使用 overflow: hidden 來隐藏超出的圖檔 */
#container {
position: relative;
width: 500px;
height: 400px;
margin: 0 auto;
overflow: hidden;
margin-left: 10;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#img_ul {
width: 3000px;
/* 輪播圖寬度為 圖檔數 * 圖檔寬 */
height: 400px;
position: absolute;
top: 0;
left: -500px;
/* 圖檔清單的預設 left 值 */
transition: all .5s;
}
#img_ul li {
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 400px;
}
#img_ul li img {
width: 500px;
height: 400px;
}
#litCir_ul {
position: absolute;
margin: 0;
padding: 0;
right: 10px;
bottom: 10px;
}
#litCir_ul li {
margin: 0;
padding: 0;
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
/* 圓點按鈕生效樣式 */
li.active {
background-color: white;
}
li.quiet {
background-color: #1e90ff;
}
#buttons {
margin: 0;
padding: 0;
display: none;
}
/* hover 輪播圖則顯示左右切換按按鈕 */
#container:hover #buttons {
display: block;
}
#buttons span {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: Simsun;
font-size: 30px;
border: 1px solid #fff;
opacity: 0.3;
cursor: pointer;
color: #fff;
background: black;
}
#left {
left: 5px;
}
#right {
left: 100%;
margin-left: -45px;
}
</style>
</html>
💒CSS樣式代碼
@charset "utf-8";
/* CSS Document */
body{
font-family:"宋體";
font-size:14px;
}
a{
color:#000;
text-decoration:none;
}
a:hover{color:#F00; text-decoration:underline;}
p{
line-height:28px;
text-indent:2em;
letter-spacing:2px;
}
<hr>
六、🥇 如何讓學習不再盲目
很多剛入門程式設計的小白學習了基礎文法，卻不知道文法的用途，不知道如何加深映像，不知道如何提升自己，這個時候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網上的程式設計初學者入門訓練。該專題為程式設計入門級别，适合剛學完文法的小白練習，題目涉及程式設計基礎文法，基本結構等，每道題帶有練習模式和考試模式，可還原考試模式進行模拟，也可通過練習模式進行練習 。
<hr>