? 【作者主頁——獲取更多優質源碼】
? 【web前端期末大作業——畢設項目精品實戰案例(1000套)】
文章目錄
一、網頁介紹
1 網頁簡介：此作品為學生個人主頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。
2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。
3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設計了Logo（源文件）所需的知識點。
一、網頁效果
二、代碼展示 1.HTML代碼結構
代碼如下（示例）：以下僅展示部分代碼供參考~
DOCTYPE html>
<html lang="zh">
<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">
<link rel="stylesheet" href="css/style.css">
<script language="JavaScript" src="js/iconfont.js">script>
<title>ONE PIECEtitle>
head>
<body>
<header>
<div class="navbar clearfix layout">
<a href="#" class="logo">ONE PIECEa>
<ul class="nav">
<li><a href="">Sayinga>li>
<li><a href="1.html">Introa>li>
<li><a href="2.html">Four emperora>li>
<li><a href="3.html">Teama>li>
<li><a href="4.html">Contacta>li>
ul>
div>
<div class="introduce layout">
<h1>Welcome to the new worldh1>
<h2>「我是要成為海賊王的男人」h2>
<a class="button" href="#Saying">START YOUR JOURNEYa>
div>
header>
<main class="layout">
<section id="Saying">
<h2>Sayingh2>
<p>你們知道這片海洋的盡頭，有著世界最珍貴的寶物嗎？而且得到它的人就可以成為海賊王，是不是讓人熱血沸騰？前所未有的冒險正等著我們！p>
<ul class="clearfix">
<li>
<span class="iconfont icon-fon1">span>
<h3>Title Languageh3>
<p>這世界，沒錯！一個追求自由任憑選擇的世界，就在每個人的眼前無限地延伸。如果我們的夢想可以引導你的方向的話，就去追尋吧，在名為信念的旗幟下！p>
li>
<li>
<span class="iconfont icon-fon2">span>
<h3>Title Languageh3>
<p>世代傳承的意志、時代的變遷、人們的夢。這些都是阻擋不住的，只要人們繼續追求自由的答案，這一切的一切都將永不停止。p>
li>
<li>
<span class="iconfont icon-fon3">span>
<h3>Title Languageh3>
<p>財富、名聲、勢力－－－擁有全世界財富的海賊王哥爾羅杰，他在臨刑前的一句話，讓人們趨之若鶩、奔向大海！p>
li>
ul>
section>
main>
<footer class="layout">
<p>Copyright ? Your Website 2021p>
<div class="end">
<a href="#"> Privacy Policya>
<a href="#"> Terms of Usea>
div>
footer>
body>
html>
2.CSS樣式代碼
/*reset*/
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family:PilGi, "Imprint MT Shadow","Brush Script MT";
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/*reset*/
.clearfix::after{
content: ' ';
display: block;
clear: both;
}
.layout{
width: 1100px;
margin: 0 auto;
}
.button{
font-size: 20px;
color: #fff;
background: #f7ba3e;
padding: 15px 25px;
display: inline-block;
border-radius: 5px;
}
.button:hover{
background-color: #fdc42e;
}
body,html{
height: 100%;
}
body{
font:14px/1.5 "微軟雅黑";
background: #F7F7F7;
color: #444;
}
header{
height: 100%;
min-heigt:800px;
background: #000 url("../image/bg.png") center center no-repeat;
background-size: cover;
position: relative;
z-index: 2;
}
header::before{
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.3);
z-index: -1;
}
header .logo{
float: left;
color: #f7ba3e;
font-size: 32px;
margin-top: 10px;
}
header .nav{
float: right;
}
header .nav > li{
float: left;
margin: 10px;
}
header .nav > li > a{
display: block;
padding: 5px;
border-radius: 4px;
color: #fff;
font-size: 16px;
}
header .nav > li > a:hover{
background: #f7ba3e;
}
header .introduce{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
color: #fff;
}
header .introduce > h1{
font-size: 32px;
}
header .introduce > h2{
font-size: 50px;
margin-top: 20px;
}
header .introduce .button{
margin-top: 20px;
}
section{
margin-top: 100px;
text-align: center;
background-color: #F7F7F7;
}
section:first-of-type{
/*background-color: #FFF;*/
box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.1);
}
section > h2{
font-size: 40px;
}
section > p{
margin-top: 10px;
margin-bottom: 50px;
}
section > ul .iconfont{
font-size: 60px;
}
section > ul > li{
width: 33.33%;
float: left;
padding: 10px 20px;
}
section > ul p{
margin-top: 10px;
}
section .family figure{
width: calc(33.33% - 20px);
margin: 10px;
height: 400px;
float: left;
background-color: #fff;
box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.3);
border-radius: 20px;
}
section .family a{
position: relative;
display: block;
height: 330px;
}
section .family img{
width: 100%;
height: 100%;
border-top-left-radius:20px ;
border-top-right-radius:20px ;
}
section .family figcaption{
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
section .family p{
color: #666;
margin-top: 5px;
font-style: italic;
}
section .family a:hover::before {
content: '?';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(253,208,72,0.8);
color: #fff;
font-size: 100px;
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius:20px;
border-top-right-radius:20px;
}
.describe{
display: block;
margin-top: 50px;
text-align: center;
border-radius: 20px;
}
.down{
margin: 10px auto;
list-style: none;
display: flex;
padding-left: 0;
flex-direction: column;
/*flex-wrap: wrap;*/
position: relative;
z-index: 99;
}
.down:after{
content: ' ';
display: block;
height: calc(100% - 200px);
width: 0;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
border:1px solid #ccc;
}
.down > li > span{
box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.1);
background-color: #fdc42e;
border: 6px solid #eee;
width:150px;
height: 150px;
color: #FFFFFF;
border-radius: 50%;
display: block;
float:left;
position:relative;
right:50%;
}
.down > li{
display: block;
width: 150px;
height: 200px;
float:left;
position:relative;
left:50%;
}
.down > li img{
height: 100%;
width: 100%;
border-radius: 50%;
display: block;
}
.matter{
width: 300px;
height: 100px;
float:left;
position:relative;
top:-50%;
right:-90%;
font-size: 18px;
}
.matter-left{
float:right;
position:relative;
top:-50%;
left:-180%;
}
.matter > p{
color: #999;
font-style: oblique;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:4;
}
.matter > h4,
.matter > p{
float:left;
margin: 0;
text-align: left;
}
.matter-left > h4,
.matter-left > p{
float:right;
margin: 0;
}
section .group figure{
width: calc(33.33% - 60px);
margin: 30px;
height: 300px;
float: left;
background-color: #fff;
box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.3);
border-radius: 50%;
border: 5px solid #fff;
}
section .group p{
position: relative;
display: block;
height: 100%;
}
section .group img{
width: 100%;
height: 100%;
border-radius: 50%;
}
section .group figcaption{
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
.icon:hover{
background: #fdc42e;
}
.icon {
width: 3em;
height: 3em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
margin:10px;
background: #222;
border-radius: 50%;
}
section .p{
font-style: inherit;
width: 70%;
margin: 100px auto;
}
.contact{
width: 100%;
height: 400px;
background: #fff url("../image/plat.jpg") no-repeat center center;
background-size: cover;
box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.1);
font-size: 20px;
}
.contact .private,
.email,
.cellphone{
text-align: left;
width: 45%;
}
.contact .message{
text-align: right;
display: inline-block;
width: 45%;
float: right;
}
.contact .message textarea{
margin-top: 20px;
width: 100%;
height: 180px;
font-size: 20px;
}
input[type="text"],
input[type="email"],
input[type="phone" ]{
height: 50px;
width: 100%;
margin-top: 20px;
border-radius: 5px;
background: #F7F7F7;
font-size: 20px;
}
.submit{
display: inline-block;
height: 50px;
width: 200px;
margin-top: 50px;
}
.submit > input[type="submit"]{
background: #fdd048;
width: 100%;
height: 100%;
border-radius: 10px;
border: 1px solid darkgoldenrod;
color: #fff;
font-size: 20px;
}
.submit > input[type="submit"]:hover{
background: #fdc42e;
}
footer{
height: 100px;
}
footer p{
margin-top: 30px;
float: left;
}
footer .end{
float: right;
margin-top: 30px;
}
footer .end a{
color: #fdc42e;
}
footer a:hover{
text-decoration: underline;
}
三、個人總結
一套合格的網頁應該包含(具體可根據個人要求而定)
頁面分為頁頭、菜單導航欄（最好可下拉）、中間內容板塊、頁腳四大部分；所有頁面相互超鏈接軟件設計基本方法，可到三級頁面，有5-10個頁面組成；頁面樣式風格統一布局顯示正常，不錯亂軟件設計基本方法，使用Div+Css技術；菜單美觀、醒目，二級菜單可正常彈出與跳轉；要有JS特效，如定時切換和手動切換圖片新聞；頁面中有多媒體元素，如gif、視頻、音樂，表單技術的使用；頁面清爽、美觀、大方，不雷同。網站前端程序不僅要能夠把用戶要求的內容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。 四、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “??評論” “收藏” 一鍵三連哦！
2.??【關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.以上內容技術相關問題歡迎一起交流學習