国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 學(xué)生個(gè)人單頁面網(wǎng)頁作業(yè) 學(xué)生網(wǎng)頁設(shè)計(jì)成品 靜態(tài)HTML網(wǎng)頁單頁制作 dreamweaver網(wǎng)頁

學(xué)生個(gè)人單頁面網(wǎng)頁作業(yè) 學(xué)生網(wǎng)頁設(shè)計(jì)成品 靜態(tài)HTML網(wǎng)頁單頁制作 dreamweaver網(wǎng)頁

時(shí)間:2023-10-14 23:30:02 | 來源:網(wǎng)站運(yùn)營

時(shí)間:2023-10-14 23:30:02 來源:網(wǎng)站運(yùn)營

學(xué)生個(gè)人單頁面網(wǎng)頁作業(yè) 學(xué)生網(wǎng)頁設(shè)計(jì)成品 靜態(tài)HTML網(wǎng)頁單頁制作 dreamweaver網(wǎng)頁設(shè)計(jì)與制作代碼 web前端期末大作業(yè):
HTML實(shí)例網(wǎng)頁代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置,有div的樣式格局,這個(gè)實(shí)例比較全面,有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計(jì)。
@TOC

一、網(wǎng)頁介紹

1 網(wǎng)頁簡介:此作品為學(xué)生個(gè)人主頁網(wǎng)頁設(shè)計(jì)題材,學(xué)生個(gè)人單頁面網(wǎng)頁作業(yè) 學(xué)生網(wǎng)頁設(shè)計(jì)成品 靜態(tài)HTML網(wǎng)頁單頁制作 dreamweaver網(wǎng)頁設(shè)計(jì)與制作代碼 web前端期末大作業(yè)

2.網(wǎng)頁編輯:網(wǎng)頁作品代碼簡單,可使用任意HTML編輯軟件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作)。

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


一、網(wǎng)頁效果




在這里插入圖片描述
在這里插入圖片描述



二、代碼展示

1.HTML代碼

代碼如下(示例):以下僅展示部分代碼供參考,~

<!DOCTYPE html><html lang="en"><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"> <title>HERO</title> <link rel="icon" href="./font/marvel.png" type="image/x-icon" /> <link rel="stylesheet" href="./assets/reset.css"> <link rel="stylesheet" href="./assets/animate.css"> <link rel="stylesheet" href="./font/iconfont.css"> <link rel="stylesheet" href="./css/hero.css"></head><body> <div class="box"> <ul class="animated lightSpeedIn nav"> <li> <a href="hero.html"> <img src="./font/marvel.png" alt="logo"> </a> </li> <li id="li_btn"> <a href="hero.html"> HERO </a> <ul id="nav_two" class=" nav_two"> <li class="animated zoomIn " id="thor">Thor</li> <li class="animated zoomIn " id="hulk">Hulk</li> <li class="animated zoomIn " id="widow">Widow</li> </ul> </li> <li> <a href="film.html"> FILM </a> </li> </ul> <div class="con"> <div id="section" class="ironman animated rollIn"> <img src="./img/one.png" alt="鋼鐵俠" /> </div> <div class="thor animated bounceInRight"> <img src="./img/two.png" alt="雷神" /> </div> <div class="hulk animated bounceInLeft"> <img src="./img/three.png" alt="浩克" /> </div> <div class="widow animated zoomIn"> <img src="./img/four.png" alt="黑寡婦" /> </div> </div> <div class="back_top animated jackInTheBox" id="back_top"> <i class="iconfont icon-fanhuidingbu3"></i> </div> </div></body><script src="./js/jquery.min.js"></script><script src="./js/hero.js"></script></html>

2.CSS代碼

body { width: 100%; height: 100%; overflow-x: hidden; background-color: #0e100f;}body a { color: #fff; text-decoration: none;}body::-webkit-scrollbar { display: none;}body .nav { z-index: 999; width: 50%; display: flex; justify-content: space-evenly; position: absolute; top: 1.5%; font-weight: bolder;}body .nav > li { display: inline-block; width: 100px; height: 100px; line-height: 100px; text-align: center;}body .nav > li img { width: 50%;}body .nav > li:nth-child(1) { font-size: 25px;}body .nav > li:hover { cursor: pointer; font-size: 25px;}body .nav .nav_two { display: none; color: lightgray; font-size: 15px;}body .nav .nav_two li { height: 50px;}body .nav .nav_two li:hover { font-size: 20px;}body img { width: 100%;}body .box { width: 100%; color: #fff; position: relative;}body .box .back_top { display: none; cursor: pointer; position: fixed; right: 20px; top: 300px;}body .box .back_top .icon-fanhuidingbu3 { font-size: 50px;}body .box .con .hulk,body .box .con .thor,body .box .con .widow { display: none;}

三、個(gè)人總結(jié)

一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個(gè)人要求而定) 1. 頁面分為頁頭、菜單導(dǎo)航欄(最好可下拉)、中間內(nèi)容板塊、頁腳四大部分; 2. 所有頁面相互超鏈接,可到三級(jí)頁面,有5-10個(gè)頁面組成; 3. 頁面樣式風(fēng)格統(tǒng)一布局顯示正常,不錯(cuò)亂,使用Div+Css技術(shù); 4. 菜單美觀、醒目,二級(jí)菜單可正常彈出與跳轉(zhuǎn); 5. 要有JS特效,如定時(shí)切換和手動(dòng)切換圖片新聞; 6. 頁面中有多媒體元素,如gif、視頻、音樂,表單技術(shù)的使用; 7. 頁面清爽、美觀、大方,不雷同。
8. 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來,還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。



四、精彩推薦

看到這里了就 【點(diǎn)贊,好評(píng),收藏】 三連 支持下吧,你的支持是我創(chuàng)作的動(dòng)力。

關(guān)鍵詞:學(xué)生,靜態(tài),作業(yè),設(shè)計(jì),成品

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉