常見網(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)行運行及修改編輯等操作)。
其中：
(1)??html文件包含：其中index.html是首頁、其他html為二級頁面；
(2)?? css文件包含：css全部頁面樣式；
(3)?? js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等(個別網(wǎng)頁中運用到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>網(wǎng)站首頁</title>
<link rel="stylesheet" href="css/index.css">
<style>
</style>
</head>
<body>
<!-- 頂部圖片 -->
<div class="qb">
<div class="qb_2">
<img src="./images/banner1.jpg" alt="" width="100%">
</div>
</div>
<!-- 導(dǎo)航欄 -->
<div class="qb">
<div class="qb_1">
<ul>
<li><a href="index.html">網(wǎng)站首頁</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>
<li><a href="index06.html">動漫情報</a></li>
<li><a href="index07.html">高清壁紙</a></li>
<li><a href="index08.html">快速登陸</a></li>
<li><a href="index09.html">快速注冊</a></li>
</ul>
</div>
</div>
<!-- 清除浮動 -->
<div style="clear: both;"></div>
<!-- 圖片 -->
<div class="qb">
<div class="qb_3">
<img src="./images/banner.jpg" alt="">
</div>
</div>
<!-- 劇情簡介 -->
<div class="qb">
<div class="qb_4">
<img src="./images/aa.jpg" alt="">
</div>
<div class="qb_5">
<h4>劇情簡介</h4>
<p style="line-height: 1.9;">
哆啦A夢的創(chuàng)造要追溯到1969年的某個截稿日，作者藤子·F·不二雄的家里突然闖進(jìn)了一只小貓，雖然很快就要截稿了，但作者還是和小貓玩了起來，還替小貓撓虱子，而這一撓就是幾個小時。等作者發(fā)現(xiàn)時間不夠用的時候，已經(jīng)來不及完成稿子。這時作者像熱鍋上的螞蟻走來走去，突然踢到了女兒的不倒翁玩具，于是作者靈光一現(xiàn)，把貓的形象和不倒翁結(jié)合起來，就創(chuàng)造了哆啦A夢。
</p>
</div>
</div>
<!-- 清除浮動 -->
<div style="clear: both;"></div>
<!-- 角色介紹 -->
<div class="qb">
<div class="qb_6">
<ul>
<li>
<img src="./images/a1.jpg" alt="">
</li>
<li>
<h4>哆啦A夢（ドラえもん）</h4>
<span>名字的意思是銅鑼衛(wèi)門（日文：ドラえもん）。心腸好，樂于助人，做事很拼命，但卻心腸軟。每次大雄遇到困難，他總會幫大雄。但有時會用愚蠢的方法來幫助大雄。當(dāng)它吃不到銅鑼燒或人們叫他貍貓時，脾氣會非常暴躁。</span>
</li>
<li>
<img src="./images/a2.jpg" alt="">
</li>
<li>
<h4>野比大雄（野比のび太）</h4>
<span>單純天真的個樂天派，成天吊兒郎當(dāng)?shù)鼗烊兆?。性格懶惰，天生遲鈍，什么時候都慢半拍，遲到紀(jì)錄和罰站紀(jì)錄等等屢次創(chuàng)造新紀(jì)錄。是個倒霉蛋。學(xué)習(xí)成績很糟糕(平時考試5次中就有1次得零分，偶爾得過一次100分，每次都是倒數(shù)第二名)，運動神經(jīng)遲鈍(卻是射擊和翻花繩的天才)，做任何事情都毛手毛腳的，智力和體力只有小學(xué)二年級的水平(注哆啦A夢學(xué)年制連載，人物年齡畫風(fēng)設(shè)定有點變化，動畫卻統(tǒng)一年齡畫風(fēng))性格懦弱，膽子很小，經(jīng)常受人欺負(fù)，遇到問題只知道逃避。</span>
</li>
<li>
<img src="./images/a3.jpg" alt="">
</li>
<li>
<h4>源靜香</h4>
<span>大雄的青梅竹馬，也是大雄未來的妻子。聰明乖巧、成績優(yōu)秀、心地善良，很受大家的歡迎。因為非常愛干凈，所以很喜歡洗澡，一天不洗澡就覺得不舒服。最喜歡吃烤白薯。夢想長大后成為國際航班的空中小姐、幼兒園教師。媽媽一心想讓她成為鋼琴家，但和鋼琴比起來，她更喜歡小提琴，不過她拉的小提琴難聽到和胖虎的歌聲差不多。</span>
</li>
<li>
<img src="./images/a4.jpg" alt="">
</li>
<li>
<h4>剛田武</h4>
<span>大雄的同班同學(xué)，大家都叫他“胖虎”。任性，蠻橫，又貪婪。因為塊頭大，經(jīng)常仗勢欺人，總是把別人的東西占為己有，借給他的東西從來沒還過。雖然是個粗暴的孩子王，不過很重視友情。在外面總是耀武揚威，但一回到家里卻對媽媽沒有絲毫抵抗能力，對妹妹胖妹則是疼愛有加。</span>
</li>
</ul>
</div>
</div>
<!-- 清除浮動 -->
<div style="clear: both;"></div>
<!-- 視頻 -->
<div class="qb">
<div class="sp">
<video src="./video/1.mp4" poster="./images/banner4.jpg" controls class="fl"></video>
</div>
</div>
<!-- 作品背景和故事內(nèi)容 -->
<div class="qb">
<div class="qb_7">
<div class="qb_8">
<img src="./images/b1.jpg" alt="">
<h4>作品背景</h4>
<p>臼井儀人先生之所以會創(chuàng)造出小新這個形象，是因為他在觀察自己的孩子的時候，發(fā)現(xiàn)小孩子的想法往往非常獨特，以至于作者被小孩的世界所吸引。所有的小孩都有乖巧和調(diào)皮的兩面性。這種兩面性對作者來講是十分有趣的。</p>
</div>
<div class="qb_9"></div>
<div class="qb_8">
<img src="./images/b2.jpg" alt="">
<h4>故事內(nèi)容</h4>
<p>大雄有一天打開自己的課桌，一只貓型機(jī)器人突然從抽屜里跳了出來，而這就是哆啦A夢。它是由大雄的后代從22世紀(jì)里給送來的，目的是幫助大雄解決許多他暫時無法解決的問題，并且盡可能地滿足大雄的愿望。</p>
</div>
</div>
</div>
<!-- 清除浮動 -->
<div style="clear: both;"></div>
<!-- 版權(quán)信息 -->
<div class="qb">
<div class="qb_10">
<span>哆啦A夢</span>
</div>
</div>
</body>
</html>?????CSS樣式部分代碼
* {
margin: 0;
padding: 0;
}
body{
background-color: #b8d4e9;
}
.qb{
width: 1000px;
margin: 0 auto;
background-color: white;
}
.qb_1{
float: left;
width: 100%;
height: 50px;
background-color: #3188d5;
}
.qb_1 ul li{
float: left;
list-style: none;
width: 100px;
text-align: center;
}
.qb_1 ul li a{
color: white;
text-decoration: none;
line-height: 50px;
font-weight: bold;
font-size: 14px;
}
.qb_2 img{
float: left;
}
.qb_3{
width: 960px;
margin: 0 auto;
}
.qb_3 img{
width: 100%;
padding-top: 20px;
}
.qb_4{
float: left;
padding: 10px 20px;
width: 360px;
height: 240px;
box-sizing: border-box;
background-color: white;
}
.qb_4 img{
width: 100%;
height: 200px;
}
.qb_5{
float: left;
width: 640px;
height: 240px;
padding: 10px 20px;
box-sizing: border-box;
background-color: white;
}
.qb_5 p{
text-indent: 2em;
font-size: 14px;
margin-top: 15px;
color: #535353;
}
.qb_5 h4{
font-weight: bold;
color: #3188d5;
margin-top: 5px;
}
.qb_6{
float: left;
padding: 10px 20px;
background-color: #fff;
}
.qb_6 ul li{
float: left;
list-style: none;
width: 240px;
height: 140px;
padding-right: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
.qb_6 ul li img{
width: 100%;
}
.qb_6 ul li h4{
font-weight: bold;
color: #3188d5;
margin: 5px 0;
}
.qb_6 ul li span{
color: #535353;
display: block;
font-size: 14px;
/* line-height: 1.6; */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5; /* 多行在這里修改數(shù)字即可，這里顯示2行*/
overflow:hidden;
-webkit-box-orient: vertical;
}
.qb_7{
float: left;
padding: 10px 20px 40px 20px;
background-color: white;
}
.qb_8{
float: left;
width: 470px;
background-color: white;
}
.qb_8 img{
width: 100%;
height: 264px;
}
.qb_9{
float: left;
width: 20px;
height: 300px;
background-color: white;
}
.qb_8 h4{
font-weight: bold;
color: #3188d5;
margin: 5px 0;
}
.qb_8 p{
font-size: 14px;
line-height: 1.7;
color: #535353;
}
.qb_10{
width: 100%;
height: 50px;
color: white;
text-align: center;
line-height: 50px;
background-color: #3188d5;
}
.ww{
font-weight: bold;
color: #3188d5;
padding: 20px 0;
text-align: center;
}
.qb_11{
float: left;
width: 240px;
height: 120px;
margin-left: 20px;
background-color: white;
}
.qb_11 img{
width: 100%;
}
.qb_12{
float: left;
width: 600px;
height: 120px;
background-color: white;
}
.qb_12 p:last-child{
font-size: 14px;
display: -webkit-box; /*（兼容性）*/
-webkit-line-clamp:4;/*（指定顯示行數(shù)）*/
-webkit-box-orient: vertical;/*（文本垂直排列）*/
overflow: hidden; /*（多余部分隱藏）*/
}
.ww_1{
color: #3188d5;
font-weight: bold;
}
.qb_12 p{
line-height: 1.9;
font-size: 14px;
padding: 0 20px;
background-color: white;
/* box-sizing: border-box; */
}
.qb_14{
width: 1000px;
height: 140px;
margin: 20px 0;
}
.sp{
padding: 0 20px;
box-sizing: border-box;
}
.sp img{
width: 100%;
height: 100%;
}
.sp video{
width: 100%;
height: 540px;
margin-bottom: 20px;
}
.fl {
width: 100%;
object-fit: cover;
}
.qb_13 {
width: 100%;
height: 20px;
background-color: white;
}??五、??更多源碼
1.如果我的博客對你有幫助 ??請 “??點贊” “??評論” “??收藏” ??一鍵三連哦！
2.??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問題??歡迎一起交流學(xué)習(xí)??文章來源：http://www.zghlxwxcb.cn/news/detail-760716.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-760716.html
到了這里，關(guān)于web期末作業(yè)設(shè)計網(wǎng)頁：動漫網(wǎng)站設(shè)計——哆啦A夢(10頁) HTML+CSS+JavaScript 學(xué)生DW網(wǎng)頁設(shè)計作業(yè)成品 動漫網(wǎng)頁設(shè)計作業(yè) web網(wǎng)頁設(shè)計與開發(fā) html實訓(xùn)大作業(yè)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
