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

一个简易的游戏网页

浏览器查看

在这里插入图片描述

目录结构

在这里插入图片描述

部分代码

<!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.mzph.cn/news/621276.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

重学Java 5 idea详细使用和运算符

慢点跑&#xff0c;前面的路不好走 ——24.1.14 一、IDEA的使用 1.idea的介绍 1.概述&#xff1a;开发工具 2.特点&#xff1a; a、idea是java写的&#xff0c;所以本地上必须有正确的jdk环境 b、idea自动保存 c、不用我们打开dos命令窗口执行javac和java命令 d、idea有强大的…

Mnajora 使用deb包安装软件

说明 Mnajora 安装deb软件包主要有两种方式 可以使用dpkg 直接安装也可是使用debtap将deb软件包转换成 使用dpkg sudo pacman -S dpkg #安装dpkgsudo dpkg -i ###.deb #使用dpkg安装deb软件包和在ubuntu上是一样的 安装成功 使用debtap debtap是一个用于将.deb包转换为A…

236.【2023年华为OD机试真题(C卷)】生成哈夫曼树(优先搜索(DFS)-JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解…

第 2 课 ROS 系统安装和环境搭建

文章目录 方法一&#xff1a;一键安装&#xff08;推荐&#xff09;方法二&#xff1a;逐步安装&#xff08;常规安装方式&#xff09;1.版本选择2.检查 Ubuntu 的软件和更新源3.设置 ROS 的下载源3.1 设置国内下载源3.2 设置公匙3.3 更新软件包 4. 安装 ROS5. 设置环境变量6. …

(每日持续更新)jdk api之FileFilter基础、应用、实战

博主18年的互联网软件开发经验&#xff0c;从一名程序员小白逐步成为了一名架构师&#xff0c;我想通过平台将经验分享给大家&#xff0c;因此博主每天会在各个大牛网站点赞量超高的博客等寻找该技术栈的资料结合自己的经验&#xff0c;晚上进行用心精简、整理、总结、定稿&…

鸿蒙Harmony-PersistentStorage--持久化存储UI状态储详解

用简单的心境&#xff0c;对待复杂的人生&#xff0c;方能看淡得失&#xff0c;从容入世&#xff0c;潇洒自如&#xff0c;心变得简单了&#xff0c;世界也就简单了 目录 一&#xff0c;定义 二&#xff0c;限制条件 三&#xff0c;使用 一&#xff0c;定义 LocalStorage和App…

midjournery教程(可以在微信中免费使用)

图片比例 9:16 --ar 9:16 图片风格化 --s 1000 --stylize 1000 版本 Midjourney 定期发布新模型版本以提高效率、一致性和质量。默认为最新型号&#xff0c;但可以使用--version或--v参数或使用/settings命令并选择型号版本来使用其他型号。不同的模型擅长处理不同类型的图…

【ASP.NET Core 基础知识】--中间件--内置中间件的使用

ASP.NET Core 中包含很多内置的中间件&#xff0c;我们不可能对每一个内置的中间件进行一一讲解&#xff0c;并且中间件的使用步骤大致一样&#xff0c;因此本文讲解几个常用的内置中间件以及使用中间件的步骤&#xff0c;希望读者们可以举一反三。 一、内置中间件的介绍 1.1…

爬虫-6-数据提取-beautifulsoup4

#声明:本文仅供学习。 (●—●)

12.3在应用层使用SPI总线

在SPI总线驱动框架中提供了一个spidev 的字符设备驱动&#xff0c;在应用层可以通过它来访问SPI总线。 应用层访问SPI总线的步骤 编写spidev设备树节点&#xff0c;在SPI总线的设备树节点下添加spidev设备的树节点&#xff0c;设备树示例如下所示&#xff1a; spidev0: spid…

沉浸式webview输入框被输入法遮挡了怎么办?!

还是那个倒霉的双十一需求&#xff0c;测试时发现发弹幕的输入框被系统输入法挡住了&#xff0c;这个问题在之前UC内核的浏览器时没问题啊。经过各种对比定位&#xff0c;发现是因为这次需求还有个沉浸式的实现&#xff0c;就是这个实现导致输入框无法被弹起。所幸看到了Androi…

c++字符串拼接(对标C语言的sprintf)

C语言的sprintf 我们在一些场景下需要先将字符串拼接起来再使用。 如&#xff1a; 我们要输出一个数组中的数据&#xff0c;输出的格式为--第几个数据为什么&#xff1f; 在这种情况下每次输出的字符串都是不一样的&#xff0c;我们可以通过循环来不断增加i的值&#xff0c;通…

“华为杯“第四届中国研究生数学建模竞赛-D题:邮路规划与邮车调度

目录 摘 要&#xff1a; 1.问题的重述 2.模型的假设与符号说明 2.1 针对本问题&#xff0c;本文做出如下假设 2.2 符号说明 3.问题的数学模型 4.问题的求解 4.1 问题一的求解 4.1.1 最少邮车数的求法 4.1.2 邮路规划及路径选择 4.1.3 问题的求解结果 4.2 问题二的求…

隧道应用3-Cobalt Strike正反向连接多层内网

Cobalt Strike 正向连接多层内网&#xff1a; teamserver 不允许访问 B &#xff0c;但是服务器上A有权限&#xff08; A 与 B 在同一网段&#xff09;&#xff0c;若 A 服务上已经有了 cs 的后门&#xff0c;则可以通过 cs 的正向连接去连接 B &#xff0c;在 teamserver 通…

Java 怎么判断对象是否可以被回收?

Java 怎么判断对象是否可以被回收&#xff1f; 在 Java 中&#xff0c;对象的垃圾回收是由垃圾回收器&#xff08;Garbage Collector&#xff09;负责的。判断对象是否可以被回收通常是通过对象的引用计数、可达性分析等机制来完成的。以下是一些判断对象是否可以被回收的方法…

datavrap可视化设计器使用手册

datavrap使用手册 一、产品简介 datavrap是一个动态数据可视化设计器&#xff0c;通过简单配置生成可视化视频&#xff0c;图片和gif。 站长&#xff1a;B站UP&#xff0c;夹克mnnm 这个产品的灵感是在做B站视频时&#xff0c;觉得每次通过修改代码录屏实现视频制作太过于繁琐&…

基于Matlab/Simulink的MIL仿真验证解决方案

文章目录 需求追溯 虚拟环境 模型检查 仿真验证 测试报告 参考文献 针对模型开发阶段的ECU算法&#xff0c;可以很直接地将其与虚拟车辆模型连接起来&#xff0c;通过MIL对其进行验证和确认。可以在开发过程的早期检测到设计错误和不正确的需求&#xff0c;也有助于安全地…

浅析爱泼斯坦事件 —— 弱电控制强电原理

据网络文字与视频资料&#xff0c;爱泼斯坦事件是犹太精英阶层&#xff0c;为了掌控美国国家机器为犹太利益集团服务&#xff0c;而精心设下的一个局。本文先假设这个结论成立&#xff0c;并基于此展开讨论。 我们知道&#xff0c;弱电管理强电是电气工程中的一门专门学问&…

SouthernBiotech抗荧光淬灭封片剂

荧光淬灭又称荧光熄灭或萃灭&#xff0c;是指导致特定物质的荧光强度和寿命减少的所有现象。引起荧光淬灭的物质称为荧光淬灭剂。SouthernBiotech专门开发的Fluoromount-G系列荧光封片剂是以甘油为基础&#xff0c;加入抗荧光淬灭剂&#xff0c;可明显降低荧光淬灭现象&#xf…

【工具】tmux简单用法

tmux 是一个终端复用工具&#xff0c;允许你在单个终端窗口中运行多个终端会话&#xff0c;并在它们之间切换。它提供了分割窗格、多窗口和会话管理等功能&#xff0c;使得在终端中更加高效地工作。 以下是一些 tmux 的基本概念和简单应用&#xff1a; 会话 (Session): 一个 t…