1 简介
作为一名哆啦A梦的粉丝，也可以说是哆啦A梦的爱好者。我小时候特别喜欢看哆啦A梦的动画片，因此上大一的时候突发奇想做一个关于小哆啦的主题网站，以此致敬。
2 技术介绍
本项目全程采用HTML5进行编写,有能力的小伙伴也可以将其改成Thymeleaf做成动态网站，静态资源等文件都是齐全的。
- HTML5
- CSS3
- Javascript
3 项目演示和获取方式
B站视频演示：项目演示传送门
别忘了给视频来个一键三连！！！
源码获取: 源码完整版获取传送门
百度云地址：
链接：https://pan.baidu.com/s/1H3K397vXPU1clGovNyPPMg?pwd=dizu
提取码：dizu
4 打开方式
源码下载完毕之后，就可以使用VS code或者WebStorm打开了。
5 页面图片展示
首页
作者介绍
大事件
哆啦A梦的世界观
…不一一列举了。
6 部分代码展示
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页 | 简介</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/cloud.css">
<link rel="icon" href="images/favicon.ico">
<script src="js/gotop.js"></script>
<script src="js/lunbo.js"></script>
<body>
<!-- 头部模块start -->
<div class="header w">
<div class="headbox">
<div class="logo">
<img src="images/index/logo.png" alt="">
</div>
<div class="cloud1">
<img src="images/index/cloud_01.png" alt="">
</div>
<div class="cloud2">
<img src="images/index/cloud_02.png" alt="">
</div>
<div class="cloud3">
<img src="images/index/cloud_03.png" alt="">
</div>
<div class="cloud4">
<img src="images/index/cloud_02.png" alt="">
</div>
<div class="topnav">
<a href="html/enroll.html">登录 </a>
<a href="html/regester.html">注册</a>
</div>
</div>
<div class="lunbo">
<div class="total">
<ul id = "banner">
<li><img src="images/index/lunbo1.jpg"></li>
<li><img src="images/index/lunbo2.jpg"></li>
<li><img src="images/index/lunbo3.jpg"></li>
<li><img src="images/index/lunbo4.jpg"></li>
<li><img src="images/index/lunbo1.jpg"></li>
</ul>
</div>
</div>
<div class="menu">
<div class="nav">
<ul>
<li class="shouye" ><a href="index.html">首页</a></li>
<li class="zuozhe"><a href="html/author.html">作者简介</a></li>
<li class="renwu"><a href="html/character.html">人物介绍</a></li>
<li class="shangpin"><a href="html/world.html">世界观</a></li>
<li class="huodong"><a href="html/bigthing.html">大事件</a></li>
<li class="chubanpin"><a href="html/book_1.html">漫画</a></li>
<li class="yingyin"><a href="html/movie.html">影音</a></li>
<li class="xiazai"><a href="html/download_1.html">下载</a></li>
</ul>
</div>
</div>
</div>
<!-- 头部模块end -->
<!-- 推荐模块开始 -->
<div class="recommed w">
<div class="recommed1 w">
<ul>
<li class="banner1">
<div class="jieshao1">
<div class="jieshao1_nav"></div>
<a href="#">2017大电影 : 人鱼大作战</a>
</div>
</li>
<li class="banner2">
<div class="jieshao1">
<div class="jieshao1_nav"></div>
<a href="#">2018大电影 : 奇迹之岛</a>
</li>
<li class="banner3">
<div class="jieshao1">
<div class="jieshao1_nav"></div>
<a href="#">2015大电影 : 绿巨人传说</a>
</li>
</ul>
</div>
<div class="recommed2 w">
<ul>
<li class="shop1">
<div class="text">
<div class="shop_nav"></div>
<div class="date">
<p>发文日期 : </p>
</div>
<div class="time">2020.05.01</div>
<div class="shop_title">
<a href="#">哆啦A梦50周年年度定制印花T恤</a>
</div>
<div class="shop_go"></div>
</div>
</li>
<li class="shop2">
<div class="text">
<div class="shop_nav"></div>
<div class="date">
<p>发文日期 : </p>
</div>
<div class="time">2020.05.01</div>
<div class="shop_title">
<a href="#">哆啦A梦50周年年度定制印花T恤</a>
</div>
<div class="shop_go"></div>
</div>
</li>
<li class="shop3">
<div class="text">
<div class="shop_nav"></div>
<div class="date">
<p>发文日期 : </p>
</div>
<div class="time">2020.05.01</div>
<div class="shop_title">
<a href="#">哆啦A梦50周年年度定制印花T恤</a>
</div>
<div class="shop_go"></div>
</div>
</li>
<li class="shop4">
<div class="text">
<div class="shop_nav"></div>
<div class="date">
<p>发文日期 : </p>
</div>
<div class="time">2020.05.01</div>
<div class="shop_title">
<a href="#">哆啦A梦50周年年度定制印花T恤</a>
</div>
<div class="shop_go"></div>
</div>
</li>
<li class="shop5">
<div class="text">
<div class="shop_nav"></div>
<div class="date">
<p>发文日期 : </p>
</div>
<div class="time">2020.05.01</div>
<div class="shop_title">
<a href="#">哆啦A梦50周年年度定制印花T恤</a>
</div>
<div class="shop_go"></div>
</div>
</li>
<li class="shop6">
<div class="text">
<div class="shop_nav"></div>
<div class="date">
<p>发文日期 : </p>
</div>
<div class="time">2020.05.01</div>
<div class="shop_title">
<a href="#">哆啦A梦50周年年度定制印花T恤</a>
</div>
<div class="shop_go"></div>
</div>
</li>
<li class="shop7">
<div class="text">
<div class="shop_nav"></div>
<div class="date">
<p>发文日期 : </p>
</div>
<div class="time">2020.05.01</div>
<div class="shop_title">
<a href="#">哆啦A梦50周年年度定制印花T恤</a>
</div>
<div class="shop_go"></div>
</div>
</li>
<li class="shop8">
<div class="text">
<div class="shop_nav"></div>
<div class="date">
<p>发文日期 : </p>
</div>
<div class="time">2020.05.01</div>
<div class="shop_title">
<a href="#">哆啦A梦50周年年度定制印花T恤</a>
</div>
<div class="shop_go"></div>
</div>
</li>
</ul>
</div>
</div>
<!-- 推荐模块结束 -->
<!-- 页脚模块开始 -->
<div class="footer w">
<div class="foot_link">
<div class="code">
<div class="left_img box">
<div class="front"><img src="images/index/wechat.gif" alt=""></div>
<div class="back"><img src="images/index/code.jpg" alt=""></div>
</div>
<div class="middle_img box">
<div class="front"><img src="images/index/weibo.gif" alt=""></div>
<div class="back"><img src="images/index/code.jpg" alt=""></div>
</div>
<div class="right_img box">
<div class="front"><img src="images/index/shop.gif" alt=""></div>
<div class="back"><img src="images/index/code.jpg" alt=""></div>
</div>
<div class="img_item1"><p>微信关注</p></div>
<div class="img_item2"><p>微博关注</p></div>
<div class="img_item3"><p>在线商店</p></div>
</div>
<div class="guide">
<div class="guide_item">
<p>友情链接</p>
<a href="index.html">首页</a>
<a href="html/author.html">作者简介</a>
<a href="html/character.html">人物介绍</a>
<a href="html/world.html">世界观 !</a>
</div>
<div class="guide_item">
<p>友情链接</p>
<a href="html/bigthing.html">大事件 !</a>
<a href="html/book_1.html">漫画详情</a>
<a href="html/movie.html">影音详情</a>
<a href="html/download_1.html">壁纸下载</a>
</div>
<div class="callme">
<p>联系我们</p>
<a href="#">投诉建议</a>
<a href="#">帮助我们</a>
</div>
</div>
<div class="wenzi">
<p>瀏覽器版本：本系統建議使用Edge、Chrome瀏覽器‧如需使用IE，請使用IE10以上版本。</p>
<p>哆啦A夢台灣地區授權代理 國際影視有限公司</p>
<p>地址：10448 天堂村44444444 電話：00-0000-0000</p>
<p>©2000-2020 Fujiko Pro Licensed by Animation </p>
</div>
</div>
<!-- 页脚模块结束 -->
<!-- gotop模块开始 -->
<div id="gotop">
<img src="images/index/gotop.png" alt="">
</div>
<!-- gotop模块结束 -->
<script>
var curindex = 0
maxlen = document.getElementById("banner").getElementsByTagName("li").length-1
var timer = null
timer = setInterval(change_auto,3000)
function change_auto(){
if(curindex<maxlen){
curindex++;
get_next();
}
else{
curindex = 0;
get_reset()
}
}
var width = 1200
function get_next(){
var totalbanner = document.getElementById("banner")
totalbanner.style.marginLeft = "-"+width*curindex+"px"
totalbanner.style.transition = 1+"s"
}
function get_reset(){
var totalbanner = document.getElementById("banner")
totalbanner.style.marginLeft = "0px"
totalbanner.style.transition = "0s"
}
</script>
</body>
</html>
1133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
