纯html+js+css王者荣耀官网

已于 2024-06-20 23:53:01 修改
阅读量347 收藏 2
点赞数 2
分类专栏： 静态项目（js） 文章标签： html javascript css
于 2024-01-29 18:05:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72190449/article/details/135918190
版权

首页部分代码

 <!-- 顶部设置，腾讯游戏平台 -->
    <div class="header clearfixed">
        <div class="header_title f_left clearfixed"></div>
        <div class="header_imgnav f_left clearfixed">
            <div class="header_img"></div>
        </div>
        <div class="header_one f_left clearfixed">
            <span class="header_ico1"></span>
            <a href="#">成长守护平台</a>
        </div>
        <div class="header_two f_left clearfixed">
            <span class="header_twobtn">腾讯游戏排行榜</span>
            <span class="header_ico2"></span>
        </div>
        <div class="header_hidimg"></div>
    </div>
    <!-- 隐藏榜单 -->
    <div class="header_hid">
        <section class=" f_left clearfixed">
            <span class="hid_nav">新品端游排行榜</span>
            <span class="jian">></span>
            <ul>
                <li class="bang"><span class="hot">1</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">1</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="hot">2</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">2</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="hot">3</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">3</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">4</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">4</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">5</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">5</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">6</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">6</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">7</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">7</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">8</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">8</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">9</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">9</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
            </ul>
        </section>
        <section class="header_hidtwo f_left clearfixed">
            <span class="hid_nav">热门端游排行榜</span>
            <span class="jian">></span>
            <ul>
                <li class="bang"><span class="hot">1</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">1</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="hot">2</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">2</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="hot">3</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">3</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">4</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">4</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">5</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">5</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">6</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">6</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">7</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">7</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">8</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">8</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">9</span><a href="#">cf穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">9</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
            </ul>
        </section>
        <section class="header_hidthree f_left clearfixed">
            <span class="hid_nav">新品手游排行榜</span>
            <span class="jian">></span>
            <ul>
                <li class="bang"><span class="hot">1</span><a href="#">妄想山海</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">1</div><img src="./images/bang1.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="hot">2</span><a href="#">和平精英</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">2</div><img src="./images/bang2.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="hot">3</span><a href="#">穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">3</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">4</span><a href="#">火影忍者</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">4</div><img src="./images/bang6.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
            </ul>
        </section>
        <section class="header_hidonefour f_left clearfixed">
            <span class="hid_nav">热门手游排行榜</span>
            <span class="jian">></span>
            <ul>
                <li class="bang"><span class="hot">1</span><a href="#">妄想山海</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">1</div><img src="./images/bang1.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="hot">2</span><a href="#">王者荣耀</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">2</div><img src="./images/bang4.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="hot">3</span><a href="#">和平精英</a></li>
                <li class="banghid">
                    <div>
                        <div class="hot hidspan">3</div><img src="./images/bang5.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">4</span><a href="#">穿越火线</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">4</div><img src="./images/bang3.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
                <li class="bang"><span class="cool">5</span><a href="#">火影忍者</a></li>
                <li class="banghid">
                    <div>
                        <div class="cool hidspan">5</div><img src="./images/bang6.jpg" alt="">
                        <div class="bang_a"><a href="#">进入官网</a><a href="#">下载游戏</a></div>
                    </div>
                </li>
            </ul>
        </section>
    </div>

码影行者 (lilisen.cn)获取源码

运行部分截图

至尊鸡
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
王者荣耀静态网站
05-31
自己做的一个王者荣耀网站
王者荣耀官网web端代码
10-23
网站是pc版本的，web官网，前端代码
王者荣耀官方网站静态页面css+html
07-26
王者荣耀官方网站静态页面css+html
王者荣耀官网页面源码.zip
01-21
王者荣耀官网页面源码
仿王者官网html
m0_63929848的博客
03-09 278
仿写王者荣耀官网html css js
王者荣耀源代码，，
01-09
王者荣耀源代码，， 不包含资源，只有源码，， 王者荣耀源代码，， 不包含资源，只有源码，，
王者荣耀网站源码111
06-06
（html+css）静态网页
王者荣耀首页源码.zip
06-29
《王者荣耀》是腾讯天美工作室推出的英雄竞技手游,不是一个人的王者,而是团队的荣耀!5v5王者峡谷PVP对战,领略英雄竞技的酣畅淋漓!更有边境突围、五军对决等丰富的...
python爬虫爬取王者荣耀官网全部装备图片(源码分享)
qq_44525150的博客
02-08 1489
这篇文章为源码分享，爬虫的分析过程请阅读文章 《用python爬取王者荣耀官网的英雄皮肤海报(含源码)》 源码 import requests from bs4 import BeautifulSoup headers = {'user-agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like ...
王者荣耀源码.rar
05-19
王者荣耀手游的的反编译源代码,非常值得学习,tx的东西还是不错的. 一个moba游戏的框架,实现基本都可以学到,源码不能编译, 仅供学习之用,不要商用
仿写王者荣耀官网html+css+js
12-01
仿写王者荣耀官网html+css+js
web仿王者荣耀官网首页.zip
11-27
包含HTML、CSS、JS以及所需图片。 包含所有基本内容，大部分没有添加超链接，需要的请自行添加。 中间图片基本都是以背景图片方式插入，可以找到对应的代码，自行选择其他图片进行修改。 王者荣耀官网的中间部分，选择英雄部分应该是有弹框再进行选择，由于时间原因没有添加，可以自行修改，还有部分小瑕疵，但不影响使用。 基本内容都是比较完善的，如果需要交流，可以联系邮箱：jasmyn518@163.com
基于Html+Css+JavaScript的王者荣耀官网静态页面（95分以上）.zip
最新发布
05-20
基于Html+Css+JavaScript的王者荣耀官网静态页面（95分以上）.zip个人98分大作业设计项目，代码完整下载可用，纯手打高分大作业设计，可作为期末大作业和课程设计，小白也可实战。 基于Html+Css+JavaScript的王者...
基于Html+Css+JavaScript的王者荣耀官网静态页面.zip
07-07
基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于...
HTML+CSS王者荣耀静态网页.zip
04-07
5. 王者荣耀主题：为了模仿王者荣耀官网，开发者需要研究和分析原网站的设计元素，如色彩方案、图标、图片、排版等，并在自己的网页中重现这些元素。这涉及到对游戏品牌的理解和对用户体验的考虑。 6. 文件结构：...
web期末大作业-HTML+CSS+JS仿王者荣耀官网网站HTML5项目实训源码.zip
05-20
web期末大作业-HTML+CSS+JS仿王者荣耀官网网站HTML5项目实训源码.zip个人98分大作业设计项目，代码完整下载可用，纯手打高分大作业设计，可作为期末大作业和课程设计，小白也可实战。 web期末大作业-HTML+CSS+JS仿...
8.web前端网页制作 王者荣耀游戏网页设计实例 大学生期末大作业 html+css+js
A240307的博客
03-14 1561
本实例为HTML网页代码。该实例应用html+css+js设计，jquery、scoll、导航栏效果、图片轮翻效果、点击事件、视频元素、登录页面等的应用,本文以“游戏”为主题来设计实践，介绍如何通过从头开始设计游戏网站并将其转换为代码的过程。
仿写王者荣耀官方静态网站-腾讯游戏（HTML+CSS）
weixin_74947024的博客
08-02 1469
我根据王者荣耀腾讯官方网站仿写的静态网站，
html简单网页代码：仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
12-17 1492
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 📂文章目
王者荣耀官网html代码
12-28
根据提供的引用内容，以下是一个简单的王者荣耀官网的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>王者荣耀官网</title> <style> /* CSS样式 */ .sprite { background-image: url('sprite.png'); background-repeat: no-repeat; } .sprite.wangzheyingdi { background-position: 0 0; width: 100px; height: 100px; } .sprite.wangzheyingdi:hover { background-position: -100px 0; } .sprite.qrcode { background-position: -200px 0; width: 200px; height: 200px; } .sprite.text { background-position: -400px 0; width: 200px; height: 100px; } </style> </head> <body> <div class="sprite wangzheyingdi"></div> <div class="sprite qrcode"></div> <div class="sprite text"></div> </body> </html> ``` 这是一个简单的HTML代码示例，其中使用了精灵图和CSS样式来实现王者荣耀官网的效果。精灵图是一种将多个小图标合并到一张大图中的技术，通过设置不同的背景位置来显示不同的图标。在这个示例中，我们使用了两个精灵图，一个用于王者营地的图标，另一个用于二维码和文字的图标。通过设置不同的背景位置和鼠标悬停效果，实现了王者荣耀官网的效果展示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值