HTML實(shí)例網(wǎng)頁(yè)代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過(guò)從頭開(kāi)始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)踐設(shè)計(jì)。
一、網(wǎng)頁(yè)介紹
1 網(wǎng)頁(yè)簡(jiǎn)介：此作品為學(xué)生個(gè)人主頁(yè)網(wǎng)頁(yè)設(shè)計(jì)題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè)源碼，這是一個(gè)不錯(cuò)的網(wǎng)頁(yè)制作，畫面精明，代碼為簡(jiǎn)單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。
2.網(wǎng)頁(yè)編輯：網(wǎng)頁(yè)作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
3.知識(shí)應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁(yè)知識(shí)中的: Div+CSS、鼠標(biāo)滑過(guò)特效、Table、導(dǎo)航欄效果、Banner、表單、二級(jí)三級(jí)頁(yè)面等，視頻、 音頻元素 、Flash，同時(shí)設(shè)計(jì)了Logo（源文件）所需的知識(shí)點(diǎn)。
一、網(wǎng)頁(yè)效果
二、代碼展示
1.HTML代碼
代碼如下（示例）：以下僅展示部分代碼供參考~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>電影網(wǎng)站</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/icofont.css" />
<link rel="stylesheet" href="css/mian_style.css" />
<script src='./js/jquery.js'></script>
</head>
<body>
<!--頭部開(kāi)始 -->
<header class="header">
<div class="container">
<div class="header_area">
<div class="logo">
<a href="index.html">
<img src="picture/logo.png" alt="logo"/>
</a>
</div>
<div class="meau">
<ul>
<li>
<a class="active" href="index.html">首頁(yè)</a>
</li>
<li>
<a href="movies.html">電影</a>
</li>
<li>
<a href="celebrities.html">明星</a>
</li>
<li>
<a href="hot.html">熱點(diǎn)</a>
</li>
<li>
<a href="news.html">新聞</a>
</li>
<li style="width: 120px;">
<a href="###" class="theme-btn">
<i class="icofont icofont-ticket"></i>
訂票
</a>
</li>
</ul>
</div>
</div>
</div>
<!--頭部結(jié)束-->
</header>
<!--內(nèi)容部分開(kāi)始-->
<section id="content">
<!--banner開(kāi)始-->
<div class="banner">
<ul class="list">
<li class="on"><a href="#"><img src="picture/b1.jpg" alt="" /></a></li>
<li><a href="#"><img src="picture/b2.jpg" alt="" /></a></li>
<li><a href="#"><img src="picture/b3.jpg" alt="" /></a></li>
<li><a href="#"><img src="picture/b4.jpg" alt="" /></a></li>
<li><a href="#"><img src="picture/b5.jpg" alt="" /></a></li>
</ul>
<ul class="btn">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<a href="javascript:;" class="arrow left"><</a>
<a href="javascript:;" class="arrow right">></a>
</div>
<!--近期熱播-->
<div class="con_area">
<div class="container">
<div class="recent_con">
<div class="con_top">
<h1>
<i class="icofont icofont-movie" ></i>
近期熱播
</h1>
<a href="index.html" class="more">
MORE>>
</a>
</div>
<div class="con_main">
<ul style="overflow:hidden;margin-bottom: 20px;">
<li class="img_right">
<img src="picture/portfolio1.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<div class="portfolio-content">
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</div>
</li>
<li class="img_right">
<img src="picture/portfolio2.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
<li class="img_right">
<img src="picture/portfolio2.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
<li>
<img src="picture/portfolio4.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
</ul>
<ul>
<li class="img_right">
<img src="picture/portfolio5.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
<li class="img_right">
<img src="picture/portfolio6.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
<li class="img_right">
<img src="picture/portfolio2.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
<li>
<img src="picture/portfolio4.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--經(jīng)典電影-->
<div class="con_area">
<div class="container">
<div class="jd_con">
<div class="con_top">
<h1>
<i class="icofont icofont-film" ></i>
經(jīng)典電影
</h1>
<a href="index.html" class="more">
MORE>>
</a>
</div>
<div class="row" style="overflow: hidden; width: 100%;">
<div class="col-md-9">
<div class="video-area">
<img src="picture/video1.png" alt="video" />
<a href="###" class="popup-youtube">
<i class="icofont icofont-ui-play"></i>
</a>
<div class="video-text">
<h2>Angle of Death</h2>
<div class="review">
<div class="author-review">
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
</div>
<h4>180k voters</h4>
</div>
</div>
</div>
<div class="video-area">
<img src="picture/video1.png" alt="video" />
<a href="###" class="popup-youtube">
<i class="icofont icofont-ui-play"></i>
</a>
<div class="video-text">
<h2>Angle of Death</h2>
<div class="review">
<div class="author-review">
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
</div>
<h4>180k voters</h4>
</div>
</div>
</div>
<div class="video-area">
<img src="picture/video1.png" alt="video" />
<a href="###" class="popup-youtube">
<i class="icofont icofont-ui-play"></i>
</a>
<div class="video-text">
<h2>Angle of Death</h2>
<div class="review">
<div class="author-review">
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
</div>
<h4>180k voters</h4>
</div>
</div>
</div>
<div class="video-area">
<img src="picture/video1.png" alt="video" />
<a href="###" class="popup-youtube">
<i class="icofont icofont-ui-play"></i>
</a>
<div class="video-text">
<h2>Angle of Death</h2>
<div class="review">
<div class="author-review">
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
</div>
<h4>180k voters</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 最新電影-->
<div class="con_area">
<div class="container">
<div class="jd_con">
<div class="con_top">
<h1>
<i class="icofont icofont-coffee-cup" ></i>
最新電影
</h1>
<a href="index.html" class="more">
MORE>>
</a>
</div>
</div>
<div class="news-slide-area">
<div class="news-slider">
<div class="single-news">
<div class="news-bg-1"></div>
<div class="news-date">
<h2><span>NOV</span> 25</h2>
<h1>2017</h1>
</div>
<div class="news-content">
<h2>The Witch Queen</h2>
<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
</div>
<a href="#">Read More</a>
</div>
<div class="single-news">
<div class="news-bg-2"></div>
<div class="news-date">
<h2><span>NOV</span> 25</h2>
<h1>2017</h1>
</div>
<div class="news-content">
<h2>The Witch Queen</h2>
<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
</div>
<a href="#">Read More</a>
</div>
<div class="single-news">
<div class="news-bg-3"></div>
<div class="news-date">
<h2><span>NOV</span> 25</h2>
<h1>2017</h1>
</div>
<div class="news-content">
<h2>The Witch Queen</h2>
<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
</div>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--end start-->
<footer id="end">
<div class="container">
<span class="company">
北京時(shí)代國(guó)際影業(yè)有限公司
</span>
</div>
</footer>
</body>
<script type="text/javascript" src="js/main.js"></script>
</html>
2.CSS代碼
body{
line-height: 24px;
font-size: 14px;
color: #b6b7b9;
background: #13151f;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: relative;
/* height: 5000px;*/
}
.header{
padding: 18px 0;
width: 100%;
border-bottom: 1px solid #252838;
z-index: 99;
}
.header_area{
overflow: hidden;
}
.container{
max-width: 1140px;
margin: 0 auto;
}
.logo{
float: left;
}
.logo a{
display: inline-block;
}
.meau{
float: right;
padding-top: 34px;
}
.meau li{
float: left;
width: 90px;
text-align: center;
}
.meau li a{
font-family: "微軟雅黑";
font-size: 14px;
color: #ffffff;
text-decoration: none;
}
.meau li a:hover{
color: #eb315a;
}
.meau li .active{
color: #eb315a;
}
.meau li .theme-btn{
background: #eb315a;
border: 1px solid #eb315a;
color: #fff;
border-radius: 35px;
padding: 5px 25px;
display: inline-block;
font-size: 15px;
cursor: pointer;
font-weight: 500;
}
.meau li .theme-btn:hover{
color: #eb315a;
border: 1px solid #eb315a;
background: rgba(235,49,90,0.2);
}
/*banner*/
.banner{
width: 100%;
height: 450px;
margin: 0px auto;
overflow: hidden;
position: relative;
}
.list li{
position: absolute;
width: 100%;
text-align: center;
}
.btn{
font:14px/2.5em "微軟雅黑";
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-55%);
bottom:40px;
z-index: 2;
}
.btn li{
float: left;
width: 30px;
line-height: 30px;
border-radius: 50%;
background: salmon;
margin: 0 5px;
color: #fff;
cursor: pointer;
}
.btn .on{
background: slateblue;
}
.list .on{
z-index: 1;
}
.arrow{
position: absolute;
top: 50%;
transform: translateY(-40%);
width: 30px;
text-align: center;
line-height: 60px;
background: rgba(0,0,0,0.3);
color: #fff;
text-decoration: none;
font-size: 20px;
z-index: 2;
}
.right{
right: 14%;
}
.left{
left:14%;
}
.arrow:hover{
background: rgba(0,0,0,0.5);
font-weight: bold;
text-decoration: none;
}
/*近期熱播*/
.con_area{
padding-top: 30px;
}
.recent_con{
overflow: hidden;
}
.con_top{
height: 54px;
padding:8px 0;
border-bottom: 1px solid #ffffff;
}
.con_top h1{
float: left;
}
.con_top h1 i{
color: #fece50;
font-size: 40px;
margin-right: 5px;
}
h1{
font-size: 36px;
color: #ffffff;
}
.more{
float: right;
line-height: 74px;
color: #eb315a;
}
.con_main{
margin-top: 50px;
}
.con_main li{
float: left;
display: block;
position: relative;
cursor: pointer;
width: 255px;
}
.con_main li:hover img{
width: 102%;
height: 102%;
}
.con_main li img{
transition: 0.9s
}
.con_main .img_right{
margin-right: 2.2%;
}
.con_main li a{
display: block;
position: absolute;
top: 42%;
margin-top: -30px;
margin: auto;
left: 50%;
margin-left: -30px;
}
.con_main li i{
width: 60px;
height: 60px;
line-height: 60px;
color: #fff;
border: 2px solid #fff;
border-radius: 50%;
text-align: center;
font-size: 18px;
display: inline-block;
transition: all 0.4s;
}
.con_main li i:hover{
color: orange;
border-color: orange;
}
/*底部*/
#end{
margin-top: 30px;
background:#202334;
}
.company{
width: 100%;
display: inline-block;
padding: 20px 0px;
text-align: center;
}
/*詳情頁(yè)標(biāo)題*/
.breadcrumb-area-content h2{
margin-top: 30px;
}
三、個(gè)人總結(jié)
一套合格的網(wǎng)頁(yè)應(yīng)該包含(具體可根據(jù)個(gè)人要求而定)
- 頁(yè)面分為頁(yè)頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁(yè)腳四大部分；
- 所有頁(yè)面相互超鏈接，可到三級(jí)頁(yè)面，有5-10個(gè)頁(yè)面組成；
- 頁(yè)面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯(cuò)亂，使用Div+Css技術(shù)；
- 菜單美觀、醒目，二級(jí)菜單可正常彈出與跳轉(zhuǎn)；
- 要有JS特效，如定時(shí)切換和手動(dòng)切換圖片新聞；
- 頁(yè)面中有多媒體元素，如gif、視頻、音樂(lè)，表單技術(shù)的使用；
- 頁(yè)面清爽、美觀、大方，不雷同。
- 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來(lái)，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。
四、心得體會(huì)
許多開(kāi)發(fā)人員認(rèn)為攬長(zhǎng)設(shè)計(jì)是一種天生的能力，而創(chuàng)造力是與生俱來(lái)的。但是設(shè)計(jì)是一項(xiàng)可以像其他任何東西一樣學(xué)習(xí)的技能。你不必天生就可以創(chuàng)建一個(gè)漂亮的網(wǎng)站的藝術(shù)家，這需要實(shí)踐，熟不知局限太大，自己想要的內(nèi)容板式也要跟著思路走，越往后看著自己的站點(diǎn)越不順眼，沒(méi)有一點(diǎn)成就感。
①在人群中脫穎而出。許多開(kāi)發(fā)都喜歡搬運(yùn)其它站點(diǎn)頁(yè)面，很容易看出它不是自己設(shè)計(jì)的。如果個(gè)人網(wǎng)站的目的是展示你的能力，那么使用模板可能會(huì)降低別人對(duì)你的肯定，自己設(shè)計(jì)的獨(dú)特風(fēng)格，讓你站點(diǎn)在眾多的站點(diǎn)中脫潁而出。
②練習(xí)技巧。設(shè)計(jì)它會(huì)幫助你練習(xí)設(shè)計(jì)原則，工具，HTML和CSS。你將更容易開(kāi)發(fā)用戶界面并將其引入網(wǎng)絡(luò)。設(shè)計(jì)出獨(dú)特且符合現(xiàn)代潮流的個(gè)人站點(diǎn)。
以前接私活的時(shí)侯，不會(huì)設(shè)計(jì)頁(yè)面，搬運(yùn)其它站點(diǎn)頁(yè)面，導(dǎo)致自己修改圖片和部分頁(yè)面的時(shí)候，不會(huì)使用工具，設(shè)計(jì)出來(lái)的頁(yè)面死板不靈活，客戶不滿意，自己看了也覺(jué)得很普通，沒(méi)有給你心意的感覺(jué)。
③更好的應(yīng)用程序性能。你的網(wǎng)站將是輕量級(jí)的，并且使用自定義CSS會(huì)具有更好的性能。如果要包括U庫(kù)或模板，則它可能包含大量代碼，以涵蓋您未使用的各種可能的自定義。如果未使用的代碼發(fā)送給用戶，則會(huì)對(duì)你網(wǎng)站的性能產(chǎn)生負(fù)面影響。加載慢，打開(kāi)網(wǎng)頁(yè)慢，被很多人不接受。
④發(fā)展職業(yè)技能。在Wb開(kāi)發(fā)角色中，你可能不必從頭開(kāi)始實(shí)現(xiàn)完整的網(wǎng)站設(shè)計(jì)，但是你應(yīng)該能夠制作與現(xiàn)代設(shè)計(jì)一致的外觀精美的界面。成為“全棧開(kāi)發(fā)人員”通常意味著精通后端語(yǔ)言或前端JavaScript框架，同時(shí)能夠熟悉設(shè)計(jì)，產(chǎn)品方面的知識(shí)。全棧開(kāi)發(fā)人員應(yīng)具有些基本的設(shè)計(jì)知識(shí)，并能夠?yàn)橛脩籼峁┮恢碌捏w驗(yàn)。當(dāng)然從中學(xué)習(xí)到很多的技能知識(shí)，這是毋雨置疑的。
⑤可能會(huì)很有趣。創(chuàng)造出令自己感到驕做的東西是一種有趣的經(jīng)歷。如果您花一些時(shí)間練習(xí)它，琢磨它，打迄礎(chǔ)廂自君胸乘學(xué)矯錄更好，生活中發(fā)現(xiàn)美是一件很美好的事，但我覺(jué)得創(chuàng)造美更讓人覺(jué)得驕傲。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-489681.html
五、精彩推薦
看到這里了就 【點(diǎn)贊，好評(píng)，收藏】 三連 支持下吧，你的支持是我創(chuàng)作的動(dòng)力。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-489681.html
到了這里，關(guān)于制作一個(gè)簡(jiǎn)單HTML電影網(wǎng)頁(yè)設(shè)計(jì)（HTML+CSS）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
