大一學(xué)生《Web編程基礎(chǔ)》期末網(wǎng)頁制作 HTML+CSS+JavaScript

? 【作者主頁——獲取更多優(yōu)質(zhì)源碼】

? 【web前端期末大作業(yè)——畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例(1000套)】

文章目錄

一、網(wǎng)頁介紹

1 網(wǎng)頁簡介：此作品為學(xué)生個(gè)人主頁網(wǎng)頁設(shè)計(jì)題材網(wǎng)站制作，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)源碼，這是一個(gè)不錯(cuò)的網(wǎng)頁制作，畫面精明，代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。

2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、、、、Text 、++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。

3.知識(shí)應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識(shí)中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、、表單、二級三級頁面等，視頻、音頻元素、Flash，同時(shí)設(shè)計(jì)了Logo（源文件）所需的知識(shí)點(diǎn)。

一、網(wǎng)頁效果

二、代碼展示 1.HTML代碼結(jié)構(gòu)

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



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>你們知道這片海洋的盡頭，有著世界最珍貴的寶物嗎？而且得到它的人就可以成為海賊王，是不是讓人熱血沸騰？前所未有的冒險(xiǎn)正等著我們！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>這世界，沒錯(cuò)！一個(gè)追求自由任憑選擇的世界，就在每個(gè)人的眼前無限地延伸。如果我們的夢想可以引導(dǎo)你的方向的話，就去追尋吧，在名為信念的旗幟下！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>世代傳承的意志、時(shí)代的變遷、人們的夢。這些都是阻擋不住的，只要人們繼續(xù)追求自由的答案，這一切的一切都將永不停止。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>財(cái)富、名聲、勢力－－－擁有全世界財(cái)富的海賊王哥爾羅杰，他在臨刑前的一句話，讓人們趨之若鶩、奔向大海！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;
}

三、個(gè)人總結(jié)
一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個(gè)人要求而定)
頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分；所有頁面相互超鏈接，可到三級頁面，有5-10個(gè)頁面組成；頁面樣式風(fēng)格統(tǒng)一布局顯示正常網(wǎng)站制作，不錯(cuò)亂，使用Div+Css技術(shù)；菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)；要有JS特效，如定時(shí)切換和手動(dòng)切換圖片新聞；頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用；頁面清爽、美觀、大方，不雷同。網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。  四、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “點(diǎn)贊” “??評論” “收藏” 一鍵三連哦！
2.??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問題歡迎一起交流學(xué)習(xí)


         在線咨詢 
         上一篇：H5模板網(wǎng)站【H5邀請函模板】 

          下一篇：深圳網(wǎng)站建設(shè)的流程和基本要素


      
        
          您的項(xiàng)目需求
          
   
    
    
    
    
    
    
    
    
  

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
 
  
		推薦閱讀
		 		
					網(wǎng)站排名優(yōu)化的原理是什么？
						SEO對網(wǎng)站的影響到底有多大
						遼寧本溪市網(wǎng)站排名優(yōu)化推廣202...
						分析百度更新收錄大減原因
						網(wǎng)站制作 營口建站方案
						網(wǎng)站搜索引擎優(yōu)化的六大重要環(huán)節(jié)
						視頻搜索推廣的經(jīng)歷
						搜索引擎優(yōu)化的方法有哪些？
						seo搜索引擎優(yōu)化總結(jié)（搜索引擎...
						網(wǎng)站建設(shè) 數(shù)字化讓鄉(xiāng)村文化煥...
						關(guān)鍵詞排名我們?nèi)绾尾拍軆?yōu)化到首頁
						?谷歌搜索引擎優(yōu)化206個(gè)排名因...

整合營銷服務(wù)商

大一學(xué)生《Web編程基礎(chǔ)》期末網(wǎng)頁制作 HTML+CSS+JavaScript

您的項(xiàng)目需求