购物网站主页面html代码
时间: 2023-08-23 20:07:01 浏览: 48
以下是一个购物网站主页面的示例HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Shopping Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>Welcome to My Shopping Website</h1>
<p>Discover the latest products and deals on our website</p>
<a href="#" class="btn">Shop Now</a>
</section>
<section class="products">
<h2>Featured Products</h2>
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h3>Product 1</h3>
<p>$19.99</p>
<a href="#" class="btn">Add to Cart</a>
</div>
<div class="product">
<img src="product2.jpg" alt="Product 2">
<h3>Product 2</h3>
<p>$29.99</p>
<a href="#" class="btn">Add to Cart</a>
</div>
<div class="product">
<img src="product3.jpg" alt="Product 3">
<h3>Product 3</h3>
<p>$39.99</p>
<a href="#" class="btn">Add to Cart</a>
</div>
</section>
</main>
<footer>
<p>© 2021 My Shopping Website</p>
</footer>
</body>
</html>
```
请注意,这只是一个简单的示例,并且实际的购物网站通常具有更复杂的结构、样式和功能。