HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

获取更多源码

PC电脑端关注我们

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

  • HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板
  • 获取更多源码
  • 作品介绍
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现
  • 四、获取更多源码
  • 五、学习资料
  • 六、更多源码

一、作品展示


二、文件目录

三、代码实现


<!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 
        <!--activity end-->

        <!--contact start-->
        <div id="contact">
            <ul>
                <li class="l1">
                    <a href="javascript:void(0)"><img  src="img/index/logo.png" alt=""></a>
                </li>
                <li class="l2 qrd">
                    <p class="p1">关注官方微博</p>
                    <p class="p2">扫描二维码</p>
                    <p class="p3">官方微博</p>
                    <p class="p4"><span></span>微博名：<a href="javascript:void(0)">网易阴阳师手游</a></p>
                    <div class="img"><img src="img/index/contact/wb.png" alt=""></div>
                </li>
                <li class="l3 qrd">
                    <p class="p1">关注微信公众号</p>
                    <p class="p2">扫描二维码</p>
                    <p class="p3">微信公众号</p>
                    <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>

四、获取更多源码

PC电脑端关注我们

五、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

六、更多源码

HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

更多推荐

HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dr