炫酷登录页面/html+css+js/王者荣耀/KPL

已于 2024-11-14 23:25:53 修改
阅读量1.5k 收藏 34
点赞数 40
文章标签： html5 javascript css jquery 课程设计 设计语言 web3
于 2024-11-14 23:24:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47621353/article/details/143783126
版权

王者荣耀-kpl宣传页面，炫酷html作业

  • 登录页面
    在这里插入图片描述

  • 首页

在这里插入图片描述网页首页页面index.html
实现代码
首页

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到KPL</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">
            <img src="images/logo_kpl.png" alt="KPL Logo" class="logo-img">
            <span class="title">KPL 赛事</span>
        </div>
        <ul class="nav-links">
            <li><a href="#">赛事直播</a></li>
            <li><a href="#">赛事进程</a></li>
            <li><a href="#">参赛队伍</a></li>
            <li><a href="#">赛事介绍</a></li>
            <li><a href="#">合作伙伴</a></li>
            <li><a href="login.html">退出</a></li>
        </ul>
    </nav>

    <div id="carousel" class="carousel-container">
        <div class="carousel-images">
            <img src="images/banner3.png" alt="Image 1" class="carousel-img">
            <img src="images/banner1.jpg" alt="Image 2" class="carousel-img">
            <img src="images/banner1.jpg" alt="Image 3" class="carousel-img">
        </div>
        <div class="carousel-controls">
            <button class="prev" onclick="changeSlide(-1)">&#10094;</button>
            <button class="next" onclick="changeSlide(1)">&#10095;</button>
        </div>
    </div>

    <!-- 主内容 -->
    <main>
        <div class="video-container">
            <video width="80%" controls>
                <source src="mp4/2024九周年主题CG.mp4" type="video/mp4">
                您的浏览器不支持视频播放。
            </video>
        </div>

        <div class="description">
            <h2>关于 KPL</h2>
            <p>
                KPL（王者荣耀职业联赛）是中国王者荣耀的顶级职业联赛。每年吸引无数观众关注，成为电竞圈的焦点赛事。赛事涵盖了各种激烈的比赛，展示了顶级玩家的精湛技巧。
            </p>
        </div>

        <div class="kpl-history">
            <h2>KPL 赛事历史</h2>
            <p>
                KPL 起源于2016年，是王者荣耀游戏开发公司腾讯公司主办的职业赛事。自赛事创办以来，已成功举办多届，每年吸引着成千上万的观众参与，赛事规模和影响力逐年扩大。各大电竞俱乐部和顶级选手为争夺冠军头衔，展开激烈的竞争。
            </p>
        </div>

        <div class="kpl-rules">
            <h2>赛事规则</h2>
            <ul>
                <li>比赛为 5V5 竞技对抗模式。</li>
                <li>采用 BO5 系统，先胜三局者获胜。</li>
                <li>比赛将采用公平、公正的线上或线下环境进行。</li>
                <li>每个赛季的冠军将获得丰厚的奖金和荣誉。</li>
            </ul>
        </div>

        <div class="kpl-champions">
            <h2>历届冠军</h2>
            <ul>
                <li>2023年：XX战队</li>
                <li>2022年：YY战队</li>
                <li>2021年：ZZ战队</li>
                <li>2020年：AA战队</li>
            </ul>
             <!-- 图文混排 -->
        <div class="image-text-gallery">
            <div class="image-text-item">
                <img src="images/kpl_event_1.jpg" alt="KPL Event 1" class="gallery-img">
                <p>精彩赛事：2023年春季赛精彩纷呈，战队激烈对决。</p>
            </div>
            <div class="image-text-item">
                <img src="images/kpl_event_2.jpg" alt="KPL Event 2" class="gallery-img">
                <p>巅峰对决：决赛中，顶级战队为冠军殊死搏斗。</p>
            </div>
            <div class="image-text-item">
                <img src="images/kpl_event_3.jpg" alt="KPL Event 3" class="gallery-img">
                <p>观众热情：每场比赛都吸引了成千上万的观众。</p>
            </div>
            <div class="image-text-item">
                <img src="images/kpl_event_4.jpg" alt="KPL Event 4" class="gallery-img">
                <p>精彩瞬间：每个瞬间都充满了紧张与刺激。</p>
            </div>
            <div class="image-text-item">
                <img src="images/kpl_event_5.jpg" alt="KPL Event 5" class="gallery-img">
                <p>热血沸腾：KPL的每一场比赛都让人心潮澎湃。</p>
            </div>
            <div class="image-text-item">
                <img src="images/kpl_event_6.jpg" alt="KPL Event 6" class="gallery-img">
                <p>热烈庆祝：赛季结束时，团队庆祝冠军的辉煌时刻。</p>
            </div>
        </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <p>© 2024 KPL 赛事. 版权所有 | <a href="#">隐私政策</a> | <a href="#">联系我们</a></p>
    </footer>

<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.carousel-img');
const slideCount = slides.length;

function changeSlide(n) {
  currentSlide += n;
  if (currentSlide < 0) {
    currentSlide = slideCount - 1;
  } else if (currentSlide >= slideCount) {
    currentSlide = 0;
  }
  updateCarousel();
}

function updateCarousel() {
  const carouselImages = document.querySelector('.carousel-images');
  carouselImages.style.transform = `translateX(-${currentSlide * 100 / slideCount}%)`;
}

setInterval(function() {
  changeSlide(1);
}, 5000);
</script>
</body>
</html>

登录页面

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>欢迎来到KPL</title>
        <link rel="stylesheet" href="css/styles.css">
      
        <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    </head>
    
    <body>
        <div id="pet" class="pet"></div>

        <div class="login-container">
            <div class="login-box">
                <div class="logo">
                    <h1 class="neon-text">KPL-登录</h1>
                </div>
                <form id="loginForm">
                    <div class="form-group">
                        <input type="text" class="neon-input" id="username" placeholder="用户名" required>
                    </div>
                    <div class="form-group">
                        <input type="password" class="neon-input" id="password" placeholder="密码" required>
                    </div>
                    <button type="submit" class="btn-neon">登录</button>
                    <div class="links">
                        <a href="#" class="neon-link">忘记密码？</a> | <a href="#" class="neon-link">注册新账户</a>
                    </div>
                </form>
            </div>
        </div>
    
        <!-- 添加波点动画 -->
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
    
        <script src="js/script.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
    const pet = document.getElementById("pet");

    function movePet() {
        const maxX = window.innerWidth - pet.offsetWidth; // 获取页面宽度
        const maxY = window.innerHeight - pet.offsetHeight; // 获取页面高度

        const randomX = Math.floor(Math.random() * maxX);
        const randomY = Math.floor(Math.random() * maxY);

        pet.style.left = randomX + "px";
        pet.style.top = randomY + "px";
    }

    // 每2秒随机移动一次宠物
    setInterval(movePet, 2000);
});

        </script>
    </body>
    
</html>
王者荣耀官网web端代码
10-23
网站是pc版本的，web官网，前端代码
我要写王者荣耀类游戏的网页代码
weixin_42594419的博客
02-13 1471
写网页代码需要掌握前端开发技能，如 HTML、CSS 和 JavaScript。以下是一个简单的示例代码： <!DOCTYPE html> <html> <head> <title>王者荣耀游戏</title> </head> <body> <header> &l...
王者荣耀 网页设计 html源码 大作业
VX_laoxuezhangzy的博客
06-14 494
【学生网页源码】王者荣耀五页 html+css+javascript。
html 做王者荣耀
weixin_67782151的博客
05-23 3154
相信大家都玩过王者荣耀吧，那么王者荣耀在html中要怎么实现呢？ 话不多说，上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C...
王者荣耀官网资讯模版
10-08
一款王者荣耀咨询网站模板，包括铭文介绍，装备介绍，皮肤介绍，赛事精品等
web期末作业设计网页 HTML+CSS+JavaScript仿王者荣耀游戏新闻咨询（网页设计期末课程设计）
HTML网页设计
08-22 917
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保...
HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
专注于dreamweaver网页设计制作
08-14 542
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保......
【网页设计】期末大作业html+css（B站首页 1页 带js轮播)
而风不止
11-18 553
FV 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
web期末作业设计网页 HTML+CSS+JavaScript仿王者荣耀游戏新闻咨询（web前端网页制作课作业）
weixin__BJ050106的博客
08-09 241
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保......
css3和h5实现王者荣耀官网
08-25
仅使用css3与h5实现的王者荣耀官网，不使用js，可以供参考学习
HTML&amp;amp;CSS-王者荣耀
12-16
这是我人生中做的第一个网站，当时用了2周左右的时间学习HTML和CSS的入门并用3天左右完成这个网站，当时是用360浏览器调试页面的（那时候不知道什么浏览器主流，以为所有浏览器都一样的样式），所以页面普遍很丑，其实我个人觉得还好，大家下载网盘资源，那个是V2.0版本！下载链接：https://pan.baidu.com/s/1kbPj2CcbgauOCLFpZbVDGA 提取码：czvj
王者荣耀官网页面源码.zip
01-21
王者荣耀官网页面源码
王者荣耀资讯系统模板
06-24
一款王者荣耀咨询网站模板，包括铭文介绍，装备介绍，皮肤介绍，赛事精品等
王者荣耀官方网站静态页面css+html
07-26
王者荣耀官方网站静态页面css+html
王者荣耀源代码，，
01-09
王者荣耀源代码，， 不包含资源，只有源码，， 王者荣耀源代码，， 不包含资源，只有源码，，
【网页设计】基于HTML+CSS上海旅游网站网页作业制作
最新发布
卡拉米
08-02 1956
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
纯html+js+css王者荣耀官网
m0_72190449的博客
01-29 815
【代码】纯html+js+css王者荣耀官网。
web前端期末大作业——HTML+CSS+JavaScript仿王者荣耀游戏网站设计与制作
qq__3200628753的博客
12-09 219
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保...
王者荣耀KPL静态html网页制作
11-27
王者荣耀KPL静态HTML网页制作可以使用任意HTML编辑软件进行操作，如Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等。其中，HTML文件包含首页和其他二级页面，CSS文件包含全部页面样式、文字滚动、图片放大等，JS文件包含实现动态轮播特效、表单提交、点击事件等。具体的制作过程需要根据具体的需求和设计进行操作，可以参考相关的HTML、CSS、JS教程和示例进行学习和实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

在校小白！！！

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

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

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

打赏作者

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

抵扣说明：

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

余额充值