HTML實例網(wǎng)頁代碼, 本實例適合于初學HTML的同學。該實例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。
?精彩專欄推薦????????????
? 【作者主頁——??獲取更多優(yōu)質(zhì)源碼】
? 【web前端期末大作業(yè)——????畢設(shè)項目精品實戰(zhàn)案例(1000套)】
一、網(wǎng)頁介紹??
1 網(wǎng)頁簡介：此作品為學生個人主頁網(wǎng)頁設(shè)計題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。
2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
3.知識應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設(shè)計了Logo（源文件）所需的知識點。
一、網(wǎng)頁效果??
二、代碼展示??
1.HTML代碼結(jié)構(gòu) ??
代碼如下（示例）：以下僅展示部分代碼供參考~
<!DOCTYPE html>
<html lang="en">
<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>海賊王主題網(wǎng)站</title>
<link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1649600488898/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/loading.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<header>
<nav>
<a class="logo" href="#">One Piece</a>
<ul class="nav">
<li><a href="">惡魔果實</a></li>
<li><a href="1.html">強者世界</a></li>
<li><a href="2.html">明暗大戰(zhàn)</a></li>
<li><a href="3.html">成員介紹</a></li>
<li><a href="4.html">經(jīng)典戰(zhàn)役</a></li>
<li><a href="5.html">聯(lián)系我們</a></li>
</ul>
</nav>
</header>
<main>
<section id="fruit">
<h2>惡魔果實</h2>
<ul class="fruit-box">
<li>
<img src="picture/16.jpg" alt="泡泡果實">
<h3>泡泡果實</h3>
<h5>卡莉法 </h5>
</li>
<li>
<img src="picture/21.jpg" alt="燒燒果實">
<h3>燒燒果實</h3>
<h5>艾斯/薩博</h5>
</li>
<li>
<img src="picture/31.jpg" alt="暗暗果實">
<h3>暗暗果實</h3>
<h5>黑胡子</h5>
</li>
<li>
<img src="picture/41.jpg" alt="手術(shù)果實">
<h3>手術(shù)果實</h3>
<h5>特拉法爾加·羅</h5>
</li>
<li>
<img src="picture/51.jpg" alt="牛牛果實">
<h3>牛牛果實-長頸鹿形態(tài)</h3>
<h5>卡庫 </h5>
</li>
<li>
<img src="picture/61.jpg" alt="線線果實">
<h3>線線果實</h3>
<h5>多弗朗明哥</h5>
</li>
<li>
<img src="picture/7.jpg" alt="橡膠果實">
<h3>橡膠果實</h3>
<h5>路飛</h5>
</li>
<li>
<img src="picture/8.jpg" alt="四分五裂果實">
<h3>四分五裂果實</h3>
<h5>小丑巴基</h5>
</li>
</ul>
</section>
</main>
</div>
</body>
</html>
2.CSS樣式代碼 ??
.loading{
width: 100%;
height: 100%;
background-color: bisque;
}
.dot-box {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.dot {
width: 24px;
height: 24px;
background: #3ac;
border-radius: 100%;
display: inline-block;
animation: slide 1s infinite;
}
.dot:nth-child(1) {
animation-delay: 0.1s;
background: #32cc8c;
}
.dot:nth-child(2) {
animation-delay: 0.2s;
background: #64aacc;
}
.dot:nth-child(3) {
animation-delay: 0.3s;
background: #dfe987;
}
.dot:nth-child(4) {
animation-delay: 0.4s;
background: #972ca5;
}
.dot:nth-child(5) {
animation-delay: 0.5s;
background: #faaacc;
}
@-moz-keyframes slide {
0% {
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(2);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes slide {
0% {
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(2);
}
100% {
transform: scale(1);
}
}
@-o-keyframes slide {
0% {
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(2);
}
100% {
transform: scale(1);
}
}
@keyframes slide {
0% {
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(2);
}
100% {
transform: scale(1);
}
}
三、個人總結(jié)??
一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個人要求而定)
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分；
- 所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成；
- 頁面樣式風格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術(shù)；
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)；
- 要有JS特效，如定時切換和手動切換圖片新聞；
- 頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用；
- 頁面清爽、美觀、大方，不雷同。
- 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。
四、更多干貨??
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “??點贊” “??評論” “??收藏” 一鍵三連哦！
2.??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！文章來源：http://www.zghlxwxcb.cn/news/detail-493520.html
3.以上內(nèi)容技術(shù)相關(guān)問題??歡迎一起交流學習??
文章來源地址http://www.zghlxwxcb.cn/news/detail-493520.html
到了這里，關(guān)于web前端開發(fā)——期末大作業(yè)網(wǎng)頁制作——web網(wǎng)頁設(shè)計期末課程大作業(yè) HTML+CSS+JS網(wǎng)頁設(shè)計期末課程大作業(yè) web前端開發(fā)技術(shù) web課程設(shè)計 網(wǎng)頁規(guī)劃與設(shè)計的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
