web前端大作业(基于HTML+CSS+JavaScript仿阴阳师游戏官网首页作业制作)

news2025/2/18 13:14:17

🎉精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!


📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站效果
  • 五、🔧 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货


一、👨‍🎓网站题目

🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。


二、✍️网站描述

⭐ 网页中包含:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频音频元素,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。

🏅 一套A+的网页应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接,可到三级页面,有5-10个页面组成。
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转。
  5. 要有JS特效,如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。。
  7. 页面清爽、美观、大方,不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


四、🌐网站效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


五、🔧 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>YYS</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>

    <div id="main">

        <!--header start-->
        <div id="header">

            <!--导航-->
            <div id="nav">
                <!--主导航-->
                <ul class="mainList">
                    <li class="mNav"><a href="index.html">官网首页</a></li>
                    <li class="line"></li>
                    <li class="mNav"><a href="javascript:void(0)">新闻资讯</a></li>
                    <li class="line"></li>
                    <li class="mNav"><a href="javascript:void(0)">游戏攻略</a></li>
                    <li class="line"></li>
                    <li class="mNav"><a href="javascript:void(0)">游戏特色</a></li>
                    <li class="line"></li>
                    <li class="mNav haveHide">
                        <a href="javascript:void(0)">同人专区</a>
                        <span class="arrow"></span>
                    </li>
                    <li class="line"></li>
                    <li class="mNav haveHide">
                        <a href="javascript:void(0)">官方渠道</a>
                        <span class="arrow"></span>
                    </li>
                </ul>
                <!--导航下拉隐藏层-->
                <div class="ulHide">
                    <div class="hide">
                        <ul class="hideList">
                            <li class="mHideLi">
                                <a href="javascript:void(0)">
                                        <i class="i1"></i>
                                        <p>玩家COS</p>
                                    </a>
                            </li>
                            <li class="border"></li>
                            <li class="mHideLi">
                                <a href="javascript:void(0)">
                                        <i class="i2"></i>
                                        <p>同人绘画</p>
                                    </a>
                            </li>
                        </ul>
                    </div>
                    <div class="hide">
                        <ul class="hideList">
                            <li class="mHideLi">
                                <a href="javascript:void(0)">
                                        <i class="i1"></i>
                                        <p>玩家COS</p>
                                    </a>
                            </li>
                            <li class="border"></li>
                            <li class="mHideLi">
                                <a href="javascript:void(0)">
                                        <i class="i2"></i>
                                        <p>同人绘画</p>
                                    </a>
                            </li>
                            <li class="border"></li>
                            <li class="mHideLi">
                                <a href="javascript:void(0)">
                                        <i class="i2"></i>
                                        <p>同人绘画</p>
                                    </a>
                            </li>

                            <li class="border"></li>
                            <li class="mHideLi">
                                <a href="javascript:void(0)">
                                        <i class="i2"></i>
                                        <p>同人绘画</p>
                                    </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--logo1、二维码-->
                <div class="logo">
                    <div class="qrcode">
                        <p>扫描下载</p>
                        <img src="img/qrcode.png" alt="">
                    </div>
                    <div class="mLogo">
                        <p class="img"></p>
                        <p class="p1">阴阳师</p>
                        <p class="p2">网易和风匠心巨制</p>
                    </div>
                </div>
            </div>

            <!--logo2-->
            <div id="logo2"></div>

            <!--role-->
            <div id="role" onselectstart="return false">
                <div class="rol1">
                    <p class="role role1 hide"></p>
                    <p class="role role2 hide"></p>
                </div>
                <div class="rol2">
                    <p class="role role3 hide"></p>
                    <p class="role role4 hide"></p>
                </div>
                <p class="btn"></p>
                <img class="bottomImg lazyImg" src="img/index/role/role_botbg.png" alt="">
                <!--server-->
                <div id="server">
                    <img src="img/index/role/bunny.gif" alt="">
                </div>
            </div>

            <!--服务器列表-->
            <div id="serverList">
                <div class="main">

                    <span class="close"></span>
                    <div class="botImg"></div>
                </div>
            </div>

        </div>
        <!--end header-->

        <!--slide start-->
        <div id="slide">

            <p class="title"></p>
            <span class="arrow"></span>

            <!--下载横向伸缩区-->
            <div class="download stretch">
                <p class="shrink"></p>
                <div class="downloadMain">
                    <span class="close"></span>
                    <p class="bg1"></p>
                    <div class="qrcode">
                        <img class="qr lazyImg" src="img/qrcode.png" width="210" height="210" alt="">
                        <img class="line lazyImg" src="img/index/line.png" width="106" height="9" alt="">
                    </div>
                    <div class="downLink">
                        <a href="javascript:void(0)" class="ios"></a>
                        <a href="javascript:void(0)" class="android"></a>
                    </div>
                </div>
            </div>

            <!--游戏日历主内容-->
            <div class="main">
                <ul>
                    <li class="mainLi l9 left"></li>
                    <li class="mainLi l8 right"></li>
                    <li class="mainLi l7 left"></li>
                    <li class="mainLi l6 right"></li>
                    <li class="mainLi l5 left"></li>
                    <li class="mainLi l4 right"></li>
                    <li class="mainLi l3 left"></li>
                    <li class="mainLi l2 right"></li>
                    <li class="mainLi l1 left">
                        <div class="show">协同斗技,每周六日14:00-15:30斗技</div>
                        <div class="hide">
                            <p class="hide">周一至周五 11:00-13:00,20:00-22:00</p>
                            <p class="hide">周一至周五 11:00-13:00,20:00-22:00</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--slide end-->

        <!--content start-->
        <div id="content">
            <!--新闻 和 banner部分-->
            <div id="news">

                <!--banner-->
                <div class="banner">
                    <div class="pic">
                        <ul>
                            <li><a href="javascript:void(0)"><img  src="img/index/content/1.jpg" alt=""></a></li>
                            <li><a href="javascript:void(0)"><img  src="img/index/content/2.jpg" alt=""></a></li>
                            <li><a href="javascript:void(0)"><img  src="img/index/content/3.jpg" alt=""></a></li>
                            <li><a href="javascript:void(0)"><img  src="img/index/content/4.jpg" alt=""></a></li>
                            <li><a href="javascript:void(0)"><img  src="img/index/content/5.jpg" alt=""></a></li>
                        </ul>
                    </div>
                    <div class="tab">
                        <ul>
                            <li class="on"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>

                <!--新闻-->
                <div class="inform">
                    <div class="tab">
                        <ul>
                            <li class="l1 on"><a href="javascript:void(0)"><i></i><span></span></a></li>
                            <li class="l2"><a href="javascript:void(0)"><i></i><span></span><b></b></a></li>
                            <li class="l3"><a href="javascript:void(0)"><i></i><span></span><b></b></a></li>
                            <li class="l4"><a href="javascript:void(0)"><i></i><span></span><b></b></a></li>
                            <li class="l5"><a href="javascript:void(0)"><i></i><span></span><b></b></a></li>
                        </ul>
                    </div>

                    <div class="show">
                        <ul class="wrapUl">
                            <li class="new wrapLi"></li>
                            <li class="news wrapLi"></li>
                            <li class="active wrapLi"></li>
                            <li class="notice wrapLi"></li>
                            <li class="media wrapLi"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--content end-->

        <!--character start-->
        <div id="character">
            <div class="sMain">
                <!--平安之旅 式神 主角-->
                <div class="title">
                    <span class="bg1"></span>
                    <span class="dotted"></span>
                    <p class="tab active">
                        <i></i>
                        <span class="tab1"></span>
                    </p>
                    <span class="dotted"></span>
                    <p class="tab">
                        <i></i>
                        <span class="tab2"></span>
                    </p>
                </div>

                <!--对应的显示-->
                <div class="showMain">
                    <ul class="mList">
                        <!--式神列表-->
                        <li class="mLi shishenList">
                            <div class="shishenTab">
                                <ul>
                                    <li class="clickBtn on">全部</li>
                                    <li class="clickBtn">SSR</li>
                                    <li class="clickBtn">SR</li>
                                    <li class="clickBtn">R</li>
                                    <li class="clickBtn">N</li>
                                    <li class="allBtn"><a href="javascript:void(0)"><img  src="img/index/content/viewAll_btn.png" alt=""></a></li>
                                </ul>
                            </div>
                            <div class="mainList">
                                <div class="mUl show">
                                    <ul class="ALL">
                                        <!-- <li class="ssList">
                                                 <div class="shishen">
                                                     <img  src="img/index/content/shishen/201.png" alt="">
                                                     <p class="cover"><span>雪女</span></p>
                                                     <i class="new"></i>
                                                 </div>
                                                 <div class="shishen">
                                                     <img  src="img/index/content/shishen/201.png" alt="">
                                                     <p class="cover"><span>雪女</span></p>
                                                     <i class="new"></i>
                                                 </div>
                                             </li>-->
                                    </ul>

                                    <p class="btn left"></p>
                                    <p class="btn right"></p>
                                </div>
                                <div class="mUl">
                                    <ul
                    <p class="p4">微博名:<a>yinyangshi163</a></p>
                    <div class="img"><img src="img/index/contact/wx.jpg" alt=""></div>
                </li>
                <li class="l4">
                    <i></i>
                    <p class="p1">客户服务电话</p>
                    <p class="p2">0571-123456789</p>
                    <p class="p4"><span></span><a href="javascript:void(0)">问题反馈</a> <a href="javascript:void(0)">精灵咨询</a> </p>
                </li>
            </ul>
            <div class="goTop"></div>
        </div>
        <!--contact end-->

        <!--footer start-->
        <div id="footer">
            <p class="p1"></p>
            <div class="hover">
                <p class="p2"></p>
                <p class="p3"></p>
                <p class="p4"></p>
                <div class="qrd">
                    <div class="pic"><img src="img/qrcode.png" alt=""></div>
                    <div class="txt"></div>
                </div>
            </div>
        </div>
        <!--footer end-->

    </div>
    <script src="js/newData.js"></script>
    <script src="js/shishenData.js"></script>
    <script src="js/strateData.js"></script>
    <script src="js/fanData.js"></script>
    <script src="js/index.js"></script>

</body>

</html>



💒CSS样式代码

body {
    position: relative;
    min-width: 1400px;
}

#main {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
}

#header {
    position: relative;
    width: 100%;
    height: 628px;
    background: url("../img/index/main_banner.jpg") top center;
}

#nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    transition: .3s;
    min-width: 1400px;
    z-index: 999;
}

#nav.hover {
    background: rgba(255, 255, 255, .8);
}

#nav.scroll {
    position: fixed;
    background: rgba(255, 255, 255, .8);
}

#nav ul.mainList {
    float: right;
    margin-right: 40px;
    margin-top: 40px;
    width: 700px;
    height: 25px;
}

#nav ul.mainList>li {
    float: left;
}

#nav ul.mainList li.mNav {
    font-size: 16px;
    line-height: 25px;
}

#nav ul.mainList li.mNav a {
    display: block;
    color: #000;
    transition: .3s;
    padding: 0 20px 35px;
}

#nav ul.mainList li.mNav.hover a {
    color: #cc4336;
}





六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深映像,不知道如何提升自己,这个时候每天刷自主刷一些题就非常重要(百炼成神),可以去牛客网上的编程初学者入门训练。该专题为编程入门级别,适合刚学完语法的小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习 。


七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/87870.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1780. 判断一个数字是否可以表示成三的幂的和

目录题目深搜&#xff08;不超时&#xff09;动态规划&#xff08;超时写法&#xff09;二维空间优化&#xff08;一维&#xff09;题目 给你一个整数 n &#xff0c;如果你可以将 n 表示成若干个不同的三的幂之和&#xff0c;请你返回 true &#xff0c;否则请返回 false 。 对…

海德汉机床联网

一、设备信息确认 1、确认型号 数控面板拍照确认&#xff1a; 此系统为&#xff1a;海德汉530操作系统 还有一种情况是面板无任何版本信息&#xff0c;这时就需要进入系统里面再确认。 2、确认通讯接口 打开电器柜后既可看到网口。编号X26 3、确认数控系统软件版本(以620为…

Java+Swing实现自助取款机(ATM)系统-TXT存储数据

JavaSwing实现自助取款机ATM系统-TXT存储数据一、系统介绍1.系统功能2.环境配置3.工程截图二、系统展示1.登录页1.1登录成功2.取款2.1取款成功3.存款3.1 存款成功4.转账5.余额查询6.退出系统三、部分代码AccountDao.javaLoginFrame.javaAccount.java四、其他获取源码一、系统介…

rocketmq源码-producer发送消息

前言 这篇笔记&#xff0c;记录producer发送消息的相关源码 我们以最简单的demo为例 public static void main(String[] args) throws MQClientException, InterruptedException {DefaultMQProducer producer new DefaultMQProducer("please_rename_unique_group_name&…

去哪儿是如何做到大规模故障演练的?|TakinTalks

# 一分钟精华速览 #混沌工程作为一种提高技术架构弹性能力和容错能力的复杂技术手段&#xff0c;近年来讨论声音不断&#xff0c;相比在分布式系统上进行随机的故障注入实验&#xff0c;基于混沌工程的大规模自动化故障演练&#xff0c;不仅能将“作战演习”常态化&#xff0c;…

Spring结合mybatis

目录 一、Spring结合mybatis 二、业务层添加声明式事务 1、事务的传播机制 2、事务的四大特性 3、事务的隔离级别 4、事务属性 一、Spring结合mybatis 1.创建Web工程&#xff0c;导入Spring和MyBatis的相关依赖 <!-- springmybatis整合 --><dependency><…

web渗透安全测试(靶场搭建及常见漏洞攻防)

渗透测试 渗透测试&#xff08;Penetration test&#xff09;即安全工程师模拟黑客&#xff0c;在合法授权范围内&#xff0c;通过信息搜集、漏洞挖掘、权限提升等行为&#xff0c;对目标对象进行安全测试&#xff08;或攻击&#xff09;&#xff0c;最终找出安全风险并输出测…

Denoising Diffusion Probabilistic Models简介

目录概要前向过程nice property逆向过程参数推导简化参考资料概要 Denoising Diffusion Probabilistic Model(DDPM)是一个生成模型&#xff0c;给定一个目标分布&#xff0c;学习模型以便可以从目标分布中采样。 使用马尔科夫链建模。输入是噪声&#xff0c;通过神经网络逐步去…

“乌卡时代”下,跨境电商卖家到底在焦虑什么?

三年前新冠疫情大爆发&#xff0c;现今国家全面解封&#xff0c;但形式任然不稳定&#xff0c;加之国际形势扑朔迷离&#xff0c;各国外贸瞬息万变&#xff0c;跨境电商行业面对的复杂性也随之正变得越来越高。无论是运价&#xff0c;还是爆仓&#xff0c;亦或是港口拥堵等情况…

WPF入门 第一篇 基础布局与简单样式

基础布局与简单样式 首先&#xff0c;创建WPF项目&#xff0c;在自动打开的MainWindow.xaml里面&#xff0c;找到Grid标签&#xff0c;并将它替换为&#xff1a; <Grid><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition>&…

【案例教程】地球科学数据(ERA5、雪深、积雪覆盖、海温、植被指数、土地利用)处理实践

【查看原文】地 球 科 学 常 见 数 据 的 处 理 实 践 技 术 应 用 在地球科学中&#xff0c;不同数据根据具体学科的特色存储为多种数据格式。在科研工作中需要将多种数据进行综合使用分析&#xff0c;因此需要寻找学习通用的数据格式解决方法&#xff0c;把研究的精力聚焦到具…

芜湖~西门子低代码最新组件首发,快来围观!

热爱低代码的小伙伴们&#xff0c;我们又见面啦~ 在与大家长达1年多时间的沟通交流中&#xff0c;我们深刻感受到大家对西门子低代码的浓厚兴趣。为了不辜负大家的厚爱&#xff0c;我们潜心研制了一批前端组件。因为随着商业化的趋势&#xff0c;越来越多的企业级产品对更好的…

web前端实训作业 html+css+javascript 水果超市网页设计实例 企业网站制作

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

12.7、后渗透测试--python插件执行py脚本

加载python插件&#xff1a;meterpreter >load python查看指令集&#xff1a;meterpreter >helppython执行单条语句&#xff1a;meterpreter > python_execute "import os; cdos.getcwd()" -r cd # 将os.getcwd()赋值给 cd 这个变量&#xff0c;然后用 -…

中英翻译《The number thirteen数字13》

The number thirteen 数字13 一、Pre-reading activity 阅前思考 1.Do you have a lucky number? If so, what is it? 你有幸运数字吗&#xff1f;如果有&#xff0c;是什么&#xff1f; 2.What number is next? 10, 11, 12, ____? 下一个数字是什么&#xff1f; 10、11、1…

设计模式-迭代器模式

迭代器模式UML类图 实现代码如下&#xff08;这里使用的集合是list,也可以使用其他集合这里就不一一展示了&#xff09; public interface Iterator<T> {T next();boolean hasNext(); } 复制代码 public class ConcreteIterator<T> implements Iterator<T>…

商品企划VE课程大纲

课程信息 课程受众: 高中基层管理人员、储备干部&#xff0c;项目经理&#xff0c;商品企划人员&#xff0c;研发人员 课程时间: 2天 授课方式: 理论讲座&#xff0b;实战工作坊&#xff0b;录像观赏&#xff0b;角色扮演&#xff0b;提问互动&#xff0b;分组讨论&#xff0…

Java入门教程(29)——封装

封装是面向对象三大特征之一。 文章目录1.封装的特性2.封装的作用3.访问控制符4.实例1.封装的特性 高内聚、低耦合 2.封装的作用 提高代码的安全性。提高代码的复用性。高内聚&#xff1a;封装细节&#xff0c;便于修改内部代码&#xff0c;提高可维护性。低耦合”&#xff…

Linux常用目录操作及示例操作

文章目录一、常用权限操作1.1 常用权限操作1. chgrp命令2. chown命令3. chmod命令1.2 权限操作实战任务1 创建文件&#xff0c;设置其用户组任务2 修改文件的所有者任务3 修改文件操作权限二、常用目录操作2.1 常用目录操作2.2 目录操作实战任务1 获取命令帮助信息任务2 查看当…

IBM有望在2026年之前实现量子优势

&#xff08;图片来源&#xff1a;网络&#xff09; 目前&#xff0c;噪声是量子计算面临的最大挑战&#xff0c;限制了量子计算技术的快速发展。在未来几年内&#xff0c;IBM正努力通过各种类型的量子误差管理来减少噪声&#xff0c;直到实现真正的量子纠错 (QEC)。 这也是降低…