常見網(wǎng)頁設(shè)計作業(yè)題材有?個人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他?等網(wǎng)頁設(shè)計題目, A+水平作業(yè), 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計需求, 喜歡的可以下載!?
嗨，歡迎來到深巷積木青春的小店。這篇文章主要講解HTML5＋CSS3制作海綿寶寶網(wǎng)站，請一起學(xué)習(xí)吧。?
作品目錄
一、??網(wǎng)站介紹
二、??網(wǎng)站效果
??????????1.圖片演示
三、??網(wǎng)站代碼
?
二、??網(wǎng)站介紹
????????
??網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。
??網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時看到網(wǎng)站的效果。
??網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
??網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；
??網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件(如：??Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++??? 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作)。
其中：
(1)??html文件包含：其中index.html是首頁、其他html為二級頁面；
(2)?? css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
(3)?? js文件包含：js實(shí)現(xiàn)動態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等(個別網(wǎng)頁中運(yùn)用到j(luò)s代碼)。
三、??網(wǎng)站效果?
?四、??代碼展示
代碼說明：以下僅展示部分代碼供參考~
??HTML結(jié)構(gòu)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首頁</title>
<link rel="stylesheet" href="css/index.css">
<style>
</style>
</head>
<body>
<!-- header -->
<div class="header">
<div class="he">
<div class="he_1">
<img src="./images/logo.webp" alt="" height="60px">
</div>
<div class="he_2">
<ul>
<li class="active"><a href="index.html">首頁</a></li>
<li><a href="index01.html">角色介紹</a></li>
<li><a href="index02.html">作品介紹</a></li>
<li><a href="index03.html">精彩圖集</a></li>
<li><a href="index04.html">登陸</a></li>
<li><a href="index05.html">注冊</a></li>
</ul>
</div>
</div>
</div>
<div style="clear: both;"></div>
<!-- banner -->
<div class="banner">
<div class="he">
<img src="./images/banner.webp" alt="">
</div>
</div>
<!-- hm -->
<div class="hm">
<div class="he">
<div class="hm_1">
<h3>海-綿-寶-寶</h3>
</div>
<div class="hm_2">
<p>《海綿寶寶》（SpongeBob SquarePants）是一部由史蒂芬·海倫伯格原創(chuàng)，舍曼·科恩、沃特·杜赫、山姆·亨德森、保羅·蒂比特、沃爾特·道恩 [21] 等導(dǎo)演，湯姆·肯尼、比爾·法格巴克、羅杰·布帕斯等配音的美國喜劇動畫，于1999年7月17日在尼克國際兒童頻道開播。</p>
<p>央視少兒頻道從2006年1月29日大年初一晚20：00開始播出。 [24] </p>
<p>《海綿寶寶》的故事情節(jié)主要圍繞著主角海綿寶寶和他的好朋友派大星、鄰居章魚哥、上司蟹老板等生物展開，場景設(shè)定于太平洋海底，一座被稱為比奇堡的城市。2005年1月30日，該片榮獲第32屆安妮獎授予的“最佳TV動畫制作”獎 [1] 。</p>
<p>這部動畫除了固定描繪的卡通場景與人物之外，也會穿插一些真實(shí)的物件或人物：例如曾出演《海灘游俠》與《霹靂游俠》的大衛(wèi)·哈塞爾霍夫，以本人的身份出演了幾集。但海綿寶寶卡通的內(nèi)容基本上與海洋知識無關(guān)，甚至夸大到完全不合乎科學(xué)與常識，例如海底生火、海底沖澡等，劇集內(nèi)容也會時不時的嘲笑精致藝術(shù)和章魚哥的勞工權(quán)益想法。</p>
</div>
<div class="hm_3">
<ul>
<li>
<img src="./images/a1.webp" alt="">
</li>
<li>
<img src="./images/a2.webp" alt="">
</li>
<li>
<img src="./images/a3.jpeg" alt="">
</li>
<li>
<img src="./images/a4.jpg" alt="">
</li>
</ul>
</div>
</div>
</div>
<div style="clear: both;"></div>
<!-- zy -->
<div class="zy">
<div class="he">
<div class="hm_1">
<h3>主-要-角-色</h3>
</div>
<div class="zy_1">
<ul>
<li>
<img src="./images/b1.webp" alt="">
<h4>No.1海綿寶寶</h4>
</li>
<li>
<img src="./images/b2.webp" alt="">
<h4>No.2派大星</h4>
</li>
<li>
<img src="./images/b3.webp" alt="">
<h4>No.3章魚哥</h4>
</li>
<li>
<img src="./images/b4.webp" alt="">
<h4>No.4蟹老板</h4>
</li>
</ul>
</div>
</div>
</div>?
???CSS樣式代碼
* {
margin: 0;
padding: 0;
}
body{
background-color: #ffff01;
}
.header{
width: 100%;
height: 60px;
margin: 0 auto;
background-color: #f3bd01;
}
.he{
width: 1000px;
margin: 0 auto;
}
.he_1{
float: left;
}
.he_2{
float: right;
}
.he_2 ul{
float: left;
padding: 0;
margin: 0;
}
.he_2 ul li{
float: left;
list-style: none;
}
.he_2 ul li a{
text-decoration: none;
color: white;
line-height: 60px;
margin: 0 30px;
}
.he_2 ul li.active a{
font-weight: 900;
}
.banner{
margin-top: 20px;
}
.banner img{
width: 100%;
}
.hm_1 h3{
text-align: center;
font-weight: 900;
margin: 20px 0;
}
.hm_2{
float: left;
width: 500px;
text-indent: 2em;
padding: 0 50px;
box-sizing: border-box;
}?文章來源：http://www.zghlxwxcb.cn/news/detail-484854.html
五、??更多源碼
1.如果我的博客對你有幫助 ??請 “??點(diǎn)贊” “??評論” “??收藏” ??一鍵三連哦！文章來源地址http://www.zghlxwxcb.cn/news/detail-484854.html
到了這里，關(guān)于web期末作業(yè)設(shè)計網(wǎng)頁：動漫網(wǎng)站設(shè)計——海綿寶寶(6頁) HTML+CSS+JavaScript 學(xué)生DW網(wǎng)頁設(shè)計作業(yè)成品 動漫網(wǎng)頁設(shè)計作業(yè) web網(wǎng)頁設(shè)計與開發(fā) html實(shí)訓(xùn)大作業(yè)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
