哆啦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>
<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>
<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.01div>
<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.01div>
<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.01div>
<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.01div>
<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.01div>
<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.01div>
<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.01div>
<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.01div>
<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-0000p>
<p>©2000-2020 Fujiko Pro Licensed by Animation p>
div>
div>
<div id="gotop">
<img src="images/index/gotop.png" alt="">
div>
<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>