HTML實(shí)例網(wǎng)頁代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計。
? 【作者主頁——??獲取更多優(yōu)質(zhì)源碼】
? 【學(xué)習(xí)資料/簡歷模板/面試資料/ 網(wǎng)站設(shè)計與制作】
? 【web前端期末大作業(yè)——????畢設(shè)項目精品實(shí)戰(zhàn)案例】
一、網(wǎng)頁介紹
1 網(wǎng)頁簡介：此作品為學(xué)生個人主頁網(wǎng)頁設(shè)計題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明，代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。
2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
3.知識應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設(shè)計了Logo（源文件）所需的知識點(diǎn)。
一、網(wǎng)頁效果
二、代碼展示
1.HTML代碼
代碼如下（示例）：以下僅展示部分代碼供參考~
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" />
<title>《大話西游》</title>
</head>
<body>
<div class="con">
<div class="head">
<div class="logo">
<h1>《大話西游之大圣娶親》</h1>
</div>
<div class="nav">
<ul>
<li><a href="index.html">首 頁</a></li>
<li><a href="page1.html">角色介紹</a></li>
<li><a href="page2.html">幕后花絮</a></li>
<li><a href="page3.html">影片評價</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="lunbo"><a href="#"><img src="images/d1.jpg" width="1024"/></a></div>
<div class="clear"></div>
<div class="main">
<p> </p>
<h2>《大話西游之大圣娶親》簡介</h2>
<p>《大話西游之大圣娶親》（又名《大話西游之仙履奇緣》）是周星馳彩星電影公司1994年制作和出品的一部經(jīng)典的無厘頭搞笑愛情片，改編依據(jù)是吳承恩所撰寫的神怪小說《西游記》，該片是《大話西游》系列的第二部，由劉鎮(zhèn)偉導(dǎo)演，技安編劇，周星馳制作，周星馳、朱茵、莫文蔚、蔡少芬、陸樹銘、吳孟達(dá)等人主演。</p>
<p>該片主要講述了至尊寶為了救白晶晶而穿越回到五百年前，遇見紫霞仙子之后發(fā)生一段感情并最終成長為孫悟空的故事。該片于1995年2月4日在香港首映并入圍第十五屆香港電影金像獎最佳編劇獎和最佳男主角獎，周星馳憑借該片獲得第一屆香港電影金紫荊獎最佳男主角獎和第二屆香港電影評論學(xué)會獎最佳男主角獎。</p>
<p> </p>
<h2>劇情介紹</h2>
<div></div>
<div> 紫霞和青霞原是佛祖纏在一起的燈芯，兩人前世斗爭激烈。紫霞奪走了至尊寶的月光寶盒，又在他的腳上印下了3顆痣。紫霞要至尊寶帶她走，牛魔王要納紫霞為妾，而牛的妹妹牛香香也要嫁至尊寶，一時亂作一團(tuán)。鐵扇公主也趕來和牛魔王殺在一起。牛魔王擒回紫霞逼迫她與他成親，被綁在一旁的唐僧流下了同情的淚水。至尊寶拿起金箍套在頭上，他便不再是凡人了。孫悟空駕云來到牛府，要救唐僧一行去西天取經(jīng)。</div>
<p> </p>
<p></p>
<p></p>
<p></p>
<h2>電影片段</h2>
<div class="main_list">
<ul>
<li><a href="#"><img src="images/q1.jpg" /></a></li>
<li><a href="#"><img src="images/q2.jpg" /></a></li>
<li><a href="#"><img src="images/q3.jpg" /></a></li>
<li><a href="#"><img src="images/q4.jpg" /></a></li>
<li><a href="#"><img src="images/q5.jpg" /></a></li>
<li><a href="#"><img src="images/q6.jpg" /></a></li>
<li><a href="#"><img src="images/q7.jpg" /></a></li>
<li><a href="#"><img src="images/q8.jpg" /></a></li>
<li><a href="#"><img src="images/q9.jpg" /></a></li>
<li><a href="#"><img src="images/q10.jpg" /></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="foot">
<p>版權(quán)所有：《大話西游之大圣娶親》</p>
<p>All Rights Reserved</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
2.CSS代碼
/*----------------------common-------------------------*/
* {
margin: 0;
padding: 100;
font-family: Microsoft YaHei;
}
.clear {
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
img {
border: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
li {
list-style-type: none;
}
.ofh {
overflow: hidden;
}
.center {
text-align: center;
}
.em {
text-indent: 2em;
}
.p5 {
padding: 5px;
}
.pl50 {
padding-left: 50px;
}
body {
background-attachment: fixed;
background-color: #000;
background-image: url(../images/bj.jpg);
background-repeat: no-repeat;
background-position: center top;
}
/*----------------------con-------------------------*/
.con {
width: 960px;
padding: 20px;
height: auto;
margin: 10px auto;
background: #fff;
background-color: rgba(255, 255, 255, 0.8);
-moz-border-radius: 10px;
border-radius: 10px;
}
/*----------------head-----------------*/
.head {
width: 960px;
height: auto;
margin: auto;
}
.logo {
width: 550px;
height: 60px;
}
.logo h1 {
font-size: 36px;
line-height: 60px;
color: #000;
font-family: 黑體;
}
.nav {
width: 960px;
height: 40px;
margin: 5px auto;
background-color: #000;
-moz-border-radius: 5px;
border-radius: 5px;
}
.nav ul {
padding-left: 10px;
}
.nav li {
float: left;
padding: 5px 20px;
}
.nav li a {
font-size: 20px;
line-height: 30px;
color: #fff;
}
.nav li a:hover {
color: #fff;
text-decoration: none;
}
.nav li:hover {
background-color: #f97255
}
.nav li:hover a {
color: #fff;
}
.lunbo {
width: 960px;
height: 350px;
margin: 5px auto;
overflow: hidden;
-moz-border-radius: 5px;
border-radius: 5px;
}
/*----------------main-----------------*/
.main {
width: 960px;
height: auto;
margin: 10px auto;
font-size: 14px;
line-height: 24px;
color: #555;
}
.main h2 {
font-size: 18px;
line-height: 46px;
color: #333;
}
.main p {
font-size: 14px;
line-height: 24px;
color: #555;
text-indent: 2em;
}
.main_list {
width: 960px;
height: auto;
}
.main_list li {
width: 150px;
height: 100px;
float: left;
margin: 3px;
border: 2px solid #fff;
}
.main_list li:hover {
border: 2px solid #ffca2c;
}
.main_list li img {
width: 150px;
height: 100px;
}
/*----------------foot-----------------*/
.foot {
width: 960px;
height: 50px;
margin: 10px auto;
padding-top: 10px;
border-top: 3px solid #600;
text-align: center;
font-size: 14px;
line-height: 24px;
color: #666;
}
.foot {
font-size: 14px;
line-height: 24px;
color: #CCC;
}
.con .main p img {
float: right;
}
.con .main ul li {
float: left;
list-style-type: none;
padding-left: 10px;
}
.con .main span {
width: 300px;
height: 200px;
display: block;
float: left;
padding-left: 10px;
padding-right: 5px;
line-height: 30px;
}
.con .main ul li {
float: left;
height: auto;
width: 137px;
padding-left: 20px;
}
.con .main ul li p {
font-size: 12px;
color: #000;
}
三、個人總結(jié)
一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個人要求而定)
- 頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分；
- 所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成；
- 頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術(shù)；
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)；
- 要有JS特效，如定時切換和手動切換圖片新聞；
- 頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用；
- 頁面清爽、美觀、大方，不雷同。
- 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。
四、精彩推薦
1.看到這里了就 【點(diǎn)贊收藏博文】 三連支持下吧，你的支持是我創(chuàng)作的動力, 【觀注作者 |獲取更多源碼| 優(yōu)質(zhì)文章】 。
2.關(guān)注我?guī)鷮W(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！文章來源：http://www.zghlxwxcb.cn/news/detail-767216.html
3.文章來源地址http://www.zghlxwxcb.cn/news/detail-767216.html
到了這里，關(guān)于制作一個簡單HTML個人網(wǎng)頁網(wǎng)頁（HTML+CSS）大話西游之大圣娶親電影網(wǎng)頁設(shè)計的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
