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