哆啦A梦主题网站(HTML5+CSS3+Javascript)
哆啦A梦主题网站
- 1 简介
- 2 技术介绍
- 3 项目演示和获取方式
- 4 打开方式
- 5 页面图片展示
- 6 部分代码展示
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 = 0maxlen = document.getElementById("banner").getElementsByTagName("li").length-1var timer = nulltimer = setInterval(change_auto,3000)function change_auto(){if(curindex<maxlen){curindex++;get_next();}else{curindex = 0;get_reset()}}var width = 1200function 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>
待我称王封你为后i
爱被打了一巴掌
àì夳堔傛蜴生んèń
向右看齐
还没有评论，来说两句吧...