國漫大魚海棠主題，本套大作業(yè)共計10個頁面，頁面美觀度較高，網(wǎng)頁在細節(jié)設計上花了很大功夫，如邊框、陰影，鼠標滑過效果等，運用的知識點有：Div+CSS、JS輪播圖、Table、下拉菜單欄、視頻、表單、二級頁面，LOGO設計，基本期末作業(yè)所需的知識點都有覆蓋~ 戳下方視頻預覽頁面詳情
大魚海棠國漫主題HTML前端網(wǎng)頁設計成品預覽與講解DIV CSS JS文章來源：http://www.zghlxwxcb.cn/news/detail-505155.html
部分代碼片段：文章來源地址http://www.zghlxwxcb.cn/news/detail-505155.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>大魚海棠</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/js.js"></script>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
</style>
</head>
<body>
<div class="top">
<div class="logo"><a href="index.html"><img src="images/logo.png" width="140" height="51"></a></div>
</div>
<!-- 橫向?qū)Ш介_始 -->
<div class="bar-h42">
<div id="bar" class="clear">
<ul>
<li><a href="index.html">回到首頁</a></li>
<li><a href="article1.html">電影簡介</a></li>
<li><a href="article2.html">獲得獎項</a></li>
<li><a href="#">電影周邊 <img src="images/down.svg" width="10" height="10"></a>
<ul>
<li><a href="others1.html">經(jīng)典語錄</a></li>
<li><a href="others2.html">電影角色</a></li>
<li><a href="news.html">新聞資訊</a></li>
</ul></li>
<li><a href="photos.html">圖片印象</a></li>
<li><a href="#">更多相關(guān) <img src="images/down.svg" width="10" height="10"></a>
<ul>
<li><a href="page.html">影評</a></li>
<li><a href="video.html">視頻</a></li>
</ul></li>
<li><a href="message.html">給我留言</a></li>
</ul>
<div class="search"><input type="text" value=" 搜索"></div>
</div>
</div>
<!-- 橫向?qū)Ш紼ND -->
<!-- 輪播banner開始 -->
<div id="banner1">
<div id="picbox">
<div id="pic1" class="pics"></div>
<div id="pic2" class="pics"></div>
<div id="pic3" class="pics"></div>
<div id="pic4" class="pics"></div>
<div id="pic5" class="pics"></div>
</div>
<div id="nav">
<li id="navli1" class="anvli navnow" value="1"></li>
<li id="navli2" class="anvli" value="2"></li>
<li id="navli3" class="anvli" value="3"></li>
<li id="navli4" class="anvli" value="4"></li>
<li id="navli5" class="anvli" value="5"></li>
</div>
<div id="pre" class="hbut"></div>
<div id="next" class="hbut"></div>
</div>
<!-- 輪播banner 結(jié)束 -->
<div class="main">
<div class="video">
<div class="video-img"><a href="video.html"><img src="images/main01.jpg" alt="" width="581" height="339"></a></div>
<div id="video-icon"><a href="video.html" class="white">Click to play video</a></div>
</div>
<div class="main-text">
<span class="abigyahei2">關(guān) / 于 / 大 / 魚 / 海 / 棠</span><br>
在天空與人類世界的大海相連的海洋深處，生活著掌管著人類世界萬物運行規(guī)律的“其他人”。居住在“神之圍樓”里的女孩“椿”，十六歲生日那天變作一條海豚到人間巡禮，被大海中的一張網(wǎng)困住，一個人類男孩因為救她而落入深海死去。為了報恩，她需要在自己的世界里幫助男孩的靈魂——一條拇指那么大的小魚...</div>
</div>
<div id="index-iamges"><table width="100%" border="0">
<tr>
<td height="349" align="center"><a href="index.html"><img src="images/logo1.png" alt="" width="207" height="75"></a><br><input type="text" id="clock" size="50" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
</script>
</form></td>
</tr>
</table>
</div>
<div class="d-x-3">
<div class="d-x-3-1"><span class="abigyahei2">四十五億年前</span><br>
<br>
<span class="abigyahei3">這個星球上，只有一片汪洋大海，和一群古老的大魚。在與人類世界平行的空間里，生活著一個規(guī)規(guī)矩矩、遵守秩序的族群，他們?yōu)樯窆ぷ?，掌管世界萬物運行規(guī)律，也掌管人類的靈魂。他們的天空與人類世界的大海相連...</span></div>
<div class="gotop"><a href="#top"><img src="images/gotop.png" width="114" height="35"></a></div>
</div>
<div class="footer">
<div class="down"><table width="100%" border="0">
<tr>
<td width="17%" height="161"><a href="index.html"><img src="images/logo1.png" alt="" width="140" height="51"></a></td>
<td width="20%"><a href="#top" class="white">返回頂部</a></td>
<td width="32%" align="center">Copyright ? 版權(quán)所有 ICP備0000000號 </td>
<td width="14%"> </td>
<td width="17%"><a href="#"><img src="images/douyin.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weibo.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weixin.png" alt="" width="31" height="31"></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
到了這里，關(guān)于大魚海棠國漫主題HTML前端網(wǎng)頁設計成品預覽與講解DIV CSS JS的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)13（HTML5、CSS3、JavaScript ）橫向二級導航菜單 Web頁面設計實例——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
![[HTML]Web前端開發(fā)技術(shù)11（HTML5、CSS3、JavaScript ）頁面布局設計 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列復雜模式水平導航菜單——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/787720-1.png)
