html+css+js淘宝商品界面

点击商品,alert弹出商品ID

图片使用了占位符图片,加载可能会慢一点 你可以把它换成自己的图片😃源代码在图片后面

效果图

d1c78ceb1fa64df1bc2fbc2946b59feb.jpg源代码

 

<!DOCTYPE html>

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>淘宝购物界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: red;
            color: white;
            padding: 10px;
            text-align: center;
            border-radius: 5px 5px 0 0;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }
        .product {
            width: 30%;
            margin: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }
        .product img {
            width: 100%;
            height: auto;
        }
        .product-info {
            padding: 10px;
        }
        .product-id {
            display: none;
        }
    </style>
    <script>
        function showProductId(productId) {
            alert("商品ID: " + productId);
        }
    </script>
</head>
<body>
<div class="header">淘宝</div>
<div class="container">
    <div class="product" οnclick="showProductId('001')">
        <img src="https://via.placeholder.com/150" alt="商品图片">
        <div class="product-info">
            <p>示例商品1</p>
            <span class="product-id">001</span>
        </div>
    </div>
    <div class="product" οnclick="showProductId('002')">
        <img src="https://via.placeholder.com/150" alt="商品图片">
        <div class="product-info">
            <p>示例商品2</p>
            <span class="product-id">002</span>
        </div>
    </div>
    <div class="product" οnclick="showProductId('003')">
        <img src="https://via.placeholder.com/150" alt="商品图片">
        <div class="product-info">
            <p>示例商品3</p>
            <span class="product-id">003</span>
        </div>
    </div>
    <div class="product" οnclick="showProductId('004')">
        <img src="https://via.placeholder.com/150" alt="商品图片">
        <div class="product-info">
            <p>示例商品4</p>
            <span class="product-id">004</span>
        </div>
    </div>
    <div class="product" οnclick="showProductId('005')">
        <img src="https://via.placeholder.com/150" alt="商品图片">
        <div class="product-info">
            <p>示例商品5</p>
            <span class="product-id">005</span>
        </div>
    </div>
    <div class="product" οnclick="showProductId('006')">
        <img src="https://via.placeholder.com/150" alt="商品图片">
        <div class="product-info">
            <p>示例商品6</p>
            <span class="product-id">0026</span>
        </div>
    </div>
    <!-- 更多商品... -->
</div>
</body>
</html>

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

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

相关文章

Vue 循环内部获取图片高度

在vue循环里面获取图片宽度或者高度,有时候会用到,则可以 <div classconmon v-for"(item, index) in items"><router-link :to"{path: /art/details,query:{artid:item.app_id,item_id:item.image_id}}"><img :src"item.src" al…

时空预测+特征分解!高性能!EMD-Transformer和Transformer多变量交通流量时空预测对比

时空预测特征分解&#xff01;高性能&#xff01;EMD-Transformer和Transformer多变量交通流量时空预测对比 目录 时空预测特征分解&#xff01;高性能&#xff01;EMD-Transformer和Transformer多变量交通流量时空预测对比效果一览基本介绍程序设计参考资料 效果一览 基本介绍…

番外篇 | YOLOv8改进之即插即用全维度动态卷积ODConv + 更换Neck网络为GFPN

前言:Hello大家好,我是小哥谈。本文所做出的改进是在YOLOv8中引入即插即用全维度动态卷积ODConv和更换Neck网络为GFPN,希望大家学习之后能够有所收获~!🌈 目录 🚀1.基础概念 🚀2.网络结构 🚀3.添加步骤 🚀4.改进方法 🍀🍀步骤1:block.py文件修改…

在TkinterGUI界面显示WIFI网络摄像头(ESP32s3)视频画面

本实验结合了之前写过的两篇文章Python调用摄像头&#xff0c;实时显示视频在Tkinter界面以及ESP32 S3搭载OV2640摄像头释放热点&#xff08;AP&#xff09;工作模式–Arduino程序&#xff0c;当然如果手头有其他可以获得网络摄像头的URL即用于访问摄像头视频流的网络地址&…

解析MySQL核心技术:视图的实用指南与实践案例

在数据库管理中&#xff0c;MySQL视图&#xff08;View&#xff09;是一种强大的功能&#xff0c;利用它可以简化复杂查询、提高数据安全性以及增强代码的可维护性。本篇文章将详细介绍MySQL视图的相关知识&#xff0c;包括视图的创建、修改、删除、使用场景以及常见的最佳实践…

Python学生信息管理系统(完整代码)

引言&#xff1a;&#xff08;假装不是一个大学生课设&#xff09;在现代教育管理中&#xff0c;学生管理系统显得尤为重要。这种系统能够帮助教育机构有效地管理学生资料、成绩、出勤以及其他教育相关活动&#xff0c;从而提高管理效率并减少人为错误。通过使用Python&#xf…

Reactive Streams介绍及应用分析

Reactive Streams的介绍与应用分析如下&#xff1a; 一、Reactive Streams基本知识 Reactive Streams是一种基于异步流处理的标准化规范&#xff0c;旨在使流处理更加可靠、高效和响应式。其核心思想是让发布者&#xff08;Publisher&#xff09;和订阅者&#xff08;Subscri…

手写Spring-MVC之前后置处理器与异常处理、数据库框架

Day48 手写Spring-MVC之前后置处理器与异常处理 前后置处理器 概念&#xff1a;从服务器获取的JSON数据可能是加密后的&#xff0c;因此服务端获取的时候需要进行解密&#xff08;前置处理器&#xff09;。 而从服务器传出的JSON数据可能需要加密&#xff0c;因此需要在处理返…

亚马逊跟卖选品erp采集,跟卖卖家的选品利器,提升选品效率!

今天给亚马逊跟卖卖家&#xff0c;分享我现在在用的两种选品方式&#xff0c;做个铺货或者是跟卖都可以&#xff0c;是不是很多卖家选品现在都是亚马逊前端页面或是新品榜单选择产品跟卖&#xff0c;这样找品这就相当于大海捞针&#xff0c;而且新品榜单的产品你能看到那其他卖…

经典卷积神经网络 LeNet

一、实例图片 #我们传入的是28*28&#xff0c;所以加了padding net nn.Sequential(nn.Conv2d(1, 6, kernel_size5, padding2), nn.Sigmoid(),nn.AvgPool2d(kernel_size2, stride2),nn.Conv2d(6, 16, kernel_size5), nn.Sigmoid(),nn.AvgPool2d(kernel_size2, stride2),nn.Flat…

Linux Swap机制关键点分析

1. page被swap出去之后,再次缺页是怎么找到找个换出的页面? 正常内存的页面是通过pte映射找到page的,swap出去的page有其特殊的方式:swap的页面page->private字段保存的是:swap_entry_t通过swap_entry_t就能找到该页面的扇区号sector_t,拿到扇区号就可以从块设备中读…

Werkzeug库介绍:Python WSGI工具集

Werkzeug库介绍:Python WSGI工具集 1. 什么是Werkzeug?2. 基本概念3. 安装Werkzeug4. 基本用法示例4.1 创建一个简单的WSGI应用4.2 路由和URL构建4.3 处理表单数据 5. 高级特性5.1 中间件5.2 Sessions5.3 文件上传 6. 性能考虑7. 注意事项8. 结语 1. 什么是Werkzeug? Werkze…

day04-组织架构

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.组织架构-树组件应用树形组件-用层级结构展示信息&#xff0c;可展开或折叠。 2.组织架构-树组件自定义结构3.组织架构-获取组织架构数据4.组织架构-递归转化树形…

算力共享所面临的痛点问题和现有解决办法,怎样和人工智能相结合

目录 算力共享所面临的痛点问题和现有解决办法,怎样和人工智能相结合 算力共享所面临的痛点问题 现有解决办法 与人工智能的结合 怎样利用分布式计算技术将算力下沉到更接近用户的地方,减少延迟和提高可用性。 一、分布式计算技术的应用 二、算力下沉的策略 算力共享所…

Redis 典型应用——分布式锁

一、什么是分布式锁 在一个分布式的系统中&#xff0c;也会涉及到多个节点访问同一个公共资源的情况&#xff0c;此时就需要通过锁来做互斥控制&#xff0c;避免出现类似于 "线程安全" 的问题&#xff1b; 而 Java 中的 synchronized&#xff0c;只能在当前进程中生…

day60---面试专题(微服务面试题-参考回答)

微服务面试题 **面试官&#xff1a;**Spring Cloud 5大组件有哪些&#xff1f; 候选人&#xff1a; 早期我们一般认为的Spring Cloud五大组件是 Eureka : 注册中心Ribbon : 负载均衡Feign : 远程调用Hystrix : 服务熔断Zuul/Gateway : 网关 随着SpringCloudAlibba在国内兴起 , …

HOW - React Router Feature 实践(react-router-dom)

目录 基本特性ranked routes matchingactive linksNavLinkuseMatch relative links1. 相对路径的使用2. 嵌套路由的增强行为3. 优势和注意事项4. . 和 ..5. 总结 data loading 基本特性 client side routingnested routesdynamic segments 比较好理解&#xff0c;这里不赘述。…

【C语言】控制台扫雷(C语言实现)

目录 博文目的实现思路项目创建文件解释 具体实现判断玩家进行游戏还是退出扫雷棋盘的确定地图初始化埋雷玩家扫雷的实现雷判断函数 源码game.cgame.h扫雷.c 博文目的 相信不少人都学习了c语言的函数&#xff0c;循环&#xff0c;分支那我们就可以写一个控制台的扫雷小游戏来检…

面向对象-封装

一.包 1.简介 当我们把所有的java类都写src下的第一层级&#xff0c;如果是项目中&#xff0c;也许会有几百个java文件。 src下的文件会很多&#xff0c;开发的时候不方便查找&#xff0c;也不方便维护如果较多的文件中有同名的&#xff0c;十分麻烦 模块1中有一个叫test.ja…

android应用的持续构建CI(二)-- jenkins集成

一、背景 接着上一篇文章&#xff0c;本文我们将使用jenkins把所有的流程串起来。 略去了对android应用的加固流程&#xff0c;重点是jenkins的job该如何配置。 二、配置jenkins job 0、新建job 选择一个自由风格的软件项目 1、参数赋值 你可以增加许多参数&#xff0c;这…