写一个简易不超过600行的简易商城主页的html代码
时间: 2024-05-07 15:21:30 浏览: 14
以下是一个简单的不超过600行的商城主页HTML代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Online Store</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<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>
<h1>Welcome to My Online Store</h1>
</header>
<!-- Main Content -->
<main>
<section class="featured-products">
<h2>Featured Products</h2>
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h3>Product 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#">Learn More</a>
</div>
<div class="product">
<img src="product2.jpg" alt="Product 2">
<h3>Product 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<a href="#">Learn More</a>
</div>
<div class="product">
<img src="product3.jpg" alt="Product 3">
<h3>Product 3</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<a href="#">Learn More</a>
</div>
</section>
<section class="popular-products">
<h2>Popular Products</h2>
<div class="product">
<img src="product4.jpg" alt="Product 4">
<h3>Product 4</h3>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Learn More</a>
</div>
<div class="product">
<img src="product5.jpg" alt="Product 5">
<h3>Product 5</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#">Learn More</a>
</div>
<div class="product">
<img src="product6.jpg" alt="Product 6">
<h3>Product 6</h3>
<p>Nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#">Learn More</a>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<p>© 2021 My Online Store</p>
</footer>
</body>
</html>
```
注意,这只是一个基本示例,实际的商城主页HTML代码可能更复杂,包括更多的页面元素和交互功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)