用js写一个精华液的功能页面
时间: 2024-06-07 14:08:55 浏览: 6
好的,以下是一个简单的精华液功能页面示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>精华液功能页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding: 20px;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.item {
width: 30%;
margin-bottom: 20px;
box-shadow: 0px 0px 5px #ccc;
padding: 20px;
border-radius: 5px;
position: relative;
}
.item img {
max-width: 100%;
height: auto;
}
.item h2 {
margin-top: 0;
margin-bottom: 10px;
}
.item p {
margin: 0;
text-align: justify;
}
.item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.item:hover .overlay {
opacity: 1;
}
.item .overlay h3 {
margin-top: 0;
margin-bottom: 10px;
}
.item .overlay p {
margin: 0;
text-align: center;
}
.btn {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.btn:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<h1>精华液功能页面</h1>
<div class="container">
<div class="item">
<img src="https://via.placeholder.com/300x200.png?text=Product+1" alt="Product 1">
<h2>产品1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod risus id ex dictum, sed lobortis eros eleifend.</p>
<div class="overlay">
<h3>加入购物车</h3>
<p>价格:$19.99</p>
<button class="btn">添加到购物车</button>
</div>
</div>
<div class="item">
<img src="https://via.placeholder.com/300x200.png?text=Product+2" alt="Product 2">
<h2>产品2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod risus id ex dictum, sed lobortis eros eleifend.</p>
<div class="overlay">
<h3>加入购物车</h3>
<p>价格:$29.99</p>
<button class="btn">添加到购物车</button>
</div>
</div>
<div class="item">
<img src="https://via.placeholder.com/300x200.png?text=Product+3" alt="Product 3">
<h2>产品3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod risus id ex dictum, sed lobortis eros eleifend.</p>
<div class="overlay">
<h3>加入购物车</h3>
<p>价格:$39.99</p>
<button class="btn">添加到购物车</button>
</div>
</div>
</div>
<script>
// 添加到购物车按钮的事件监听器
var btns = document.querySelectorAll('.btn');
btns.forEach(function(btn) {
btn.addEventListener('click', function() {
alert('商品已添加到购物车!');
});
});
</script>
</body>
</html>
```
这个页面使用了 Flexbox 布局来创建一个响应式的网格,每个网格中包含一个产品图片、标题、描述和一个 overlay 层,用于显示加入购物车按钮和商品价格。在 overlay 层中的添加到购物车按钮被点击时,会弹出一个简单的提示框。
注意,本示例中的图片使用了 Placeholder.com 的图像占位符服务,仅用于示例目的,实际应用中应使用真实的图片。
相关推荐
![text/html](https://img-home.csdnimg.cn/images/20210720083451.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)