首页 > 其他分享 >【网页设计期末/课程设计】类Steam的游戏商城(纯前端)

【网页设计期末/课程设计】类Steam的游戏商城(纯前端)

时间:2024-12-30 20:27:23浏览次数:3  
标签:课程设计 网页 轮播 按钮 点击 鼠标悬停 跳转 Steam 页面

代写C语言、C++、Java、Python、HTML、JavaScript、vue、MySQL相关编程作业,
长期接单,信誉有保证,如有任何问题或需要请加文章末尾推广QQ。
在售模板目录:点击这里跳转

本文资源:


1.题目要求

题目描述
编写HTML项目,要求至少包含五个页面,至少实现导航栏、轮播图、下拉菜单以及基本的增删改查功能

2.视频演示

<iframe allowfullscreen="true" data-mediaembed="bilibili" frameborder="0" id="EEKKuEjz-1735555274471" src="https://player.bilibili.com/player.html?aid=113741303717848"></iframe>

【网页设计期末/课程设计】类Steam的游戏商城(纯前端)

3.项目介绍

首先项目包含五个页面,分别为首页、登录页、管理员页面、查询页、详情页。

1.首页

在这里插入图片描述
鼠标悬停于导航栏时显示下拉菜单,点击右上角“登录”文字跳转到登陆页,点击“语言”文字打开文字选项菜单,点击右侧查询按钮跳转到查询页面。
在这里插入图片描述
轮播图部分点击两侧箭头实现轮播图左右轮播,点击下方控制按钮显示对应轮播,点击右侧小图片切换左侧大图片显示内容,黑神话悟空部分包含一个“详情”按钮,点击按钮跳转到游戏详情页。
在这里插入图片描述
下方两处轮播与首个轮播类似,“按类别浏览”部分鼠标悬停时放大。
在这里插入图片描述
热门商品部分鼠标悬停于左侧时右侧显示对应内容介绍,默认显示第一项。

2.登录页

在这里插入图片描述
登录页面输入账号“admin”和密码“111”后可以跳转管理员界面,该默认账号密码可以在“LoginPage.js”文件的第39行处修改。
在这里插入图片描述
点击下方文字可以切换到注册页,由于没有后端,注册页不保存注册信息,输入正确格式的账号密码后即可提示注册成功。

3.管理员页面

在这里插入图片描述
管理员界面点击文字即可修改用户账号、密码和用户名,点击删除按钮删除对应用户,点击“添加用户”按钮添加一个新用户,同样由于没有后端,保存功能未实现。
点击左侧“退出”标签返回主页。

4.查询页

在这里插入图片描述
查询页面点击右侧排序依据展开排序方式菜单,点击切换对应文字。

5.详情页

在这里插入图片描述
图片部分点击小图切换大图,鼠标悬停时各标签变色。

标签:课程设计,网页,轮播,按钮,点击,鼠标悬停,跳转,Steam,页面
From: https://blog.csdn.net/weixin_47040861/article/details/144832011

相关文章

  • 阿里云国际站代理商:阿里云服务器网页访问不了怎么办?
    如果您的阿里云服务器网页无法访问,可以尝试以下步骤来排查和解决问题:•检查安全组设置:•确保阿里云ECS的安全组设置中已添加允许HTTP(80端口)和HTTPS(443端口)的入站规则。如果没有添加,可以通过安全组管理界面添加相应的规则。•检查服务器软件:•确认是否已安装Web服务器软......
  • 国标GB28181网页直播平台LiteGBS遇到解码器密码忘记应如何操作?
    在视频监控管理领域,尤其是采用国标GB28181协议的系统中,LiteGBS国标GB28181软件以其卓越的性能和兼容性受到广泛青睐。然而,用户在使用过程中可能会遇到解码器密码遗忘的问题,这不仅影响了监控系统的效能,也可能对安全管理造成隐患。为了确保视频监控系统的稳定运行和高效管理,必须对这......
  • 腾讯云 AI 代码助手:从 0 到 1 打造自己的专属产品网页
    手把手教零基础前端小白运用腾讯云AI代码助手,从0到1打造自己的专属产品网页:安装腾讯云AI代码助手在开始编码之前:我在IDE插件市场搜索腾讯云AI代码助手,本教程以在VisualStudioCode中为例。1、下载VisualStudioCode2、在插件时长搜索—腾讯云AI代码助手,秒安装......
  • qt/c++ 学习笔记之网页照片爬虫
    *注意:本爬虫使用的qt版本为5.14.2,使用的是qtwebkit类是自己配置了qtwebkit和对应qt版本的openssl,其中qtwebkit类在qt5.15和qt6版本已经删除,需要自己私下配置qtwebkit和对应qt版本的openssl头文件widget.h#ifndefWIDGET_H#defineWIDGET_H#include<QWidget>#include......
  • 15.保护环境主题网页 Web前端网页制作 大学生期末大作业 html+css
    目录一、前言二、网页效果三、代码展示1.HTML2.CSS四、更多推荐一、前言本案例以保护环境为主题设计,应用html+css,dic+css布局,代码简单。本网页支持如Dreamweaver、HBuilder、Text、Vscode等任意html编辑软件进行编辑修改;支持包括IE、Firefox、Chrome、Safari主流浏......
  • Linux shell 提取 html网页中table表格内容
    前言全局说明一、说明1.1环境:Windows11家庭版23H222631.3737Python3.8.10(tags/v3.8.10:3d8993a,May32021,11:48:03)[MSCv.192864bit(AMD64)]onwin32Windows7旗舰版VisualStudio2013Ubuntu18.04.6LTS(Linuxqt-vm5.4.0-150-generic#167~18......
  • 186. 大学生HTML期末大作业 ―【 Bootstrap多肉植物主题响应式自适应网页(6页)】 Web前
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强欢迎来到我的CSDN主页!Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等,更多优质博客文......
  • 118. Web前端网页案例——【黑色的电影主题网页( 4页)】 大学生期末大作业 html+css+js
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐♬♬♬欢迎光临我的CSDN!这里是Web前端网页案例大集汇,有各行各业的前端网页案例,每天会持续更新!如果你对Web前端......
  • 在网页中加入CSS样式
    在网页中加入CSS样式可以通过多种方式实现,以下是一些常见的方法: 1.内联样式:直接在HTML元素的style属性中定义CSS样式。这种方法适用于对单个元素进行快速样式调整,但不利于样式的复用和维护。【html】<pstyle="color:red;font-size:16px;">这是一个带有内联样式的......
  • 云服务器网页打开太慢,怀疑受到攻击
    根据您的描述,所有站点在该服务器上打开都非常缓慢,甚至有时无法访问。这类问题可能由以下几个原因引起:服务器资源不足:服务器的CPU、内存或带宽资源可能不足,导致响应速度变慢。建议您检查服务器的资源使用情况,确保有足够的资源支持网站运行。可以通过命令行工具如top或htop查看......