做一个静态购物网站页面代码
时间: 2024-02-27 09:53:49 浏览: 44
好的,以下是一个简单的购物网站静态页面的代码示例:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shopping Website</title>
</head>
<body>
<header>
<h1>Shopping Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Featured Products</h2>
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h3>Product 1</h3>
<p>Description of product 1.</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="product2.jpg" alt="Product 2">
<h3>Product 2</h3>
<p>Description of product 2.</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="product3.jpg" alt="Product 3">
<h3>Product 3</h3>
<p>Description of product 3.</p>
<button>Add to Cart</button>
</div>
</section>
<section>
<h2>Latest Products</h2>
<div class="product">
<img src="product4.jpg" alt="Product 4">
<h3>Product 4</h3>
<p>Description of product 4.</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="product5.jpg" alt="Product 5">
<h3>Product 5</h3>
<p>Description of product 5.</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="product6.jpg" alt="Product 6">
<h3>Product 6</h3>
<p>Description of product 6.</p>
<button>Add to Cart</button>
</div>
</section>
</main>
<footer>
<p>© Shopping Website 2021</p>
</footer>
</body>
</html>
```
这个页面包括了一个头部导航栏、两个产品列表部分和一个底部版权声明。每个产品都有一张图片、一个标题、一个简短的描述和一个“添加到购物车”的按钮。你可以根据需要进行修改和扩展。
阅读全文