? 【作者主頁——獲取更多優(yōu)質(zhì)源碼】
? 【web前端期末大作業(yè)——畢設項目精品實戰(zhàn)案例(1000套)】
文章目錄
一、網(wǎng)頁介紹
1 網(wǎng)頁簡介：此作品為學生個人主頁網(wǎng)頁設計題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學生網(wǎng)頁設計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明簡單個人靜態(tài)HTML網(wǎng)頁設計作品 基于HTML+CSS+Javascript仿小，代碼為簡單學生水平, 非常適合初學者學習使用。
2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。
3.知識應用：技術(shù)方面主要應用了網(wǎng)頁知識中的: Div+CSS、鼠標滑過特效、、導航欄效果、、表單、二級三級頁面等，視頻、 音頻元素 、，同時設計了Logo（源文件）所需的知識點。
一、網(wǎng)頁效果
二、代碼展示 1.HTML結(jié)構(gòu)代碼
代碼如下（示例）：以下僅展示部分代碼供參考~
<html>
<head>
<meta charset="utf-8">
<title>小米首頁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="#">云服務a>li>
<li><a href="#">小米移動版a>li>
<li><a href="#">問題反饋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">注冊a>li>
<li class="buyCar">
<a class="i_car" href="登錄">購物車（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="#">小米手機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{:25%;}
.m-slide-contain.m-s5 .m-slide-item{width:20%;}
.m-slide-contain.m-s10 .m-slide-item{width:10%;}
三、個人總結(jié)
一套合格的網(wǎng)頁應該包含(具體可根據(jù)個人要求而定)
頁面分為頁頭、菜單導航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分；所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成；頁面樣式風格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術(shù)；菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)；要有JS特效，如定時切換和手動切換圖片新聞；頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用；頁面清爽、美觀、大方，不雷同。網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。 四、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “點贊” “??評論” “收藏” 一鍵三連哦！
2.??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！
3.以上內(nèi)容技術(shù)相關(guān)問題歡迎一起交流學習
免責聲明：本文系轉(zhuǎn)載自其它媒體，版權(quán)歸原作者所有；旨在傳遞信息，不代表本站的觀點、立場和對其真實性負責。如需轉(zhuǎn)載，請聯(lián)系原作者。如果來源標注有誤或侵犯了您的合法權(quán)益等其他原因不想在本站發(fā)布，來信即刪。
