设计一个卖衣服的商铺，有价格、衣服、折扣、价格，用英文，html+css
时间: 2023-05-30 22:05:17 浏览: 74
和JavaScript实现。
HTML代码：
```
<!DOCTYPE html>
<html>
<head>
<title>Clothing Store</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Clothing Store</h1>
</header>
<main>
<section>
<h2>Products</h2>
<ul id="product-list">
<li class="product">
<img src="https://via.placeholder.com/150x150" alt="Product Image">
<h3>Product 1</h3>
<p class="price">$50</p>
</li>
<li class="product">
<img src="https://via.placeholder.com/150x150" alt="Product Image">
<h3>Product 2</h3>
<p class="price">$75</p>
</li>
<li class="product">
<img src="https://via.placeholder.com/150x150" alt="Product Image">
<h3>Product 3</h3>
<p class="price">$100</p>
</li>
</ul>
</section>
<section>
<h2>Discounts</h2>
<ul id="discount-list">
<li class="discount">
<h3>10% off on all products</h3>
<p class="discount-price">$0</p>
</li>
<li class="discount">
<h3>20% off on orders above $100</h3>
<p class="discount-price">$0</p>
</li>
<li class="discount">
<h3>30% off on orders above $200</h3>
<p class="discount-price">$0</p>
</li>
</ul>
</section>
</main>
<footer>
<p>© 2021 Clothing Store</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS代码：
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
section {
margin: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.product {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
width: 200px;
}
.product img {
margin-bottom: 20px;
}
.product h3 {
font-size: 18px;
margin-bottom: 10px;
}
.product .price {
font-size: 16px;
font-weight: bold;
margin: 0;
}
.discount {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
width: 200px;
}
.discount h3 {
font-size: 18px;
margin-bottom: 10px;
}
.discount .discount-price {
font-size: 16px;
font-weight: bold;
margin: 0;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
JavaScript代码：
```
const productPrices = [50, 75, 100]; // Prices of the products
const discountRates = [0.1, 0.2, 0.3]; // Discount rates for different discount levels
const discountThresholds = [0, 100, 200]; // Thresholds for different discount levels
// Function to calculate discounted price
function calculateDiscountedPrice(price, discountRate) {
return price * (1 - discountRate);
}
// Function to update discount prices
function updateDiscountPrices() {
const productList = document.querySelectorAll('.product');
const discountList = document.querySelectorAll('.discount');
const totalPrices = [0, 0, 0];
// Calculate total prices
for (let i = 0; i < productList.length; i++) {
const price = parseInt(productList[i].querySelector('.price').textContent.slice(1));
totalPrices[i] = price;
}
// Apply discounts
for (let i = 0; i < discountList.length; i++) {
const discountRate = discountRates[i];
const discountThreshold = discountThresholds[i];
let totalPrice = 0;
for (let j = 0; j < productList.length; j++) {
if (totalPrices[j] >= discountThreshold) {
totalPrice += calculateDiscountedPrice(totalPrices[j], discountRate);
} else {
totalPrice += totalPrices[j];
}
}
discountList[i].querySelector('.discount-price').textContent = '$' + totalPrice.toFixed(2);
}
}
// Update discount prices when page loads
updateDiscountPrices();
// Update discount prices when product prices change
const productList = document.querySelectorAll('.product');
for (let i = 0; i < productList.length; i++) {
productList[i].addEventListener('click', function() {
const price = parseInt(this.querySelector('.price').textContent.slice(1));
if (price === productPrices[i]) {
this.querySelector('.price').textContent = '$' + calculateDiscountedPrice(price, discountRates[0]).toFixed(2);
} else {
this.querySelector('.price').textContent = '$' + productPrices[i];
}
updateDiscountPrices();
});
}
```
这个商铺可以展示三个产品，并提供三个不同的折扣等级，当用户点击产品时，价格会更改，折扣价格也会更新。
相关推荐
最新推荐
html+css 选择题50（加答案）
html+css 选择题（加答案）,适合学过html和css的人加强和巩固知识（内有50个选择题）。
html5+css3面试题答案.docx
html5+css3面试题答案.docx
前端HTML5+CSS+JavaScript学习笔记.docx
前端HTML5+CSS+JavaScript详细学习笔记，来自菜鸟教程、w3cSchool和b站视频教程的总结，包括基础知识和示例代码，欢迎大家指正
html+css实现数据图表的展示效果
一下收集分享的数据图表的展示效果，是完全用html和css来实现的。通过仔细研究学习这些案例对于我们学习css会有很大帮助的。
html+css制作div标签增加右上角删除图标的示例代码
一、需求描述 在Div标签的右上角显示删除图标 二、实现方式 html、CSS 三、参考代码 <style> .container{ width:60px; height:60px; border: 1px dotted red; position:relative; } .content{ position:...
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
解答下列问题：S—＞S；T｜T；T—＞a 构造任意项目集规范族，构造LR（0）分析表，并分析a;a
对于这个文法，我们可以构造以下项目集规范族:
I0:
S -> .S
S -> .T
T -> .a
I1:
S -> S. [$
T -> T. [$
I2:
S -> T.
I3:
S -> S.;S
S -> S.;T
T -> T.;a
其中，点(.)表示已经被扫描过的符号，;$表示输入串的结束符号。
根据项目集规范族，我们可以构造出LR(0)分析表:
状态 | a | $
---- | - | -
I0 | s3|
I1 | |acc
I2 | |
其中s3表示移进到状态3，acc表示接受。在分析字符串a;a时，我们可以按照以下步骤进行
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。