用html 写一个手机版多店铺的外卖首页
时间: 2023-10-02 07:07:08 浏览: 43
好的,我了解了你的要求。以下是一个简单的HTML代码,可以用于手机版多店铺的外卖首页。你可以根据自己的需要进行修改。
```
<!DOCTYPE html>
<html>
<head>
<title>多店铺外卖首页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f8f8f8;
border-bottom: 1px solid #ccc;
padding: 10px;
text-align: center;
}
h1 {
font-size: 24px;
margin: 0;
}
main {
padding: 10px;
}
.restaurant {
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
.restaurant img {
float: left;
margin-right: 10px;
width: 80px;
height: 80px;
}
.restaurant h2 {
font-size: 18px;
margin: 0;
margin-bottom: 5px;
}
.restaurant p {
font-size: 14px;
margin: 0;
margin-bottom: 5px;
color: #888;
}
.restaurant a {
background-color: #ff9c00;
color: white;
display: block;
padding: 5px;
text-align: center;
text-decoration: none;
width: 80px;
margin-top: 10px;
}
.restaurant a:hover {
background-color: #ff8000;
}
</style>
</head>
<body>
<header>
<h1>多店铺外卖首页</h1>
</header>
<main>
<div class="restaurant">
<img src="restaurant1.jpg">
<h2>餐厅1</h2>
<p>人均消费:¥50</p>
<p>地址:xxx</p>
<a href="#">进入餐厅</a>
</div>
<div class="restaurant">
<img src="restaurant2.jpg">
<h2>餐厅2</h2>
<p>人均消费:¥80</p>
<p>地址:xxx</p>
<a href="#">进入餐厅</a>
</div>
<div class="restaurant">
<img src="restaurant3.jpg">
<h2>餐厅3</h2>
<p>人均消费:¥60</p>
<p>地址:xxx</p>
<a href="#">进入餐厅</a>
</div>
</main>
</body>
</html>
```
希望这个代码可以帮助你完成你的任务。如果你需要任何帮助,请随时联系我。
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)