实训六 美食团购页面设计html
时间: 2023-07-25 16:07:20 浏览: 68
以下是一个简单的美食团购页面的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>美食团购</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>美食团购</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">商家</a></li>
<li><a href="#">我的</a></li>
</ul>
</nav>
</header>
<main>
<section class="deals">
<h2>今日特惠</h2>
<ul>
<li>
<img src="deal1.jpg" alt="特惠商品1">
<h3>特惠商品1</h3>
<p>价格:$10</p>
<button>立即购买</button>
</li>
<li>
<img src="deal2.jpg" alt="特惠商品2">
<h3>特惠商品2</h3>
<p>价格:$15</p>
<button>立即购买</button>
</li>
<li>
<img src="deal3.jpg" alt="特惠商品3">
<h3>特惠商品3</h3>
<p>价格:$20</p>
<button>立即购买</button>
</li>
</ul>
</section>
<section class="popular">
<h2>热门商品</h2>
<ul>
<li>
<img src="popular1.jpg" alt="热门商品1">
<h3>热门商品1</h3>
<p>价格:$25</p>
<button>立即购买</button>
</li>
<li>
<img src="popular2.jpg" alt="热门商品2">
<h3>热门商品2</h3>
<p>价格:$30</p>
<button>立即购买</button>
</li>
<li>
<img src="popular3.jpg" alt="热门商品3">
<h3>热门商品3</h3>
<p>价格:$35</p>
<button>立即购买</button>
</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 美食团购</p>
</footer>
</body>
</html>
```
在这个示例中,我们使用了HTML5的语法来创建一个简单的美食团购页面。页面包含一个页眉(header)、一个主体(main)和一个页脚(footer)。其中,页眉包含一个网站标题和一个导航菜单,主体分为两个部分,分别展示了今日特惠和热门商品,页脚包含了版权信息。
需要注意的是,这个示例只是一个简单的模板,实际的美食团购页面可能需要更多的内容和功能。此外,还需要使用CSS样式表来美化页面的外观和布局。