? 【作者主頁(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)單個(gè)人靜態(tài)HTML網(wǎng)頁(yè)設(shè)計(jì)作品 基于HTML+CSS+Javascript仿小，代碼為簡(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ò)特效、、導(dǎo)航欄效果、、表單、二級(jí)三級(jí)頁(yè)面等，視頻、 音頻元素 、，同時(shí)設(shè)計(jì)了Logo（源文件）所需的知識(shí)點(diǎn)。
一、網(wǎng)頁(yè)效果
二、代碼展示 1.HTML結(jié)構(gòu)代碼
代碼如下（示例）：以下僅展示部分代碼供參考~
<html>
<head>
<meta charset="utf-8">
<title>小米首頁(yè)title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/media_index.css">
<link rel="stylesheet" type="text/css" href="css/mod.css">
head>
<body>
<section>
<nav id="nav" class="site-topbar">
<div class="wraper">
<ul class="nav-left">
<li><a href="#">小米商城a>li>
<li><a href="#">MUIa>li>
<li><a href="#">米聊a>li>
<li><a href="#">游戲a>li>
<li><a href="#">多看閱讀a>li>
<li><a href="#">云服務(wù)a>li>
<li><a href="#">小米移動(dòng)版a>li>
<li><a href="#">問(wèn)題反饋a>li>
<li><a href="#">Select Regiona>li>
ul>
<ul class="nav-right">
<li><a href="./login.html">登錄a>li>
<li><a href="./reg.html">注冊(cè)a>li>
<li class="buyCar">
<a class="i_car" href="登錄">購(gòu)物車(chē)（0）a>
<div class="content">div>
li>
ul>
div>
nav>
<header id="header" class="site-header">
<div class="wraper">
<hgroup class="header-left">
<h1>小米h1>
<h2>h2>
hgroup>
<ul class="header-middle header-menu">
<li>
<a href="#">小米手機(jī)a>
<div class="content">
<ul class="goods-list">
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_prod1.jpg">
div>
<p class="name">小米Maxp>
<span class="price">1299元起span>
li>
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_prod1.jpg">
div>
<p class="name">小米Maxp>
<span class="price">1299元起span>
li>
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_prod1.jpg">
div>
<p class="name">小米Maxp>
<span class="price">1299元起span>
li>
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_prod1.jpg">
div>
<p class="name">小米Maxp>
<span class="price">1299元起span>
li>
ul>
div>
li>
<li>
<a href="#">紅米a>
<div class="content">
<ul class="goods-list">
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_red1.jpg">
div>
<p class="name">紅米Note 3p>
<span class="price">899元起span>
li>
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_red1.jpg">
div>
<p class="name">紅米Note 3p>
<span class="price">899元起span>
li>
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_red1.jpg">
div>
<p class="name">紅米Note 3p>
<span class="price">899元起span>
li>
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_red1.jpg">
div>
<p class="name">紅米Note 3p>
<span class="price">899元起span>
li>
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_red1.jpg">
div>
<p class="name">紅米Note 3p>
<span class="price">899元起span>
li>
ul>
div>
li>
<li>
<a href="#">平板 筆記本a>
<div class="content">
<ul class="goods-list">
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_pad1.jpg">
div>
<p class="name">小米平板2 64GBp>
<span class="price">1299元span>
li>
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_pad1.jpg">
div>
<p class="name">小米平板2 64GBp>
<span class="price">1299元span>
li>
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_pad1.jpg">
div>
<p class="name">小米平板2 64GBp>
<span class="price">1299元span>
li>
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_pad1.jpg">
div>
<p class="name">小米平板2 64GBp>
<span class="price">1299元span>
li>
<li class="item">
<div class="prod-img">
<img src="./images/index_drop_pad1.jpg">
div>
<p class="name">小米平板2 64GBp>
<span class="price">1299元span>
li>
ul>
div>
li>
div>
html>
2.CSS樣式代碼
.m-box{font-size:0px;}
.m-hd{font-size:20px;line-height: 20px;margin:42px 0px 20px 0;}
.m-hd::after{content:'';display: block;clear: both;}
.m-hdL{float:left;}
.m-hdR{float:right;font-size: 20px;}
.m-hd{}
.m-bd{}
.m-hdR .btns2 .active{color:#999;}
.m-hdR .btns2 a{display:block;float:left;width:36px;height:24px;border:solid #ccc 1px;text-align: center;line-height:24px;color:#ccc;}
.m-hdR .btns2 a:hover{color:#F87300;}
.m-box .span4,.m-box .span16{font-size:14px;display:inline-block;height:100%;vertical-align: top;}
.m-box .main-pic{height:100%;padding-bottom:0px;}
.m-box .main-pic img{width:100%;height:100%;}
.m-box .span4{width:19.1525%;}
.m-box .span16{width: 80.8475%;}
.m-box .span20{width: 100%;}
.m-box .m-cols{font-size:0px;}
.m-box .m-cols::after{content:'';display: block;overflow: hidden;}
.m-box .m-cols .col{float:left;font-size:14px;}
.m-box .m-col-3 .col{margin-left:1.6%;width:31.733333%;height:100%;}
.m-box .m-col-4 .col{margin-left:1.3333333%;width:24%;height:100%;}
.m-box .m-col-4 .col:first-child{margin-left:0;}
.span4 + .span16 .m-col-4{padding-left:1.33333%;}
.m-box .m-col-5 .col{margin-left:1.1613%;width:19.0709%;height:100%;}
.m-box .m-col-5 .col:first-child{margin-left:0;}
.m-slide{width:100%;}
.m-slide-contain{font-size:0px;height:100%; text-align: center;}
.m-slide-contain.m-s1{width:100%;}
.m-slide-contain.m-s2{width:200%;}
.m-slide-contain.m-s4{width:400%;}
.m-slide-contain.m-s5{width:500%;}
.m-slide-contain.m-s10{width:1000%;}
.m-slide-contain .m-slide-item{display: inline-block;vertical-align: top; font-size:12px;}
.m-slide-contain.m-s1 .m-slide-item{width:100%;}
.m-slide-contain.m-s2 .m-slide-item{width:50%;}
.m-slide-contain.m-s4 .m-slide-item{width:25%;}
.m-slide-contain.m-s5 .m-slide-item{width:20%;}
.m-slide-contain.m-s10 .m-slide-item{width:10%;}
三、個(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)站前端程序不僅要能夠把用戶(hù)要求的內(nèi)容呈現(xiàn)出來(lái)，還要滿足布局良好、界面美觀、配色優(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í)
免責(zé)聲明：本文系轉(zhuǎn)載自其它媒體，版權(quán)歸原作者所有；旨在傳遞信息，不代表本站的觀點(diǎn)、立場(chǎng)和對(duì)其真實(shí)性負(fù)責(zé)。如需轉(zhuǎn)載，請(qǐng)聯(lián)系原作者。如果來(lái)源標(biāo)注有誤或侵犯了您的合法權(quán)益等其他原因不想在本站發(fā)布，來(lái)信即刪。
