写一个购物网站要求平铺 html
网页结构及样式：
<!DOCTYPE html>
<html>
<head>
<title>购物网站</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
}
.logo {
font-size: 30px;
font-weight: bold;
margin: 0;
}
.nav {
background-color: #eee;
padding: 10px;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.nav li {
margin: 0 10px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
.nav li:hover {
color: #333;
}
.products {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 20px;
}
.product {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
padding: 20px;
text-align: center;
width: 250px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product img {
max-width: 200px;
max-height: 200px;
margin-bottom: 20px;
}
.product-name {
font-size: 20px;
font-weight: bold;
margin: 0;
}
.product-price {
font-size: 18px;
font-weight: bold;
margin: 0;
color: #f00;
}
.product-btn {
background-color: #f00;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.product-btn:hover {
background-color: #d00;
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header class="header">
<h1 class="logo">购物网站</h1>
</header>
<nav class="nav">
<ul>
<li>首页</li>
<li>女装</li>
<li>男装</li>
<li>鞋包</li>
<li>配饰</li>
<li>美妆</li>
<li>家居</li>
<li>母婴</li>
<li>食品</li>
<li>数码</li>
</ul>
</nav>
<main class="products">
<div class="product">
<img src="https://img.alicdn.com/bao/uploaded/i3/2200738842443/O1CN01J8uAIS2GyH2QdXl4m_!!0-item_pic.jpg" alt="商品图片">
<h2 class="product-name">2021夏季新款女装连衣裙</h2>
<p class="product-price">￥199.00</p>
<button class="product-btn">立即购买</button>
</div>
<div class="product">
<img src="https://img.alicdn.com/bao/uploaded/i1/2200738842443/O1CN01Z5f5Rn2GyH2QdXq1y_!!0-item_pic.jpg" alt="商品图片">
<h2 class="product-name">2021春季新款男装T恤</h2>
<p class="product-price">￥99.00</p>
<button class="product-btn">立即购买</button>
</div>
<div class="product">
<img src="https://img.alicdn.com/bao/uploaded/i2/2200738842443/O1CN01q3Z7pS2GyH2QdXJ4I_!!0-item_pic.jpg" alt="商品图片">
<h2 class="product-name">2021夏季新款女包</h2>
<p class="product-price">￥299.00</p>
<button class="product-btn">立即购买</button>
</div>
<div class="product">
<img src="https://img.alicdn.com/bao/uploaded/i3/2200738842443/O1CN01eWxLpC2GyH2QdXQJh_!!0-item_pic.jpg" alt="商品图片">
<h2 class="product-name">2021新款男鞋休闲鞋</h2>
<p class="product-price">￥399.00</p>
<button class="product-btn">立即购买</button>
</div>
<div class="product">
<img src="https://img.alicdn.com/bao/uploaded/i1/2200738842443/O1CN01vQzWxK2GyH2QdXK6T_!!0-item_pic.jpg" alt="商品图片">
<h2 class="product-name">2021夏季新款女配饰项链</h2>
<p class="product-price">￥99.00</p>
<button class="product-btn">立即购买</button>
</div>
<div class="product">
<img src="https://img.alicdn.com/bao/uploaded/i4/2200738842443/O1CN01RSghxj2GyH2QdXVZg_!!0-item_pic.jpg" alt="商品图片">
<h2 class="product-name">2021新款美妆口红</h2>
<p class="product-price">￥199.00</p>
<button class="product-btn">立即购买</button>
</div>
<div class="product">
<img src="https://img.alicdn.com/bao/uploaded/i3/2200738842443/O1CN01Kq3eDp2GyH2QdXKZM_!!0-item_pic.jpg" alt="商品图片">
<h2 class="product-name">2021夏季新款家居床上四件套</h2>
<p class="product-price">￥599.00</p>
<button class="product-btn">立即购买</button>
</div>
<div class="product">
<img src="https://img.alicdn.com/bao/uploaded/i1/2200738842443/O1CN01V6cSDE2GyH2QdXk3H_!!0-item_pic.jpg" alt="商品图片">
<h2 class="product-name">2021新款母婴婴儿推车</h2>
<p class="product-price">￥999.00</p>
<button class="product-btn">立即购买</button>
</div>
<div class="product">
<img src="https://img.alicdn.com/bao/uploaded/i2/2200738842443/O1CN01iZE5r52GyH2QdX5wQ_!!0-item_pic.jpg" alt="商品图片">
<h2 class="product-name">2021新款食品坚果礼盒</h2>
<p class="product-price">￥299.00</p>
<button class="product-btn">立即购买</button>
</div>
<div class="product">
<img src="https://img.alicdn.com/bao/uploaded/i3/2200738842443/O1CN01cVjK6o2GyH2QdXKdn_!!0-item_pic.jpg" alt="商品图片">
<h2 class="product-name">2021新款数码手机壳</h2>
<p class="product-price">￥49.00</p>
<button class="product-btn">立即购买</button>
</div>
</main>
<footer class="footer">
版权所有 © 2021 购物网站
</footer>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/btNA 著作权归作者所有。请勿转载和采集!