? 【作者主頁(yè)——獲取更多優(yōu)質(zhì)源碼】
? 【web前端期末大作業(yè)——畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例(1000套)】
文章目錄
一、網(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è)制作，畫(huà)面精明，代碼為簡(jiǎn)單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。
2.網(wǎng)頁(yè)編輯：網(wǎng)頁(yè)作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
3.知識(shí)應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁(yè)知識(shí)中的: Div+CSS、鼠標(biāo)滑過(guò)特效、Table、導(dǎo)航欄效果、、表單、二級(jí)三級(jí)頁(yè)面等，視頻、 音頻元素 、Flash，同時(shí)設(shè)計(jì)了Logo（源文件）所需的知識(shí)點(diǎn)。
一、網(wǎng)頁(yè)效果
二、代碼展示 1.HTML結(jié)構(gòu)代碼
代碼如下（示例）：以下僅展示部分代碼供參考~
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>華為-構(gòu)筑萬(wàn)物互聯(lián)的智能世界title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/top-nav.css">
<link rel="stylesheet" href="css/nav-con.css">
<link rel="stylesheet" href="css/slideshow.css">
<link rel="stylesheet" href="css/recommend.css">
<link rel="stylesheet" href="css/img-show.css">
<link rel="stylesheet" href="css/news-activity.css">
<link rel="stylesheet" href="css/link-btn.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/corner.css">
<link rel="stylesheet" href="http://www.ylcp.shop/files/files/1650896299792/font-awesome/css/all.css">
<link rel="stylesheet" href="css/iconfont1.css">
<script src="js/top-nav.js">script>
head>
<body>
<div class="top-nav">
<div class="top-bar">
<ul>
<li class="login">
<a href="login.html">
<i class="fas fa-user">i>
登錄
a>
li>
<li class="pull">
<i class="fas fa-globe">i>
<span>選擇區(qū)域/語(yǔ)言span>
<i class="fas fa-angle-down">i>
li>
<li class="pull">
<i class="fas fa-border-all">i>
<span>集團(tuán)網(wǎng)站span>
<i class="fas fa-angle-down">i>
li>
ul>
div>
<div class="net">
<ul class="brief">
<li class="title">
<i class="fas fa-chevron-right">i>
<span>集團(tuán)網(wǎng)站span>
li>
<li class="intro">
公司介紹、新聞動(dòng)態(tài)、展會(huì)活動(dòng)等信息
li>
ul>
<ul>
<li class="link">
<a href="javascript：;">
消費(fèi)者業(yè)務(wù)網(wǎng)站
<i class="fas fa-angle-right">i>
a>
li>
<li class="intro">
手機(jī)，PC和平板等智慧生活產(chǎn)品
li>
ul>
<ul>
<li class="link">
<a href="javascript：;">
企業(yè)業(yè)務(wù)網(wǎng)站
<i class="fas fa-angle-right">i>
a>
li>
<li class="intro">
企業(yè)商用產(chǎn)品、解決方案和云服務(wù)
li>
ul>
<ul>
<li class="link">
<a href="javascript：;">
運(yùn)營(yíng)商網(wǎng)絡(luò)業(yè)務(wù)網(wǎng)站
<i class="fas fa-angle-right">i>
a>
li>
<li class="intro">
運(yùn)營(yíng)商網(wǎng)絡(luò)解決方案、產(chǎn)品及服務(wù)
li>
ul>
<ul>
<li class="link">
<a href="javascript：;">
華為云網(wǎng)站
<i class="fas fa-angle-right">i>
a>
li>
<li class="intro">
華為云服務(wù)及解決方案
li>
ul>
div>
<div class="region">
<h3>選擇地區(qū)/語(yǔ)言h3>
<ul class="first">
<li>
<span>
Japan -
<a href="javascript：;">日本語(yǔ)a>
span>
li>
<li>
<span>
Myanmar -
<a href="javascript：;">??????a>
span>
li>
<li>
<span>
Spain -
<a href="javascript：;">Espa?ola>
span>
li>
<li>
<span>
United Kingdom -
<a href="javascript：;">Englisha>
span>
li>
<li>
<span>
Global-
<a href="javascript：;">Englisha>
span>
li>
ul>
<ul>
<li>
<span class="zhong">
<i class="fas fa-angle-right">i>
China -
<a href="javascript：;">簡(jiǎn)體中文a>
span>
li>
<li>
<span>
Kazakstan -
<a href="javascript：;">русскийa>
span>
li>
<li>
<span>
New Zealand -
<a href="javascript：;">Englisha>
span>
li>
<li>
<span>
Switzerland -
<a href="javascript：;">Englisha>
span>
li>
<li>
<span>
United States -
<a href="javascript：;">Englisha>
span>
li>
ul>
div>
div>
<div class="nav-con">
<div class="nav">
<a href="">
<img src="picture/huawei_logo.png">
a>
<ul class="center">
<li class="product">
<span>個(gè)人及家庭產(chǎn)品span>
<li>
<a href="javascript：;">隱私保護(hù)a>
li>
<li>
<a href="javascript：;">除名查詢a>
li>
ul>
div>
div>
<div class="corner">
<div class="to-serve">
<i class="iconfont">i>
div>
<div class="to-top">
<i class="fas fa-chevron-up">i>
div>
div>
body>
html>
2.CSS樣式代碼
.news-activity{
width: 85%;
margin: 0 auto;
overflow: hidden;
margin-bottom: 60px;
}
.exhibition1{
width: 31%;
overflow: hidden;
float: left;
height: 435px;
}
.exhibition2{
width: 31%;
height: 435px;
overflow: hidden;
float: left;
margin-left: 3.5%;
}
.exhi .tip{
width: 92px;
height: 32px;
background: #999999;
text-align: center;
line-height: 32px;
}
.exhi .tip span{
font-size: 14px;
color: #fff;
}
.exhi img{
width: 100%;
height: 170px;
transition: all 0.5s;
}
.exhi .message{
width: 100%;
background: #F8F8F7;
margin-top: -5px;
overflow: hidden;
line-height: 2;
}
.message h3{
margin-left: 25px;
margin-top: 30px;
color: #333333;
font-size: 16px;
}
.message .location{
margin-left: 25px;
color: #333333;
font-size: 14px;
margin-right: 20px;
}
.location i{
margin-right: 10px;
}
.message .date{
color: #333333;
font-size: 14px;
}
.date i{
margin-right: 10px;
}
.message p{
margin-left: 25px;
margin-top: 20px;
color: #333333;
font-size: 14px;
margin-bottom: 60px;
}
.exhi:hover img{
transform: scale(1.03);
}
.exhi:hover .message{
background: #F3F2F1;
}
.news-activity .news3{
width: 31%;
height: 432px;
overflow: auto;
float: right;
background: #F8F8F7;
position: relative;
}
.news3 .tip3{
width: 65px;
height: 32px;
background: #999999;
text-align: center;
line-height: 32px;
color: #fff;
font-size: 14px;
position: absolute;
top: 0;
}
.news3 ul{
margin-top: 62px;
margin-left: 30px;
margin-right: 30px;
line-height: 1.6;
}
.news3 ul li{
margin-bottom: 30px;
}
.news3 ul li p{
color: #333333;
font-size: 16px;
font-weight: bolder;
}
.news3 ul li span{
color: #666666;
font-size: 14px;
}
.news3 li a:hover p,
.news3 li a:hover span{
color: #F70000;
}
.news3 .fog{
width: 100%;
height: 60px;
position: absolute;
bottom: 0;
background: rgba(248, 248, 248, 0.9);
box-shadow: 0 20px 20px 30px rgba(248, 248, 248, 0.9);
}
/* 設(shè)置滾動(dòng)條樣式 */
.news3::-webkit-scrollbar{
width: 4px;
}
.news3::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.news3::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
三、個(gè)人總結(jié)
一套合格的網(wǎng)頁(yè)應(yīng)該包含(具體可根據(jù)個(gè)人要求而定)
頁(yè)面分為頁(yè)頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁(yè)腳四大部分；所有頁(yè)面相互超鏈接適合設(shè)計(jì)制作公司的網(wǎng)站asp遠(yuǎn)嗎，可到三級(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)適合設(shè)計(jì)制作公司的網(wǎng)站asp遠(yuǎn)嗎，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。 四、更多干貨
1.如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “點(diǎn)贊” “??評(píng)論” “收藏” 一鍵三連哦！
2.??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問(wèn)題歡迎一起交流學(xué)習(xí)