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…

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

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

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;将数据仓库中的表划分为事实表、维度表两种类型…

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

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

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

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

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

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

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

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

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

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

未来已来:Spring Cloud引领微服务新纪元

文章目录 1. 引言1.1 微服务架构的兴起与挑战1.2 引入Spring Cloud作为微服务解决方案的重要性 2. 背景介绍2.1 微服务架构概述2.2 Spring Cloud的定位2.3 Spring Cloud特性概览 3. Spring Cloud核心组件3.1 Eureka - 服务发现3.2 Hystrix - 断路器3.3 Ribbon - 客户端负载均衡…

Vue框架—快速入门

目录 &#x1f516; 认识VUE &#x1f516; 第一个Vue程序 &#x1f516; Vue指令 &#x1f3f7;️v-text &#x1f3f7;️v-html &#x1f3f7;️v-model &#x1f3f7;️v-bind &#x1f3f7;️v-on &#x1f3f7;️v-if / v-show &#x1f516; 认识VUE ▐ 在学习…

Spring Security实现用户认证一:简单示例

Spring Security实现用户认证一&#xff1a;简单示例 1 原理1.1 用户认证怎么进行和保存的&#xff1f;认证流程SecurityContext保存 2 创建简单的登录认证示例2.1 pom.xml依赖添加2.2 application.yaml配置2.3 创建WebSecurityConfig配置类2.4 测试 1 原理 Spring Security是…

【AI绘画】Stable diffusion初级教程08——提示词(prompt)该如何写

今天是一篇干货&#xff0c;干的喝水的那种…… 写之前呢&#xff0c;先给大家打个比方&#xff1a;现在刚入门学习SD的相当于刚上学的小学生&#xff0c;提示词就相当于作文&#xff0c;还是英语作文&#xff0c;如果你总是抄抄抄&#xff0c;不知道作文的要点&#xff0c;语法…

全球知名哲学家思想家颜廷利:将人生黑暗视为一种机遇

在时间的长河中&#xff0c;我们短暂的人生不过是眨眼间的光景。然而&#xff0c;正是这短暂的旅程给予了我们无限的可能性和转变的契机。我们应该勇敢地面对生活中的暗夜&#xff0c;将其视作成长的土壤&#xff0c;让自我在其中焕发出独特的光辉。 当我们在生命的历程中暂停脚…

React 状态管理库深度对比:在做技术选型的时候如何选择合适的状态库,nolan出品

掘金链接&#xff1a;https://juejin.cn/post/7368288987642232872 1,简介 在状态共享这方面&#xff0c;不像 Vuex&#xff0c;React 的官方并没有强力推荐某种封装方案&#xff0c;所以 React 的状态管理工具五花八门&#xff0c;百花齐放&#xff0c; react-redux、dva、C…

【Python】语句与众所周知【自我维护版】

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 本篇博客是在之前的基础上进行的维护 目录 条…

Find My资讯|苹果 iOS 17.5 率先执行跨平台反跟踪器标准

苹果和谷歌公司于 2023 年 5 月宣布推出“检测预期外位置追踪器”&#xff08;Detecting Unwanted Location Trackers&#xff09;行业标准&#xff0c;经过 1 年多的打磨之后&#xff0c;该标准目前已通过 iOS 17.5 部署到 iPhone 上。谷歌也将为运行 Android 6.0 或更高版本的…