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.想要获取本文源码,点击前往吧

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

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

相关文章

Cweek1

C语言学习 一.初识C语言 1.如何写C代码 ①创建工程 ②添加源文件&#xff1a;c文件&#xff1a;源文件&#xff0c;h文件&#xff1a;头文件 代码实例&#xff1a; main函数是程序的入口&#xff0c;有且仅有一个 在C语言中&#xff0c;#include <stdio.h> 是一个预…

嵌入式学习-时钟树

时钟树 时钟分类 时钟树框图 LSI与LSE HSI、HSE与PLL 系统时钟的产生 AHB、APBx的时钟配置 相关寄存器 寄存器部分的细节内容请参考手册。 相关库函数

PyQt5中Text Edit的常用方法和常用信号

文章目录 1. 简介1.1. 常用方法&#xff1a;1.2 常用信号&#xff1a; 2. Text Edit的常用方法使用案例3. Text Edit 的常用信号使用案例 1. 简介 QTextEdit是PyQt中用于显示和编辑文本的强大组件之一。它提供了丰富的功能&#xff0c;可以显示普通文本、富文本和HTML文本&…

e行64位V11.17.4 安卓全局虚拟定位APP

e行最新版11.17.4 支持全局虚拟位置 小米手机 百度地图 高德地图 实测成功 其他app自测 不一定支持所有app 下载&#xff1a;https://www.123pan.com/s/HAf9-tsyCh.html

java多线程 线程交替执行(同步)的各种实现方案

目录 java多线程 线程交替执行&#xff08;同步&#xff09;的各种实现方案需求 指定具体执行顺序实现一&#xff1a;wait_notify机制 Thread标志位实现二&#xff1a;lock_condition机制 Thread标志位实现三&#xff1a;semaphore信号量 不指定具体执行顺序&#xff0c;只交…

vue预览PDF文件的方法

1.使用iframe标签预览PDF文件 1.1页面结构 html <iframe:src"fileUrl"id"iframeBox"ref"iframeRef"frameborder"0"style"width: 100%; height: 800px"></iframe>1.2 js代码 export default {data() {return {…

Electron + GitHub Actions | 自动化流程详解(下)

自动化部署 上篇介绍了 Electron Forge 打包应用教程。在实际开发中&#xff0c;自动化是提升效率和产出质量的关键。本篇我们将详细介绍如何将构建和发布 Electron 应用的过程自动化。 代码挂在 GitHub 仓库上&#xff0c;如果有帮助&#xff0c;记得给仓库点个赞&#xff1a…

MQTT学习(一)

MQTT是一种与HTTP类似的应用层协议。 在某些物联网应用中&#xff0c;MQTT优于HTTP。 首先&#xff0c;HTTP是用于客户端服务器计算的以文档为中心的请求-响应协议。 HTTP是万维网的基础&#xff0c;但它不是专门为机器之间通信而设计的。 MQTT是一种机器对机器、以数据为中…

机器学习在数据分析中的应用:探索未来趋势

引言 数据分析是机器学习应用最广泛和最成熟的领域之一。随着大数据时代的到来&#xff0c;企业和组织正越来越多地利用机器学习技术来从海量数据中提取有价值的洞察。在本博客中&#xff0c;我们将探讨机器学习在数据分析中的几个关键方向、场景和应用实例。 数据分析的方向…

Flutter for Web:跨平台移动与Web开发的新篇章

Flutter是Google推出的一款开源的UI工具包&#xff0c;用于构建高性能、高保真度的跨平台应用程序。Flutter最初专注于移动平台&#xff0c;但随着Flutter for Web的推出&#xff0c;它也扩展到了Web开发领域。本文将深入解析Flutter for Web的架构、核心概念、开发流程、性能优…

ALOHA多相机Realsense配置以及数据采集

简介 在诸多模仿学习的工作中&#xff0c;均使用到多个Realsense相机作为数据输入端。本文探讨多个Realsense的ros节点启动。 环境配置 librealsense realsense_ros#python h5py opencv-python多相机启动 ALOHA工程仅需要彩色图像进行输入。因此需要只保留彩色图像&#xf…

树与图的一些计数问题(图论学习总结部分内容)

文章目录 前言七、树与图的一些计数问题&#xff08;偏数学&#xff09;容斥原理知识点例题 e g 1 : eg1: eg1: 完全子图染色问题 e g 2 : eg2: eg2: D A G DAG DAG计数 生成树计数知识点例题 环计数问题练习题 前言 由于图论学习总结内容过多&#xff0c;全放在一篇博客过于…

QLineEdit文本长度和框宽度的比较问题

开发环境 操作系统: 银河麒麟V10SP1qt版本 : 5.12.12背景 测试同事提出,QLineEdit中设置的占位符(由setPlaceholderText函数设置)文本能完全显示时不要显示tips,不完全显示时要显示tips,这样显得简洁。 想了想逻辑上比较好实现,那就是占位符文本长度大于QLineEdit宽度就显示…

Python pyqtgraph库:高效可视化数据的利器

更多Python学习内容&#xff1a;ipengtao.com 在数据科学和工程领域&#xff0c;数据可视化是一项非常重要的任务。Python pyqtgraph库是一个功能强大的数据可视化工具&#xff0c;可以帮助用户快速、高效地可视化各种类型的数据&#xff0c;包括实时数据、大数据集和3D数据等。…

PostgreSQL-常用函数和操作符-2

0. WITH 在 PL/pgSQL 中&#xff0c;WITH 子句通常用于创建一个临时结果集&#xff0c;这个结果集在执行 SQL 查询时使用。这个临时结果集通常被称为一个公共表表达式&#xff08;Common Table Expression, CTE&#xff09;。CTE 允许您在查询中引用它&#xff0c;就像引用一个…

Kerberos-梳理

服务端: yuminstall-ykrb5-server vim/var/kerberos/krb5kdc/kdc.conf [kdcdefaults] kdc_ports=88 kdc_tcp_ports=88 [realms] HADOOP.COM={#master_key_type=aes256-cts acl_file=/var/kerberos/krb5kdc/kadm5.acl dict_file=/usr/share/dict/words admin_keytab=/var/kerbe…

英伟达解码性能NVDEC

如果你能打开官网&#xff0c;请看这里&#xff1a; NVDEC Application Note 下面是摘录&#xff1a;

STL---排序模板参数

map 对map进行排序 首先一定要注意map模板类的第三个模板参数&#xff0c;这个参数决定元素按键值升序或者降序在map中的存储方式&#xff1a; 默认&#xff1a;less<key>升序----- < -----第一个小于取第一个 可设置&#xff1a;greater<key>降序-------…

VC 编程开发中的 封装类 :log日志类 和SQL server 操作类 源代码

VC 编程开发中的 封装类 &#xff1a;日志类 和SQL server 操作类 源代码 在VC&#xff08;Visual C&#xff09;开发中&#xff0c;日志文件输出是一个至关重要的环节&#xff0c;它对于程序调试、问题排查以及系统监控等方面都具有不可替代的作用。以下是对日志文件输出在VC开…

ASP.NET仪器设备管理系统设计与实现

摘 要 文中以某中小型企业的设备管理为例&#xff0c;对设备管理系统的设计与应用进行研究&#xff0c;旨在通过设备管理系统提高内部设备的利用率及实现其最大的经济效益。文中首先对设备管理的现状及其重要性进行了分析&#xff0c;分析实现设备管理信息系统的必要性与可行…