HTML執行個體網頁代碼, 本執行個體适合于初學HTML的同學。該執行個體裡面有設定了css的樣式設定，有div的樣式格局，這個執行個體比較全面，有助于同學的學習,本文将介紹如何通過從頭開始設計個人網站并将其轉換為代碼的過程來實踐設計。
(文章目錄)
一、網頁介紹
1 網頁簡介：此作品為學生個人首頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水準, 非常适合初學者學習使用。
2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟體進行運作及修改編輯等操作）。
3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、滑鼠滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視訊、 音頻元素 、Flash，同時設計了Logo（源檔案）所需的知識點。
一、網頁效果
二、代碼展示
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>電影網站</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>
<!--頭部開始 -->
<header class="header">
<div class="container">
<div class="header_area">
<div class="logo">
<a rel="nofollow" href="index.html">
<img src="picture/logo.png" alt="logo"/>
</a>
</div>
<div class="meau">
<ul>
<li>
<a rel="nofollow" class="active" href="index.html">首頁</a>
</li>
<li>
<a rel="nofollow" href="movies.html">電影</a>
</li>
<li>
<a rel="nofollow" href="celebrities.html">明星</a>
</li>
<li>
<a rel="nofollow" href="hot.html">熱點</a>
</li>
<li>
<a rel="nofollow" href="news.html">新聞</a>
</li>
<li style="width: 120px;">
<a rel="nofollow" href="###" class="theme-btn">
<i class="icofont icofont-ticket"></i>
訂票
</a>
</li>
</ul>
</div>
</div>
</div>
<!--頭部結束-->
</header>
<!--内容部分開始-->
<section id="content">
<!--banner開始-->
<div class="banner">
<ul class="list">
<li class="on"><a rel="nofollow" href="#"><img src="picture/b1.jpg" alt="" /></a></li>
<li><a rel="nofollow" href="#"><img src="picture/b2.jpg" alt="" /></a></li>
<li><a rel="nofollow" href="#"><img src="picture/b3.jpg" alt="" /></a></li>
<li><a rel="nofollow" href="#"><img src="picture/b4.jpg" alt="" /></a></li>
<li><a rel="nofollow" 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 rel="nofollow" href="javascript:;" class="arrow left"><</a>
<a rel="nofollow" href="javascript:;" class="arrow right">></a>
</div>
<!--近期熱播-->
<div class="con_area">
<div class="container">
<div class="recent_con">
<div class="con_top">
<i class="icofont icofont-movie" ></i>
近期熱播
<a rel="nofollow" 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>
<!--經典電影-->
<div class="con_area">
<div class="container">
<div class="jd_con">
<div class="con_top">
<i class="icofont icofont-film" ></i>
經典電影
<a rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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">
<i class="icofont icofont-coffee-cup" ></i>
最新電影
<a rel="nofollow" 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>
2017
</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 rel="nofollow" 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>
2017
</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 rel="nofollow" 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>
2017
</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 rel="nofollow" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--end start-->
<footer id="end">
<div class="container">
<span class="company">
北京時代國際影業有限公司
</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;
}
/*詳情頁标題*/
.breadcrumb-area-content h2{
margin-top: 30px;
}
三、個人總結
一套合格的網頁應該包含(具體可根據個人要求而定)
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分；
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成；
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉；
- 要有JS特效，如定時切換和手動切換圖檔新聞；
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用；
- 頁面清爽、美觀、大方，不雷同。
- 網站前端程式不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。
四、心得體會
許多開發人員認為攬長設計是一種天生的能力，而創造力是與生俱來的。但是設計是一項可以像其他任何東西一樣學習的技能。你不必天生就可以建立一個漂亮的網站的藝術家，這需要實踐，熟不知局限太大，自己想要的内容闆式也要跟着思路走，越往後看着自己的站點越不順眼，沒有一點成就感。
①在人群中脫穎而出。許多開發都喜歡搬運其它站點頁面，很容易看出它不是自己設計的。如果個人網站的目的是展示你的能力，那麼使用模闆可能會降低别人對你的肯定，自己設計的獨特風格，讓你站點在衆多的站點中脫颍而出。
②練習技巧。設計它會幫助你練習設計原則，工具，HTML和CSS。你将更容易開發使用者界面并将其引入網絡。設計出獨特且符合現代潮流的個人站點。
以前接私活的時侯，不會設計頁面，搬運其它站點頁面，導緻自己修改圖檔和部分頁面的時候，不會使用工具，設計出來的頁面死闆不靈活，客戶不滿意，自己看了也覺得很普通，沒有給你心意的感覺。
③更好的應用程式性能。你的網站将是輕量級的，并且使用自定義CSS會具有更好的性能。如果要包括U庫或模闆，則它可能包含大量代碼，以涵蓋您未使用的各種可能的自定義。如果未使用的代碼發送給使用者，則會對你網站的性能産生負面影響。加載慢，打開網頁慢，被很多人不接受。