html+css+js淘宝商品界面

点击商品,alert弹出商品ID

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

效果图

源代码

<!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>

相关推荐
爱分享的程序员2 分钟前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
lichenyang4532 分钟前
react案例动态表单(受控组件)
前端
Jackson_Mseven3 分钟前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
哎呦你好20 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放29 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao1 小时前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo1 小时前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er1 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年1 小时前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er1 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js