写一个购物商城的首页界面,要求风格贴近女性审美,用h5代码返回给我
时间: 2023-04-02 13:04:40 浏览: 65
好的,我可以为您提供一个购物商城的首页界面,风格贴近女性审美。以下是h5代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>女性购物商城</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
header {
background-color: #ff69b4;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
font-size: 36px;
margin: ;
}
nav {
background-color: #fff;
border-bottom: 1px solid #ddd;
box-shadow: 2px 4px rgba(,,,.1);
padding: 10px;
text-align: center;
}
nav a {
color: #333;
display: inline-block;
margin: 10px;
text-decoration: none;
}
nav a:hover {
color: #ff69b4;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
.product {
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 2px 4px rgba(,,,.1);
margin: 10px;
padding: 10px;
text-align: center;
width: 200px;
}
.product img {
max-width: 100%;
}
.product h2 {
font-size: 24px;
margin: 10px ;
}
.product p {
color: #999;
font-size: 14px;
margin: 10px ;
}
.product button {
background-color: #ff69b4;
border: none;
color: #fff;
cursor: pointer;
padding: 10px;
width: 100%;
}
.product button:hover {
background-color: #ff4d9e;
}
</style>
</head>
<body>
<header>
<h1>女性购物商城</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">服饰</a>
<a href="#">鞋包</a>
<a href="#">美妆</a>
<a href="#">家居</a>
<a href="#">母婴</a>
</nav>
<section>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+1" alt="Product 1">
<h2>商品名称</h2>
<p>商品描述</p>
<button>立即购买</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+2" alt="Product 2">
<h2>商品名称</h2>
<p>商品描述</p>
<button>立即购买</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+3" alt="Product 3">
<h2>商品名称</h2>
<p>商品描述</p>
<button>立即购买</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+4" alt="Product 4">
<h2>商品名称</h2>
<p>商品描述</p>
<button>立即购买</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+5" alt="Product 5">
<h2>商品名称</h2>
<p>商品描述</p>
<button>立即购买</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+6" alt="Product 6">
<h2>商品名称</h2>
<p>商品描述</p>
<button>立即购买</button>
</div>
</section>
</body>
</html>