常見網頁設計作業題材有 個人、 美食、 公司、 學校、 旅遊、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 服裝、 體育、 化妝品、 物流、 環保、 書籍、 婚紗、 遊戲、 節日、 戒煙、 電影、 攝影、 文化、 家鄉、 鮮花、 禮品、 汽車、 其他等網頁設計題目, A+水準作業, 可滿足大學生網頁大作業網頁設計需求都能滿足你的需求。原始HTML+CSS+JS頁面設計, web大學生網頁設計作業源碼，畫面精明，排版整潔，内容豐富，主題鮮明，非常适合初學者學習使用。
文章目錄🌰
- 一、網頁介紹📖
- 一、網頁效果🌌
- 二、代碼展示😈
- 1.HTML結構代碼 🧱
- 2.CSS樣式代碼 🏠
- 三、個人總結😊
- 四、更多幹貨🚀
一、網頁介紹📖
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">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title>無标題文檔</title>
</head>
<body>
<div class="top">
<div class="nav">
<div class="logo"><a href="#"><img src="images/logo.jpg" width="116" height="42"></a></div>
<ul>
<li><a href="index.html">oppo商城</a></li>
<li><a href="index -1.html">Find 系列</a></li>
<li><a href="index -2.html">Reno 系列 </a></li>
<li><a href="index -3.html">R 系列 </a></li>
<li><a href="index -4.html">A 系列 </a></li>
<li><a href="index -5.html">K 系列</a></li></ul></div><div class="clearit"></div>
</div>
<div class="xa">
<h1>Find 系列</h1>
<ul><li><a href="#"><img src="images/a4.jpg" width="150" height="204"><br><br/>Find X </a></li>
<li style=" margin-left:20px;"><a href="#"><img src="images/a4.jpg" width="150" height="204"><br><br/>Find X 超級閃充版</a></li>
<li style=" margin-left:20px;"><a href="#"><img src="images/a5.jpg" width="150" height="204"><br><br/> Find X 蘭博基尼版</a></li></ul>
</div><div class="clearit"></div>
<div class="foot">OPPO手機商城</div>
</body>
</html> 2.CSS樣式代碼 🏠
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body {
font-family: "OPPOFont-Regular W", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial";
font-size: 12px;
color: #000000;
line-height: 20px;
text-align: left;
background: #f8f8f8
}
td, th {
font-family: "宋體";
font-size: 12px;
color: #000000;
}
a {
color: #000000;
}
A:link {
TEXT-DECORATION: none;
}
A:visited {
TEXT-DECORATION: none;
}
ul, li {
list-style-type: none;
}
.clearit {
clear: both;
}
.top {
width: 100%;
height: 718px;
background: url(../images/banner.jpg);
}
.nav {
width: 1200px;
height: 100px;
margin: 0 auto;
}
.logo {
width: 200px;
float: left;
}
.logo img {
margin-top: 30px;
margin-left: 20px
}
.nav ul {
width: 1000px;
float: left;
}
.nav li {
width: 166.66px;
float: left;
text-align: center;
line-height: 100px
}
.nav a {
font-size: 14px;
font-weight: bold;
color: #FFF;
}
.nav A:hover {
color: #999;
}
.xia {
width: 1200px;
height: 596px;
background: url(../images/t1.jpg);
margin: 0 auto;
margin-top: 30px;
}
.xia p {
width: 550px;
padding-left: 50px;
padding-right: 50px;
text-align: center;
letter-spacing: 2px;
}
.yi {
padding-top: 200px;
font-size: 24px;
font-weight: 600;
color: #333
}
.er {
margin-top: 40px;
font-size: 40px;
font-weight: 600;
}
.san {
margin-top: 80px;
font-size: 24px;
font-weight: 600;
}
.si {
width: 150px;
height: 40px;
background: #05b570;
margin-top: 30px;
border-radius: 30px;
margin-left: 250px;
text-align: center;
line-height: 40px;
}
.si a {
color: #FFF;
font-size: 16px;
font-weight: 600;
width: 150px;
height: 40px;
border-radius: 30px;
display: block
}
.si A:hover {
background: #059157
}
.xi {
width: 1200px;
height: 596px;
background: url(../images/t2.jpg);
margin: 0 auto;
margin-top: 30px;
}
.xi p {
width: 550px;
padding-left: 50px;
padding-right: 50px;
text-align: center;
letter-spacing: 2px;
}
.xa {
width: 1200px;
margin: 0 auto;
margin-top: 10px;
}
.xa li {
width: 326px;
padding: 30px;
float: left;
margin-top: 20px;
background: #FFF;
text-align: center;
line-height: 30px;
}
.xa li img {
margin-top: 30px;
}
.xa a {
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
color: #333
}
.xa span {
font-size: 16px;
color: #666;
}
.xa samp {
color: #666;
}
.foot {
width: 100%;
height: 70px;
background: #FFF;
margin-top: 40px;
text-align: center;
line-height: 70px;
font-size: 16px;
font-weight: bold;
}
.xa h1 {
text-align: center;
margin-top: 50px;
margin-bottom: 20px;
} 三、個人總結😊
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分；
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成；
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉；
- 要有JS特效，如定時切換和手動切換圖檔新聞；
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用；
- 頁面清爽、美觀、大方，不雷同。
- 網站前端程式不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。