哆啦A梦主题网站(HTML5+CSS3+Javascript)

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>
  • 8
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: HTML5CSS3JavaScript是现代Web开发中最重要的技术。HTML5是一种标记语言,用于创建Web页面的结构和内容。CSS3是一种样式表语言,用于控制Web页面的外观和布局。JavaScript是一种脚本语言,用于添加交互性和动态效果。这三种技术的结合使得Web开发更加灵活、响应式和富有创意性。 ### 回答2: HTML5CSS3JavaScript 是现代 Web 开发所必需的三种技术。它们分别负责网页的结构、样式和交互效果。 HTML5 是 HyperText Markup Language 的第五个版本,用于描述网页的结构和内容。它提供了许多新的标签,如 section、article、header、footer、nav 等,使文档的结构更清晰,更语义化。HTML5 还引入了许多新的 API,例如 canvas、video、audio、localStorage 等,增强了 Web 应用程序的功能。 CSS3 是 Cascading Style Sheets 的第三个版本,用于定义网页的样式和布局。它新增了许多属性和选择器,如 border-radius、box-shadow、transform、@media 等,使样式的实现更加高效、灵活。CSS3 还支持动画和过渡效果,可以让网页更加生动和富有动感。 JavaScript 是一种脚本语言,用于实现网页的交互效果和动态功能。它可以通过 DOM(Document Object Model)和 BOM(Browser Object Model)来操作文档和浏览器。JavaScript 还可以通过 Ajax 技术实现异步请求和局部更新,以提高网页的响应速度和用户体验。 综上所述,HTML5CSS3JavaScript 三者紧密结合,相互配合,能够实现丰富、动态、交互的 Web 应用程序。对于 Web 开发者来说,学习和掌握这三种技术是必须的,能够使开发效率和质量都有所提升。同时,Web 技术的不断发展也需要我们不断学习和跟进最新的技术,以保持技术的竞争力和应用的先进性。 ### 回答3: HTML5CSS3JavaScript是当今Web开发所需的核心基础技术。HTML5是WEB浏览器使用的主要标记语言之一,它的开发旨在优化互联网应用程序的交互性和功能性,进而增强用户体验。CSS3则扮演着设计和展现网页的角色,它提供了更加强大,更加美观的网页布局和样式设计能力。JavaScript是编写在客户端的脚本语言,它可用于在网页上创建丰富的交互效果,包括动态页面、表单校验、数据验证、动画等。 HTML5是WEB编程领域变革性的关键因素,它提供了许多新功能和标签,如地理位置、复合组件、多媒体元素、canvas等等。HTML5将同时支持不同等级的设备,如手机,平板电脑和桌面计算机,一次编写的完整代码将有更广泛的应用,大幅缩短开发周期,提高开发效率和准确性。 CSS3则具有更强大的样式和布局设计能力,可以创建更漂亮更具视觉效果,更简单的Web页面,例如,可以通过CSS3的阴影包装,转换,渐变和动画来实现交互元素的设计。CSS3实现了响应式设计,自适应屏幕尺寸,依靠媒体查询、弹性盒组布局(Equal Columns Trick)、媒体查询和流式布局等方式实现。 JavaScript可以添加交互元素,包括动态页面、表单验证和数据验证,实现可视化效果等。它可以控制对象的行为和状态、创建动态内容和动画、数据的异步加载和更新等。JavaScript的应用非常广泛,也有很多优秀的技术和框架如JQuery,React和AngularJS等等来支持Web开发。JavaScript还实现了Web服务器与客户端之间的通讯,实现了AJAX,WebSockets等技术。 总之,HTML5CSS3JavaScript是当前Web开发所不可或缺的三大技术,他们都有各自的长处和优点。随着他们不断的发展和更新,Web前端技术也将不断演化。这样一来,Web开发成为一个不断创新,不断进步的领域,并将继续成为推动互联网发展水平提高的重要一环。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cycyong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值