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

最新推荐文章于 2024-05-14 23:39:54 发布
最新推荐文章于 2024-05-14 23:39:54 发布
阅读量134 收藏
点赞数 1
分类专栏： 静态项目（js） 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 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>

私聊获取源码

运行部分截图

至尊鸡
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端期末大作业——HTML+CSS+JavaScript仿王者荣耀游戏网站设计与制作
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
仿王者荣耀官网(HTML+CSS).rar
02-03
实训的项目,用了HTML+CSS做的,适合学校要求
基于Html+Css+JavaScript的王者荣耀官网静态页面.zip
07-07
基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于Html+Css+JavaScript的王者荣耀官网静态页面.zip基于 【备注】 主要针对计算机相关专业的正在做毕设的学生和需要项目实战的Java、html、JavaScript、开发学习者。 也可作为课程设计、期末大作业。包含：项目源码等，该项目可以直接作为毕设、课程设计使用。 也可以用来学习参考借鉴！
css3和h5实现王者荣耀官网
08-25
仅使用css3与h5实现的王者荣耀官网，不使用js，可以供参考学习
网站源码 + html+css+js 王者荣耀主题网站
07-02
搬运，仅供参看
HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
热门推荐
HTML网页设计
09-27 1万+
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保...
jQuery + html + css 实现王者荣耀官网首页
做技术，坚持才是最重要的，一时的热情只是暂时的进步
02-19 6058
访问地址 reset.css /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, cod
基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
html精品源码
12-21 509
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保...
html+css+js写一个王者荣耀积分夺宝
皮小孩的博客
05-27 3528
在游戏里面，积分夺宝是很抽中好东西的，于是想自己写一个页面，实现无限抽奖，而且必中荣耀水晶。 先看效果（完整代码在后面）： 开始要选择大区： 抽一次： 抽十次（一下中四个荣耀水晶，太爽了）： 可以在我的礼品查看： html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d
HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现...
qq_365392777
11-06 596
????精彩专栏推荐???????????????????????? ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 ???? 作者主页: ​​【主页——????获取更多优质源码】​​ ???? web前端期末大作业： 【????毕设项目精品实战案例 (1000套) 】 ???? 程序员有趣的告白方式：【????HTML七夕情人节表白网页制作 (110套) 】 ????超炫酷的Echarts...
HTML常见标签-换行标签-水平线标签
weixin_44201223的博客
05-14 110
换行标签 水平线标签
使用html和css实现个人简历表单的制作
qq_49370210的博客
05-12 757
Ⅰ、表格整体的边框为1像素，单元格间距为0，表格中前六列列宽均为100像素，第七列 为200像素，表格整体在页面上居中显示；Ⅲ、第一行合并了7列；第六 行合并了六列；照片的单元格合并了四行。Ⅱ、前五行的行高为40像素，第六行的行高为80像素，排列方式均为居中显示；CSS文件{style.css}
HTML 4.0的事件属性：功能与应用
2401_83810323的博客
05-09 290
在HTML 4.0中，常见的事件属性包括onclick、onmouseover、onmouseout等，它们分别对应着用户的点击、鼠标悬停和鼠标移出等操作。除了上述常见的事件属性外，HTML 4.0还提供了诸如onload、onunload、onchange等其他事件属性，它们分别用于在页面加载完成、页面关闭和表单元素值改变时触发相应的操作。onmouseover事件属性在用户将鼠标悬停在元素上时触发，而onmouseout事件属性则在用户将鼠标移出元素时触发。
01.认识HTML及常用标签
最新发布
2301_80401457的博客
05-14 567
标题1描述内容1111标题2描述内容2222无序列表ul {li {北京上海广州
HTML常见标签-段落标签
weixin_44201223的博客
05-14 159
段落标签
HTML常见标签-标题标签
weixin_44201223的博客
05-14 172
标题标签
HTML静态网页成品作业(HTML+CSS+JS)——华为商城网页(1个页面)
weixin_42283461的博客
05-13 1371
HTML静态网页成品作业(HTML+CSS)——华为商城网页(1个页面)
html制作王者荣耀官网界面附带图片
06-09
制作王者荣耀官网界面需要使用HTML、CSS和JavaScript等技术。下面是一个简单的HTML代码示例，其中包含一些图片： ``` <!DOCTYPE html> <html> <head> <title>王者荣耀官网</title> <style> /* CSS样式表 */ body { background-color: #f2f2f2; font-family: Arial, sans-serif; } #header { background-color: #1c1c1c; color: #ffffff; padding: 20px; text-align: center; } #logo { margin: 0 auto; width: 200px; } #nav { background-color: #dcdcdc; padding: 10px; text-align: center; } #nav a { color: #333333; font-size: 18px; margin-right: 20px; text-decoration: none; } #nav a:hover { color: #1c1c1c; } #hero { background-image: url("https://game.gtimg.cn/images/lol/act/img/champion/Aatrox.png"); background-repeat: no-repeat; background-size: cover; height: 500px; position: relative; } #hero h1 { color: #ffffff; font-size: 48px; margin-top: 150px; text-align: center; } #hero p { color: #ffffff; font-size: 24px; text-align: center; } </style> </head> <body> <!-- 页面内容 --> <div id="header"> <img id="logo" src="https://game.gtimg.cn/images/lol/act/img/logo.png"> </div> <div id="nav"> <a href="#">首页</a> <a href="#">新闻</a> <a href="#">赛事</a> <a href="#">攻略</a> <a href="#">论坛</a> </div> <div id="hero"> <h1>王者荣耀</h1> <p>全球首款5V5英雄公平对战手游</p> </div> </body> </html> ``` 在这段代码中，我们使用了background-image属性给hero元素设置了一个背景图片，并使用了id选择器来对页面的不同部分进行样式设置。你可以在此基础上进行更加详细的开发和美化，以实现你所需要的官网界面效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值