给我一个电商网站首页,只用html和css
时间: 2023-06-27 08:02:36 浏览: 72
好的,以下是一个简单的电商网站首页,仅使用HTML和CSS实现。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>电商网站首页</title>
<style>
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Header styles */
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
padding: 1rem;
}
header h1 {
font-size: 2rem;
font-weight: bold;
color: #333;
}
header nav {
display: flex;
}
header nav a {
margin-left: 1rem;
color: #333;
text-decoration: none;
font-weight: bold;
}
header nav a:hover {
color: #666;
}
/* Main styles */
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 1rem;
}
.product {
width: calc(33.33% - 1rem);
margin-bottom: 1rem;
border: 1px solid #ccc;
padding: 1rem;
text-align: center;
}
.product img {
max-width: 100%;
max-height: 150px;
margin-bottom: 0.5rem;
}
.product h2 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.product p {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.product button {
background-color: #333;
color: #fff;
padding: 0.5rem;
border: none;
border-radius: 5px;
cursor: pointer;
}
.product button:hover {
background-color: #666;
}
/* Footer styles */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
}
footer p {
margin-bottom: 0.5rem;
}
footer a {
color: #fff;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>电商网站</h1>
<nav>
<a href="#">首页</a>
<a href="#">商品</a>
<a href="#">购物车</a>
<a href="#">登录</a>
</nav>
</header>
<main>
<div class="product">
<img src="https://via.placeholder.com/150" alt="Product image" />
<h2>商品1</h2>
<p>¥100.00</p>
<button>加入购物车</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/150" alt="Product image" />
<h2>商品2</h2>
<p>¥200.00</p>
<button>加入购物车</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/150" alt="Product image" />
<h2>商品3</h2>
<p>¥300.00</p>
<button>加入购物车</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/150" alt="Product image" />
<h2>商品4</h2>
<p>¥400.00</p>
<button>加入购物车</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/150" alt="Product image" />
<h2>商品5</h2>
<p>¥500.00</p>
<button>加入购物车</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/150" alt="Product image" />
<h2>商品6</h2>
<p>¥600.00</p>
<button>加入购物车</button>
</div>
</main>
<footer>
<p>版权所有 © 2021 电商网站</p>
<p>联系我们:<a href="mailto:info@ecommerce.com">info@ecommerce.com</a></p>
</footer>
</body>
</html>
```
这个网站首页包括一个顶部导航栏,一个主要内容区域以及一个底部版权声明。在主要内容区域中,使用了flex布局和calc()函数来实现一个简单的响应式布局。