当前位置: 首页 > news >正文

HTML静态网页成品作业(HTML+CSS+JS)——华为商城网页(1个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,使用Javacsript代码实现首页图片切换轮播效果,共有1个页面

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="header"><div class="w"><a href="" class="logo"><img src="./images/logo.png" alt=""></a><ul class="nav"><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="">智慧出行</a></li><li><a href="">教育商店</a></li></ul><div class="icons"><a href=""><img src="./images/search.png" alt="" class="icon1 s"><img src="./images/search2.png" alt="" class="icon2 s"></a><a href=""><img src="./images/cart.png" alt="" class="icon1 c"><img src="./images/cart2.png" alt="" class="icon2 c"></a><a href=""><img src="./images/list.png" alt="" class="icon1 l"><img src="./images/list2.png" alt="" class="icon2 l"></a></div></div></div><div class="banner"><img id="banner_img1" class="banner_img active" src="images/1.webp" alt=""><img id="banner_img2" class="banner_img" src="images/2.webp" alt=""><img id="banner_img3" class="banner_img" src="images/3.webp" alt=""><div class="dots"><div id="dot1" class="dot active"  onmousemove="changeBanner(1)"></div><div id="dot2" class="dot"  onmousemove="changeBanner(2)"></div><div id="dot3" class="dot"  onmousemove="changeBanner(3)"></div></div></div><div class="cats"><div class="w"><a href=""><img src="./images/i1.png" alt=""><div>手机</div></a><a href=""><img src="./images/i2.png" alt=""><div>笔记本</div></a><a href=""><img src="./images/i3.png" alt=""><div>平板</div></a><a href=""><img src="./images/i4.png" alt=""><div>台显</div></a><a href=""><img src="./images/i5.png" alt=""><div>手写笔</div></a><a href=""><img src="./images/i6.png" alt=""><div>办公周边</div></a><a href=""><img src="./images/i7.png" alt=""><div>打印机</div></a><a href=""><img src="./images/i8.png" alt=""><div>储存神器</div></a></div></div>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

相关文章:

HTML静态网页成品作业(HTML+CSS+JS)——华为商城网页(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;使用Javacsript代码实现首页图片切换轮播效果&#xff0c;共有1个页面…...

【吃透Java手写】5-RPC-简易版

【吃透Java手写】RPC-简易版-源码解析 1 RPC1.1 RPC概念1.2 常用RPC技术或框架1.3 初始工程1.3.1 Productor-common&#xff1a;HelloService1.3.2 Productor&#xff1a;HelloServiceImpl1.3.3 Consumer 2 模拟RPC2.1 Productor2.2 模拟一个RPC框架2.2.1 HttpServer2.2.2 Http…...

express 本地https服务 接口、静态文件,并支持跨域

var express require(express); var app express(); //设置跨域访问 app.all(*, function (req, res, next) {res.header(Access-Control-Allow-Origin, *);res.header(Access-Control-Allow-Credentials, true);res.header(Access-Control-Allow-Headers, Content-Type,Cont…...

从零手写实现 tomcat-08-tomcat 如何与 springboot 集成?

创作缘由 平时使用 tomcat 等 web 服务器不可谓不多&#xff0c;但是一直一知半解。 于是想着自己实现一个简单版本&#xff0c;学习一下 tomcat 的精髓。 系列教程 从零手写实现 apache Tomcat-01-入门介绍 从零手写实现 apache Tomcat-02-web.xml 入门详细介绍 从零手写…...

yarn 安装以及报错处理

前一种报错是由于没有安装yarn导致的&#xff0c;使用以下命令即可安装&#xff1a; npm install -g yarn 如果成功安装&#xff0c;将显示Yarn的版本号。 yarn --version 第二种报错是因为系统上的执行策略限制导致的。执行策略是一种安全功能&#xff0c;用于控制在计算机…...

31万奖金池等你挑战!IJCAI 2024 第九届“信也科技杯”全球AI算法大赛正式开赛!聚焦AI尖端赛题!

文章目录 ⭐️ 赛事概况⭐️ 赛事奖励⭐️ 赛事日程速览⭐️ 报名通道与赛事交流群⭐️ 关于 “信也科技杯”⭐️ 关于信也科技 ⭐️ 赛事概况 随着语音合成技术的不断进步,合成语音与真实语音之间的界限变得模糊,这不仅对数据安全构成威胁,也对科技伦理提出了新的要求。 第九…...

线性表—栈的实现

目录 栈的概念及结构 栈的实现 创建栈 栈的初始化 入栈 出栈 取出栈顶数据 判断栈是否为空 有效数据个数 栈的销毁 全代码 stack.h stack.c 应用 题目 示例 解题思路 代码实现 栈的概念及结构 栈是一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入…...

react+antd --- 日期选择器,动态生成日期表格表头

先看一下效果---有当前月的日期 技术&#xff1a; 1&#xff1a; react 2&#xff1a;antd-UI库 -- table 3&#xff1a;moment--时间处理库 代码效果&#xff1a; import { Button, DatePicker, Table } from antd; import { useEffect, useState } from react; import momen…...

webgl入门-js与着色器间的数据传输

js与着色器间的数据传输 前言 课堂目标 使用js向着色器传递数据获取鼠标在canvas 中的webgl 坐标系位置 知识点 attribute 变量gl.vertextAttribute3f() 的同族函数鼠标在canvas 中的css 位置转webgl 坐标位uniform 变量gl.uniform4f() 的同族函数 第一章 用js控制一个点…...

springmvc异常处理

springmvc异常处理 spring中有三种方式可以优雅的处理异常 使用ExceptionHandler 使用HandlerExceptionResolver 使用ControllerAdviceExceptionHandler 使用ExceptionHandler 该方式只在指定的Controller有效&#xff0c;不会对其他的Controller产生影响 ControllerRequestMap…...

可拖动、连线的React画布组件有哪些? 官网分别是什么?

下面是一些常用的可拖动、连线的React画布组件以及它们的官方网站&#xff1a; react-dagre-d3&#xff1a;这是一个基于React和D3.js的可拖动、连线的图形编辑器组件。它使用DAG&#xff08;有向无环图&#xff09;布局算法&#xff0c;支持节点拖拽、连线、缩放等功能。官网&…...

专访 Staynex 创始人 Yuen Wong:酒店行业的变革者

整理&#xff1a;Tia&#xff0c;Techub News 传统酒店业其实已经很中心化了&#xff0c;几大巨头 OTA 平台几乎已经完成对行业的垄断&#xff0c;而酒店商家也不得不受制于平台的规则制度&#xff0c;向平台支付高比例的费用。Staynex 看到了其中的机会&#xff0c;并想利用区…...

最新版Ceph( Reef版本)块存储简单对接k8s(上集)

当前ceph 你的ceph集群上执行 1.创建名为k8s-rbd 的存储池 ceph osd pool create k8s-rbd 64 642.初始化 rbd pool init k8s-rbd3 创建k8s访问块设备的认证用户 ceph auth get-or-create client.kubernetes mon profile rbd osd profile rbd poolk8s-rbd部署 ceph-rbd-csi c…...

稳态大面积光伏组件IV测试太阳光模拟器

稳态大面积光伏组件IV测试太阳光模拟器是太阳能光伏组件质量检测和评价的重要步骤之一。本文将介绍光伏组件IV测试的原理及标准板选择。 I. 光伏组件IV测试原理 光伏组件IV测试即电流电压特性测试&#xff0c;是评估光伏组件性能的重要手段。其测量的主要参数为组件的电流和电…...

编写HTTP协议代理的一些知识(源码)

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 早期上网经常需要使用代理服务…...

LabVIEW天然气压缩因子软件设计

LabVIEW天然气压缩因子软件设计 项目背景 天然气作为一种重要的能源&#xff0c;其压缩因子的准确计算对于流量的计量和输送过程的优化具有关键意义。传统的计算方法不仅步骤繁琐&#xff0c;而且难以满足现场快速响应的需求。因此&#xff0c;开发一款既能保证计算精度又便于…...

GCP谷歌云有什么数据库类型,该怎么选择

GCP谷歌云提供的数据库类型主要包括&#xff1a; 关系型数据库&#xff1a;这类数据库适用于结构化数据&#xff0c;通常用于数据结构不经常发生变化的场合。在GCP中&#xff0c;关系型数据库选项包括Cloud SQL和Cloud Spanner。Cloud SQL提供托管的MySQL、PostgreSQL和SQL Se…...

项目经理之路:裁员与内卷下的生存策略

作为一名项目经理&#xff0c;身处这个充满挑战与机遇的行业中&#xff0c;今年所面临的裁员潮和内卷化趋势无疑给我的工作带来了前所未有的压力。然而&#xff0c;正是这些压力和挑战&#xff0c;让我们更加深刻地思考了在这个快速变化的时代中&#xff0c;我们项目经理应该如…...

MWM触摸屏工控机维修TEM-EV0 EN00-Z312yy-xx

触摸屏维修是一个比较复杂的过程&#xff0c;并且其中会涉及到各个部件的问题&#xff0c;这对于操作人员来说&#xff0c;关键在于是否可以找到问题所在。维修过程中建议先检查各接线接口是否出现松动&#xff0c;然后检查串口及中断号是否有冲突&#xff0c;若有冲突&#xf…...

idm下载到99.99%不动了 idm突然不下载了 idm下载到最后没速度咋办 IDM下载后没网了是怎么回事

idm能够帮助我们下载不同类型的网页视频&#xff0c;并且基于多线程下载技术的助力下使其下载速度比原来提升数倍以上&#xff0c;因此成为了许多朋友下载的小助手。但也有朋友反映idm下载网页视频超时连接不上&#xff0c;idm下载网页视频突然停止&#xff0c;究竟这些情况我们…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...