? 【作者主頁——獲取更多優質源碼】
? 【web前端期末大作業——畢設項目精品實戰案例(1000套)】
文章目錄
一、網頁介紹
1 網頁簡介：此作品為學生個人主頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。
2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。
3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設計了Logo（源文件）所需的知識點。
一、網頁效果
二、代碼展示 1.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>小米商城 - 小米CC9、小米MIX 3、Redmi K20，小米電視官方網站title>
<link rel="stylesheet" href="css/index.css">
head>
<body>
<nav>
<div class="nav-middle">
<div>
<a href="#">小米商城a>
<a href="#">MIUIa>
<a href="">IoTa>
<a href="#">云服務a>
<a href="#">金融a>
<a href="#">有品a>
<a href="">小愛開放平臺a>
<a href="javascript：;">企業團購a>
<a href="#">資質證照a>
<a href="#">協議規則a>
<a href="#">
下載app
<span class="hint">
<span class="triangle">span>
<span class="download">
<img src="picture/01.png" alt="">
<p>小米商城APPp>
span>
span>
a>
<a href="#">Select Locationa>
div>
<div>
<a href="javascript：;">登錄a>
<a href="#">注冊a>
<a href="#">消息通知a>
<a href="#" class="special">
購物車（0）
<span class="shops">購物車中還沒有商品，趕緊選購吧！span>
a>
div>
<div>
div>div>nav>
<div class="head">
<div class="head-middle">
<a href="#" class="mi-home" title="小米官網">a>
<ul class="title">
<li>
<a>小米手機a>
<div class="title-goods">
<ul>
<li>
<img src="picture/011.png" alt="">
<div class="titile-goods-price">
<span>小米CC9span>
<p>1799元p>
div>
li>
<li>
<img src="picture/02.png" alt="">
<div class="titile-goods-price">
<span>小米CC9espan>
<p>1299元p>
div>
li>
<li>
<img src="picture/03.png" alt="">
<div class="titile-goods-price">
<span>小米CC9 美圖定制版span>
<p>2599元p>
div>
li>
<li>
<img src="picture/04.png" alt="">
<div class="titile-goods-price">
<span>小米9span>
<p>2599元p>
div>
li>
<li>
<img src="picture/05.png" alt="">
<div class="titile-goods-price">
<span>小米MIX 3span>
<p>2599元p>
div>
li>
<li>
<img src="picture/06.webp" alt="">
<div class="titile-goods-price">
<span>小米MIX 2Sspan>
<p>1799元p>
div>
li>
ul>
div>
li>
<li class="copy"><a>Redmi 紅米a>li>
<li class="copy"><a>電視a>li>
<li class="copy"><a>筆記本a>li>
<li class="copy"><a>家電a>li>
<li class="copy"><a>路由器a>li>
<li class="copy"><a>智能硬件a>li>
<li><a>服務a>li>
<li><a>社區a>li>
ul>
<span class="text-placeholder">
<span>小米9span>
<span>小米9 SEspan>
span>
<div class="search">div>
<input type="text">
<div class="input-items">
<p><a href="#">小米9a>p>
<p><a href="#">Redmi k20 proa>p>
<p><a href="#">Remi k20a>p>
<p><a href="#">Redmi Note 7 Proa>p>
<p><a href="#">Remi note 7a>p>
<p><a href="#">小米電視4ca>p>
<p><a href="#">電視32英寸a>p>
<p><a href="#">筆記本poa>p>
<p><a href="#">小愛音箱a>p>
<p><a href="#">凈水器a>p>
div>
div>
div>
div>
html>
2.CSS樣式代碼
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "Helvetica Neue",
Helvetica,
Arial,
"Microsoft Yahei",
"Hiragino Sans GB",
"Heiti SC",
"WenQuanYi Micro Hei",
sans-serif;
}
nav {
width: 100%;
height: 40px;
background: #333;
}
.nav-middle {
width: 1226px;
height: 100%;
margin: 0 auto;
}
.nav-middle div {
/* width: 1226px; */
float: right;
/* margin-right: 60px; */
}
.nav-middle div:first-child {
float: left;
/* margin-left: 52px; */
}
nav div>a {
color: #b0b0b0;
font-family: Helvetica;
font-size: 12px;
line-height: 40px;
padding: 0 8px;
}
nav div>a:hover {
color: white;
}
.nav-middle div:first-child a:nth-last-child(2) {
position: relative;
display: inline-block;
}
.nav-middle div:first-child a:nth-last-child(2):hover .hint {
visibility: visible;
}
.hint {
position: absolute;
text-align: center;
line-height: 12px;
left: -35px;
top: 16px;
visibility: hidden;
z-index: 100;
/* background: white; */
}
三、個人總結
一套合格的網頁應該包含(具體可根據個人要求而定)
頁面分為頁頭、菜單導航欄（最好可下拉）、中間內容板塊、頁腳四大部分；所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成；頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；菜單美觀、醒目，二級菜單可正常彈出與跳轉；要有JS特效，如定時切換和手動切換圖片新聞；頁面中有多媒體元素，如gif、視頻、音樂，表單技術的使用；頁面清爽、美觀、大方用dw制作個人簡介網頁，不雷同。網站前端程序不僅要能夠把用戶要求的內容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。 四、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容用dw制作個人簡介網頁，請 “點贊” “??評論” “收藏” 一鍵三連哦！
2.??【關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.以上內容技術相關問題歡迎一起交流學習