HTML静态网页成品作业(HTML+CSS+JS)——在线购物商城网页设计制作(4个页面)

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

文章目录

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


一、作品介绍

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

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="header"><div class="ww"><div class="logo">在线购物商城</div><div class="search"><input type="text" placeholder="请输入要搜索的商品..."><button>搜索</button></div></div></div><div class="nav"><div class="ww"><ul><li class="ac"><a href="index.html">首页</a></li><li><a href="goods.html">商品列表</a></li><li><a href="business.html">热门商家</a></li><li><a href="login.html">我要登录</a></li></ul></div></div><div class="imgs"><img src="./images/img1.jpg" alt=""><img src="./images/img2.png" alt="" class="hide"></div><div class="main"><div class="ww"><div class="main_item"><div class="item_tit">新品推荐</div><div class="item_list"><div class="item_one"><div class="item_img"><img src="./images/p1.jpg" alt=""></div><div class="item_name">Apple iPhone14  Pro Max(A2896) 全网通5G手机【晒单赠移动电源】</div><div class="item_price">9249.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p2.jpg" alt=""></div><div class="item_name">三星(SAMSUNG)S23 系列手机</div><div class="item_price">3241.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p3.jpg" alt=""></div><div class="item_name">索尼(SONY)PlayStation VR2 PS5专用 虚拟现实头盔头戴式设备</div><div class="item_price">2249.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p4.jpg" alt=""></div><div class="item_name">戴尔(Dell)灵越5430 14英寸 2.5K轻薄笔记本电脑(银色)</div><div class="item_price">4249.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p5.jpg" alt=""></div><div class="item_name">松下(Panasonic)家用全自动意式咖啡机NC-EA801HSQ(灰色)</div><div class="item_price">4999.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p6.jpg" alt=""></div><div class="item_name">九阳(Joyoung)家用多功能高速破壁机L18-P771(黑+银)</div><div class="item_price">1799.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p7.jpg" alt=""></div><div class="item_name">产地日本 进口日立 (HITACHI)615升 六门冰箱 R-WX650KC(XW)(水晶白)</div><div class="item_price">29249.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p8.jpg" alt=""></div><div class="item_name">格力(GREE)冷静王 1匹 变频空调 26GW/(26549)FNhAc-B1(WIFI)(皓雪白)</div><div class="item_price">3799.00</div></div></div></div><div class="main_item"><div class="item_tit">热销榜单</div><div class="item_list"><div class="item_one"><div class="item_img"><img src="./images/p9.jpg" alt=""></div><div class="item_name">华为(HUAWEI)Mate50 RS 保时捷设计 12+512G 鸿蒙旗舰手机</div><div class="item_price">12699.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p10.jpg" alt=""></div><div class="item_name">微软(Microsoft)Xbox Series X 游戏机(国行版)</div><div class="item_price">4399.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p11.jpg" alt=""></div><div class="item_name">Apple MacBook Pro 16英寸笔记本 【2023款】</div><div class="item_price">19249.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p12.jpg" alt=""></div><div class="item_name">索尼(SONY)65英寸 QD-OLED 安卓智能电视 XR-65A95K(石板黑)</div><div class="item_price">23999.00</div></div></div></div></div></div>

五、源码获取

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

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

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

相关文章

手机图片恢复不求人:手动找回丢失的照片!

无论是外出旅行、聚会还是日常点滴&#xff0c;我们总是习惯用手机记录下来&#xff0c;让美好的瞬间定格在一张张照片中。然而&#xff0c;有时因为误删、清空缓存或是更换手机&#xff0c;那些珍贵的照片突然消失了。手机图片恢复有什么简单易行、容易上手的方法吗&#xff1…

头歌答案哪里找

头歌EduCoder平台实训答案在此&#xff1a;实训笔记 有些作业是在难写&#xff0c;参考上面的连接地址吧&#xff0c;看看有没有自己想要的解答。

容器组件:角标组件,纵向拖动组件(HarmonyOS学习第四课【4.2】)

Badge&#xff08;角标组件&#xff09; 可以附加在单个组件上用于信息标记的容器组件。 说明 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 支持单个子组件。 说明 子组件类型&#xff1a;系统组件…

Win端交叉编译鸿蒙Ohos Native层第三方库流程

1. 概述 鸿蒙端SDK开发需要依赖使用到的三方库(如OpenCV、其他C库等)&#xff0c;以下为Windows端交叉编译Ohos端三方库流程 2. 准备工作 与Android NDK交叉编译相类似&#xff0c;我们首先需要下载OpenHarmony NDK(包含在OpenHarmony SDK中)&#xff0c;这里笔者使用IDE中自…

Online RL + IL : Active Policy Improvement from Multiple Black-box Oracles

ICML 2023 paper code 紧接上一篇MAMBA&#xff0c;本文在同种问题设定下的在线模仿学习方法。 Intro 文章提出了一种新的模仿学习算法&#xff0c;名为 MAPS&#xff08;Max-aggregation Active Policy Selection&#xff09;和其变体 MAPS-SE&#xff08;Max-aggregation A…

SSL证书对于网络安全的重要作用

SSL证书是一种数字证书&#xff0c;它通过加密技术确保了客户端&#xff08;如浏览器&#xff09;与服务器之间的数据传输安全。当一个网站安装了SSL证书后&#xff0c;用户在浏览器地址栏中可以观察到HTTPS&#xff08;超文本传输安全协议&#xff09;前缀和挂锁图标&#xff…

点量云流分享:关于实时渲染云推流技术

提到云串流或者云推流很多人可能和游戏关联起来&#xff0c;其实这个技术的应用领域不仅仅是游戏&#xff0c;还有云上旅游、考古、智慧园区、智慧城市、虚拟仿真等等行业。其解决的问题是将一些大型的3D应用程序放在云端&#xff0c;程序在运行的时候也是在云端&#xff0c;这…

可视化大屏C位图:生产线,状态一目了然。

在可视化大屏中&#xff0c;将生产线作为C位图&#xff08;核心位图&#xff09;具有以下价值&#xff1a; 实时监控 生产线作为C位图可以实时展示生产线上的各个环节和工艺的运行状态。通过C位图&#xff0c;操作员可以直观地了解生产线的整体运行情况&#xff0c;及时发现异…

数仓建模理论 之 维度建模

说起维度建模&#xff0c;你不得不知道以下几个概念&#xff1a;事实表、维度表、星型模型、雪花模型、星座模型 维度建模 Ralph Kimball推崇数据集市的集合为数据仓库&#xff0c;同时也提出了对数据集市的维度建模&#xff0c;将数据仓库中的表划分为事实表、维度表两种类型…

为什么状态机最好要采用独热码

在状态机的编码方式中&#xff0c;我们常用到三种编码方式&#xff0c;分别是二进制编码、格雷码、独热码。 二进制编码&#xff1a;也称连续编码&#xff0c;属于压缩编码方式&#xff0c;可以使用较少的触发器对应更多的状态&#xff1b; 格雷码&#xff1a;属于压缩编码方…

uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新

前言 最近公司开发新的小程序项目&#xff0c;经调研综合所有人员考虑&#xff0c;用uni-app Vue3tsvite技术栈开发&#xff1b;而官方推荐使用HBuilderX开发&#xff0c;而考虑到目前公司所有前端人员对VsCode更熟悉&#xff0c;故此总结了一下uniapp项目使用vscode代替HBuild…

什么是元宇宙?

元宇宙&#xff08;Metaverse&#xff09;是一个由虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff09;、区块链、人工智能&#xff08;AI&#xff09;等多种先进技术融合构建的数字化虚拟世界。这个世界不仅限于一个简单的虚拟环境&#xff0c;而是一个能…

Flink ValueStateDescriptor使用实例

在Apache Flink中&#xff0c;ValueStateDescriptor 是用于定义状态的一种数据结构&#xff0c;它允许你为每个键&#xff08;key&#xff09;存储一个值&#xff08;value&#xff09;。状态是 Flink 流处理模型的核心概念之一&#xff0c;它允许你在任务失败和恢复时保持数据…

网站开发初学者指南:2024年最新解读

在信息交流迅速的时代&#xff0c;网页承载着大量的信息&#xff0c;无论你知道还是不知道&#xff0c;所以你知道什么是网站开发吗&#xff1f;学习网站开发需要什么基本技能&#xff1f;本文将从网站开发阶段、网站开发技能、网站开发类型等角度进行分析&#xff0c;帮助您更…

40-2 了解与安装堡垒机

堡垒机 一、堡垒机与 JumpServer 1. 堡垒机 定义: 堡垒机(Bastion Host)是一种网络安全设备,用于保障网络和数据不受外部和内部用户的入侵和破坏。它通过各种技术手段监控和记录运维人员对网络内各种设备的操作行为,以便集中报警、及时处理和审计定责。功能: 权限控制:…

Java 自动生成数据库设计文档

背景&#xff1a;有时候急需要数据库设计文档&#xff0c;手写太麻烦&#xff0c;这里介绍一款开源组件&#xff0c;可以自动根据数据库连接生成数据库设计文档 废话不多说&#xff0c;直接上代码 导入maven包 <dependency><groupId>org.freemarker</groupId>…

Linux服务器的资源分配和使用情况分析相关指令

服务器资源分配情况 CPU资源 CPU型号: cat /proc/cpuinfo | grep "model name" | cut -f2 -d: | uniq -c输出示例&#xff1a;1 Intel(R) Xeon(R) CPU E5-2697 v4 2.30GHz 物理CPU核心数: cat /proc/cpuinfo | grep "cpu cores" | uniq输出示例&#xff…

数学建模(科普)

数学建模&#xff0c;就是根据实际问题来建立数学模型&#xff0c;对数学模型来进行求解&#xff0c;然后根据结果去解决实际问题。 当需要从定量的角度分析和研究一个实际问题时&#xff0c;人们就要在深入调查研究、了解对象信息、作出简化假设、分析内在规律等工作的基础上…

数据分析案例-印度美食数据可视化分析

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

“安”网守护,“乐享”服务——革新教育行业运维与安全体验,锐捷发布两大创新方案

5月11日,锐捷网络举办以“’安‘网联动, ’乐享‘运维”为主题的线上发布会,正式发布了锐捷乐享教育订阅服务方案,以及以新一代智能安全网关为核心的安全防护解决方案。 锐捷网络教育系统部总经理马雪峰为发布会致开场辞,他指出,在数字化浪潮席卷全球的今天,教育行业正进来前所…