大一學生《Web編程基礎》期末網頁制作 HTML+CSS+JavaScript

? 【作者主頁——獲取更多優質源碼】

? 【web前端期末大作業——畢設項目精品實戰案例(1000套)】

文章目錄

一、網頁介紹

1 網頁簡介：此作品為學生個人主頁網頁設計題材網站制作，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。

2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、、、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。

3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、、表單、二級三級頁面等，視頻、音頻元素、Flash，同時設計了Logo（源文件）所需的知識點。

一、網頁效果

二、代碼展示 1.HTML代碼結構

代碼如下（示例）：以下僅展示部分代碼供參考~



language-html">DOCTYPE html> class="token tag"><html lang="zh"> class="token tag"><head> class="token tag"><meta charset="UTF-8"> class="token tag"><meta name="viewport" content="width=device-width, initial-scale=1.0"> class="token tag"><meta http-equiv="X-UA-Compatible" content="ie=edge"> class="token tag"><link rel="stylesheet" href="css/style.css"> class="token comment"> class="token tag"><script language="JavaScript" src="js/iconfont.js">script> class="token tag"><title>ONE PIECEtitle> class="token tag">head> class="token tag"><body> class="token tag"><header> class="token tag"><div class="navbar clearfix layout"> class="token tag"><a href="#" class="logo">ONE PIECEa> class="token tag"><ul class="nav"> class="token tag"><li><a href="">Sayinga>li> class="token tag"><li><a href="1.html">Introa>li> class="token tag"><li><a href="2.html">Four emperora>li> class="token tag"><li><a href="3.html">Teama>li> class="token tag"><li><a href="4.html">Contacta>li> class="token tag">ul> class="token tag">div> class="token tag"><div class="introduce layout"> class="token tag"><h1>Welcome to the new worldh1> class="token tag"><h2>「我是要成為海賊王的男人」h2> class="token tag"><a class="button" href="#Saying">START YOUR JOURNEYa> class="token tag">div> class="token tag">header> class="token tag"><main class="layout"> class="token tag"><section id="Saying"> class="token tag"><h2>Sayingh2> class="token tag"><p>你們知道這片海洋的盡頭，有著世界最珍貴的寶物嗎？而且得到它的人就可以成為海賊王，是不是讓人熱血沸騰？前所未有的冒險正等著我們！p> class="token tag"><ul class="clearfix"> class="token tag"><li> class="token tag"><span class="iconfont icon-fon1">span> class="token tag"><h3>Title Languageh3> class="token tag"><p>這世界，沒錯！一個追求自由任憑選擇的世界，就在每個人的眼前無限地延伸。如果我們的夢想可以引導你的方向的話，就去追尋吧，在名為信念的旗幟下！p> class="token tag">li> class="token tag"><li> class="token tag"><span class="iconfont icon-fon2">span> class="token tag"><h3>Title Languageh3> class="token tag"><p>世代傳承的意志、時代的變遷、人們的夢。這些都是阻擋不住的，只要人們繼續追求自由的答案，這一切的一切都將永不停止。p> class="token tag">li> class="token tag"><li> class="token tag"><span class="iconfont icon-fon3">span> class="token tag"><h3>Title Languageh3> class="token tag"><p>財富、名聲、勢力－－－擁有全世界財富的海賊王哥爾羅杰，他在臨刑前的一句話，讓人們趨之若鶩、奔向大海！p> class="token tag">li> class="token tag">ul> class="token tag">section> class="token tag">main> class="token tag"><footer class="layout"> class="token tag"><p>Copyright ? Your Website 2021p> class="token tag"><div class="end"> class="token tag"><a href="#"> Privacy Policya> class="token tag"><a href="#"> Terms of Usea> class="token tag">div> class="token tag">footer> class="token tag">body> class="token tag">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.以上內容技術相關問題歡迎一起交流學習


         在線咨詢 
         上一篇：H5模板網站【H5邀請函模板】 

          下一篇：深圳網站建設的流程和基本要素


      
        
          您的項目需求
          
   
    
    
    
    
    
    
    
    
  

*請認真填寫需求信息，我們會在24小時內與您取得聯系。
 
  
		推薦閱讀
		 		
					網站排名優化的原理是什么？
						SEO對網站的影響到底有多大
						遼寧本溪市網站排名優化推廣202...
						分析百度更新收錄大減原因
						網站制作 營口建站方案
						網站搜索引擎優化的六大重要環節
						視頻搜索推廣的經歷
						搜索引擎優化的方法有哪些？
						seo搜索引擎優化總結（搜索引擎...
						網站建設 數字化讓鄉村文化煥...
						關鍵詞排名我們如何才能優化到首頁
						?谷歌搜索引擎優化206個排名因...

整合營銷服務商

大一學生《Web編程基礎》期末網頁制作 HTML+CSS+JavaScript

您的項目需求