网页设计与网站建设作业html+css+js，一个简易的游戏官网网页

news2025/2/27 10:23:11

一个简易的游戏网页

浏览器查看

在这里插入图片描述

目录结构

在这里插入图片描述

部分代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的游戏</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <link rel="stylesheet" href="./css/iconfont.css">
</head>

<body>
    <div class="wrap">
        <!-- header  -->
        <div class="header">
            <div class="logo">
                <a href="./index.html">游戏官网</a>
            </div>
            <div class="search">
                <!-- <span class="icon search iconfont icon-Searchsvg"></span> -->
                <div class="search-input iconfont"><input type="text" placeholder="王者荣耀"></div>
            </div>
            <div class="user">
                <img class="logo" src="./images/logo.jpg">
                <span class="username"></span>
            </div>
        </div>
        <!-- main  -->
        <div class="main">
            <!-- 左边栏 -->
            <div class="side-left">
                <div class="side-list">
                    <ul>
                        <li class="current" onclick="home()">
                            <a href="./index.html">
                                <span class="icon iconfont icon-Home"></span>
                                首页
                            </a>
                        </li>
                        <li onclick="list()">
                            <a>
                                <span class="icon iconfont icon-Details"></span>
                                排行榜
                            </a>
                        </li>
                        <li onclick="find()">
                            <a>
                                <span class="icon iconfont icon-Issue"></span>
                                发现
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 中间内容 -->
            <!-- 内嵌页面内容 -->
            <iframe marginwidth=0 marginheight=0 width="900px" height="1200px" src="" frameborder="no" class="vtour-box"
                id="vtour-box"></iframe>
            <!-- 首页  -->
            <div class="container">
                <div class="content recommend">
                    <div class="head">推荐</div>
                    <!-- 模塊 -->
                    <div class="module">
                        <img src="./images/m-1.jfif">
                        <div class="cont">
                            <div class="left">
                                <div class="title">香肠派对</div>
                                <div class="info">
                                    SS7赛季-足球盛事，肠肠宇宙杯！
                                </div>
                                <div class="tags">
                                    <div class="good tag ">
                                        <span class="icon iconfont icon-shouye"></span>
                                        编辑推荐
                                    </div>
                                    <div class="hot tag ">
                                        <span class="icon iconfont icon-shouye"></span>
                                        热门榜
                                    </div>
                                </div>

                            </div>
                            <div class="right">
                                6.9
                            </div>
                        </div>
                    </div>
                    <div class="module">
                        <img src="./images/m-2.jfif">
                        <div class="cont">
                            <div class="left">
                                <div class="title">五子棋</div>
                                <div class="info">
                                    无广告、无内购、还能联机的3D五子棋？没错!
                                </div>
                                <div class="tags">
                                    <div class="good tag">
                                        <span class="icon iconfont icon-shouye"></span>
                                        编辑推荐
                                    </div>
                                    <div class="hot tag">
                                        <span class="icon iconfont icon-shouye"></span>
                                        休闲
                                    </div>
                                </div>

                            </div>
                            <div class="right">
                                7.0
                            </div>
                        </div>
                    </div>
                    <div class="module">
                        <img src="./images/m-3.jpg">
                        <div class="cont">
                            <div class="left">
                                <div class="title">mini世界</div>
                                <div class="info">
                                    无限梦幻的3D沙河世界 享受创造与破坏的快乐
                                </div>
                                <div class="tags">
                                    <div class="good tag">
                                        <span class="icon iconfont icon-shouye"></span>
                                        最具创意游戏
                                    </div>

                                </div>

                            </div>
                            <div class="right">
                                9.0
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 右边栏 -->
            <div class="side-right">
                <div class="head">热门游戏</div>
                <div class="game-list">
                    <ul>
                        <li>
                            <img src="./images/r-1.png">
                            <div class="detail">
                                <div class="top">
                                    <div class="title">元神</div>
                                    <span class="score">7.3</span>
                                </div>
                                <div class="bottom">
                                    <span>开放世界</span>
                                    <span>二次元</span>
                                    <span>角色扮演</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <img src="./images/r-2.png">
                            <div class="detail">
                                <div class="top">
                                    <div class="title">蛋仔派对</div>
                                    <span class="score">7.2</span>
                                </div>
                                <div class="bottom">
                                    <span>多人联机</span>
                                    <span>派对游戏</span>
                                    <span>竞技</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="./jquery.min.js"></script>

    <script>
        //本地获取缓存数据判断是否判断是否登录
        let user = JSON.parse(localStorage.getItem('user'));
        console.log(user);
        if (!user) {
            setTimeout(function () {
                alert('未登录请登录!');
                document.location.href = "login.html";
            }, 1000);
            $('.username').html(`<a href="login.html" class="username">去登录</a>`)
        } else {
            $('.username').html(user.name + '  <a onclick="logout()"  class="logout">退出</a>');
        }

        function logout() {
            localStorage.removeItem('user');
            document.location.href = "login.html";
        }

       
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        a {
            text-decoration: none;
            color: #145cae;
        }

        .login {
            width: 400px;
            height: 420px;
            margin: 100px auto
        }

        .linked_h1 {
            color: #145cae;
            font-size: 24px;
            margin: 10px 0
        }

        .linked_h1 span {
            display: inline-block;
            border-radius: 6px;
            color: #fff;
            background: #145cae;
            padding: 0 5px;
            margin: 0 5px;
        }

        .login_form {
            box-shadow: 0px 0px 8px #999;
            overflow: hidden;
            padding: 20px;
            border-radius: 6px
        }

        .login_form h2 {
            margin: 5px 0
        }

        .explanation {
            font-size: 14px;
            margin: 15px 0;
        }

        input {
            display: block
        }

        input[type=text] {
            margin: 0px 0px 20px;
            height: 40px;
            width: 98%;
            border: 1px solid #ccc;
            padding: 0 1%;
        }

        input[type=password] {
            margin: 0px 0px 20px;
            height: 40px;
            width: 98%;
            border: 1px solid #ccc;
            padding: 0 1%
        }

        .fp {
            font-size: 14px;
            font-weight: 600;
        }

        .sign_in_btn {
            height: 40px;
            width: 80%;
            margin: 30px auto 40px;
            background: #145cae;
            color: #fff;
            border: 0;
            border-radius: 20px;
            font-size: 20px;
            box-shadow: 0px 10px 18px #8abaf0
        }

        .new_join {
            margin: 30px auto;
            color: #333333;
            text-align: center;
            font-size: 14px;
        }

        .new_join a {
            font-weight: bold;
            margin: 0 5px
        }

        .bottom {
            margin: auto;
            width: fit-content;
        }

        #msg {
            color: red;
            width: fit-content;
            height: 50px;
            margin: auto;
            line-height: 50px;
        }

        .footer {
            margin: auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="login">

        <form action="" method="post" name="login">
            <div class="login_form">
                <h2>登录</h2>
                <p class="explanation">欢迎登录</p>
                <!--用户名-->
                <label>用户名</label>
                <input type="text" placeholder="username" name="username" id="username">

                <!--密码-->
                <lable>密码</lable>
                <input type="password" placeholder="password" name="password" id="password">


                <input type="submit" value="登录" class="sign_in_btn" onClick="return saveStorage('msg')">

                <div class="bottom">
                    <span>未注册</span>,
                    <a href="./register.html"> 去注册</a>
                </div>

            </div>
        </form>
        <p id="msg"></p>
    </div>
    <div class="footer">
        <a href="https://hpc.baicaitang.cn/">@hpc小站</a>
    </div>
</body>
<script>
    function saveStorage(id) {
        /*创建对象*/
        var data = new Object;
        /*获得数据*/
        data.username = document.getElementById("username").value;
        data.password = document.getElementById("password").value;

        /* 判断用户名*/
        if (data.username == '') {
            document.getElementById(id).innerHTML = "用户名不能为空";
            return false;
        } else {

            // 判断用户是否存在
            if (JSON.parse(localStorage.getItem('user'))) {
                // 本地获取数据判断是否存在用户
                let user = JSON.parse(localStorage.getItem('user')).name;
                if (user !== data.username) {
                    document.getElementById(id).innerHTML = "该用户未注册";
                    return false;
                }
            } else {
                document.getElementById(id).innerHTML = "该用户未注册";
                return false;
            }

        }

        /*判断密码*/
        if (data.password == '') {
            document.getElementById('msg').innerHTML = "密码不能为空";
            return false;
        } else {
            // 本地获取数据判断密码是否正确
            let user = JSON.parse(localStorage.getItem('user')).password;
            if (user !== data.password) {
                document.getElementById(id).innerHTML = "密码错误";
                return false;
            }
        }


        /*跳转到首页*/
        document.getElementById("msg").innerHTML = "登录成功!正在进入首页！";
        setTimeout(function () {
            document.location.href = "index.html";
        }, 1000);
        return false;
    }
</script>

</html>

获取完整代码点击查看

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

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

相关文章

【c++】利用嵌套map创建多层树结构

【c++】利用嵌套map创建多层树结构

通常树的深度都大于1&#xff0c;即树有多层&#xff0c;而树结构又可以用c的map容器来实现&#xff0c;所以&#xff0c;本文给出了一种多层树结构的实现思路&#xff0c;同时也给出了相应的c代码。 整体思路概述 首先定义一个节点类Node类&#xff0c;要包括children&#x…
阅读更多...
EI论文复现：考虑多能互补的综合能源系统/虚拟电厂/微电网优化运行程序代码！

EI论文复现：考虑多能互补的综合能源系统/虚拟电厂/微电网优化运行程序代码！

本程序参考EI论文《基于多能互补的热电联供型微网优化运行》&#xff0c;文章通过储能设备解耦热电联系&#xff0c;建立基于多能互补的综合能源系统/虚拟电厂/微电网优化运行模型。模型包含系统供给侧的多能互补协调与需求侧的综合能源响应两个方面&#xff0c;使供给侧通过能…
阅读更多...
基于springboot时间管理系统源码和论文

基于springboot时间管理系统源码和论文

在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括时间管理系统的网络应用&#xff0c;在外国时间管理系统已经是很普遍的方式&#xff0c;不过国内的管理系统可能还处于起步阶段。时间管理系统具有时间管理功能的选择。时间管…
阅读更多...
XTuner 大模型单卡低成本微调实战

XTuner 大模型单卡低成本微调实战

文章目录 配置环境微调部署与测试自定义微调 XTuner 大模型单卡低成本微调 原理可查看 XTuner 大模型单卡低成本微调原理 配置环境 创建一个名为xtuner&#xff0c;python3.10版本虚拟环境 conda create --name xtuner0.1.9 python3.10 -y创建一个xtuner019文件夹&#xff0c…
阅读更多...
WebGL在虚拟现实（VR）的应用

WebGL在虚拟现实（VR）的应用

WebGL在虚拟现实&#xff08;VR&#xff09;领域的应用日益增多&#xff0c;它为在Web浏览器中创建交互式的虚拟现实体验提供了强大的支持。以下是一些WebGL在VR领域的应用示例&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&am…
阅读更多...
Word插件-大珩助手-手写电子签名

Word插件-大珩助手-手写电子签名

手写签名 支持鼠标写&#xff0c;支持触摸屏写&#xff0c;点击画笔按钮切换橡皮擦&#xff0c;支持清空画板重写&#xff0c;点击在word中插入签名&#xff0c;可插入背景透明的签字图 素材库-保存签名 将写好的签字图复制粘贴到素材库中&#xff0c;以便永久使用&#xff…
阅读更多...
Visual Studio Code1.67版本已正式发布，新增Rust指南

Visual Studio Code1.67版本已正式发布，新增Rust指南

Visual Studio Code1.67版本已正式发布&#xff0c;该版本包含大量增强生产力的更新项&#xff1a; 资源管理器文件嵌套 通过这次更新&#xff0c;用于浏览和管理文件和文件夹的Visual Studio Code的资源管理器工具现在支持基于名称嵌套相关文件。 资源管理器现在支持根据文…
阅读更多...
【Linux操作】国产Linux服务管理操作

【Linux操作】国产Linux服务管理操作

【Linux操作】国产Linux服务管理操作 前言SAMBA配置服务器端1. 安装相关包2. 配置/etc/samba/smb.conf&#xff0c;在此文件末尾添加如下内容&#xff0c;并保存退出。3. 创建/home/share并更改权限4. 启动samba服务 客户端• Windows客户端• 麒麟客户端 Telnet1、telnet语法2…
阅读更多...
机器学习中的线性回归

机器学习中的线性回归

线性回归 概念 利用 回归方程(函数) 对 一个或多个自变量(特征值)和因变量(目标值)之间 关系进行建模的一种分析方式。 分类 一元线性回归&#xff1a;y wx b 目标值只与一个因变量有关系 多元线性回归&#xff1a; y w_1x_1 w_2x_2 w_3x_3 … b 目标值只与多个…
阅读更多...
Linux Ubuntu搭建我的世界Minecraft服务器实现好友远程联机MC游戏

Linux Ubuntu搭建我的世界Minecraft服务器实现好友远程联机MC游戏

文章目录 前言1. 安装JAVA2. MCSManager安装3.局域网访问MCSM4.创建我的世界服务器5.局域网联机测试6.安装cpolar内网穿透7. 配置公网访问地址8.远程联机测试9. 配置固定远程联机端口地址9.1 保留一个固定tcp地址9.2 配置固定公网TCP地址9.3 使用固定公网地址远程联机 前言 Li…
阅读更多...
SpringSecurity6 | 登录失败后的跳转

SpringSecurity6 | 登录失败后的跳转

✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉 🍎个人主页：Leo的博客 💞当前专栏： 循序渐进学SpringSecurity6 ✨特色专栏： MySQL学习 🥭本文内容： SpringSecurity6 | 失败后的跳转 📚个人知识库： Leo知识库，欢迎大家…
阅读更多...
Qt/QML编程学习之心得：使用camera摄像头（35）

Qt/QML编程学习之心得：使用camera摄像头（35）

汽车应用中，camera起到了越来越多的作用，数字化的作用，这点无可争议，而作为GUI设计工具，如何让Camera类的应用能更好的发挥作用呢？ You can use Camera to capture images and movies from a camera, and manipulate the capture and processing settings that get appl…
阅读更多...
C#MQTT编程03--连接报文

C#MQTT编程03--连接报文

1、报文回顾 MQTT协议中一共有14个报文&#xff0c;如下图 从上图看&#xff0c;我们要特别要注意以下3个点&#xff1a; (1)值&#xff0c;14个报文的排列&#xff0c;不是随意的&#xff0c;每个报文都有自己的值&#xff0c;而值在报文中是要用到的。后面例子会介绍到。 …
阅读更多...
【含完整代码】Java定时任务之xxl-job[超详细]

【含完整代码】Java定时任务之xxl-job[超详细]

前言 个人博客&#xff1a;www.wdcdbd.com 在Java中使用定时任务是一件很常见的事情&#xff0c;比如使用定时任务在什么时间&#xff0c;什么时候&#xff0c;去发布一些信息&#xff0c;或者去查询一些日志等相关的代码。这时&#xff0c;我们就要开发定时任务这中功能来实现…
阅读更多...
理解TCP/IP协议

理解TCP/IP协议

一、协议 在计算机网络与信息通讯领域里&#xff0c;人们经常提及 “协议” 一词。互联网中常用的协议有HTTP、TCP、IP等。 协议的必要性 简单来说&#xff0c;协议就是计算机与计算机之间通过网络通信时&#xff0c;事先达成的一种 “约定”。这种“约定”使不同厂商的设备…
阅读更多...
精通业务：资深程序员的核心优势

精通业务：资深程序员的核心优势

在IT行业&#xff0c;我们常常听到关于技术实力、项目经验、团队协作等方面的讨论&#xff0c;但有一个重要因素常常被忽视&#xff0c;那就是对业务的了解。 对于资深程序员来说&#xff0c;懂业务和不懂业务之间的区别&#xff0c;犹如一道深邃的鸿沟&#xff0c;决定着他们…
阅读更多...
【MySQL】：探秘主流关系型数据库管理系统及SQL语言

【MySQL】：探秘主流关系型数据库管理系统及SQL语言

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; MySQL从入门到进阶 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一. MySQL概述1.1 数据库相关概念1.2 主流数据库1.3 数据模型1.3.1 关系型数据库…
阅读更多...
QT DAY5作业

QT DAY5作业

1.QT基于TCP服务器端 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> //服务器类 #include <QMessageBox> //消息对话框类 #include <QTcpSocket> //客户端类 #include <QList> //链表容器类namespace …
阅读更多...
unity C#什么时候用“可空类型”

unity C#什么时候用“可空类型”

文章目录 例子1. **声明一个可空类型变量&#xff1a;**2. **给可空类型变量赋值&#xff1a;**3. **检查可空类型变量是否有值&#xff1a;**4. **转换与比较&#xff1a;**5. **使用null合并运算符&#xff1a;** 可空类型的重要意义1. **表示缺失或未知的值&#xff1a;**2.…
阅读更多...
基于51单片机的智能热水器设计

基于51单片机的智能热水器设计

需要全部文件请私信关注我&#xff01;&#xff01;&#xff01; 基于51单片机的智能热水器设计 摘要一、绪论1.1 选题背景及意义1.2 完成目标与功能设计 二、硬件系统设计2.1 硬件完成要求2.2 方案选择2.3 电源电路设计2.4 键盘电路2.5 蜂鸣器报警电路2.6 温度检测电路2.7 红…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023