生成一个食品评论区的HTML,左边是评价用户名称,右边从高列下来是评价食品,评价星级,评价内容,评价图片,评价时间
时间: 2024-01-02 11:06:15 浏览: 22
<!DOCTYPE html>
<html>
<head>
<title>食品评论区</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #8B0000;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 20px;
margin-bottom: 20px;
}
.user {
flex: 1;
padding: 10px;
background-color: #fff;
margin: 10px;
text-align: center;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.user h3 {
margin: 0;
color: #8B0000;
}
.food {
flex: 3;
padding: 10px;
background-color: #fff;
margin: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.food h4 {
margin: 0;
color: #8B0000;
}
.food p {
margin: 5px 0;
}
.food img {
max-width: 100%;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>食品评论区</h1>
<div class="container">
<div class="user">
<h3>用户A</h3>
</div>
<div class="food">
<h4>美味披萨</h4>
<p>评价星级:★★★★★</p>
<p>评价内容:这是我吃过最好吃的披萨!每一口都有浓浓的芝士味,配料也很丰富,绝对物超所值!</p>
<img src="pizza.jpg" alt="美味披萨">
<p>评价时间:2021年5月1日</p>
</div>
</div>
<div class="container">
<div class="user">
<h3>用户B</h3>
</div>
<div class="food">
<h4>酸辣粉</h4>
<p>评价星级:★★★</p>
<p>评价内容:酸辣粉口感还可以,但是配料太少了,感觉不太值得这个价格。</p>
<img src="noodles.jpg" alt="酸辣粉">
<p>评价时间:2021年5月3日</p>
</div>
</div>
<div class="container">
<div class="user">
<h3>用户C</h3>
</div>
<div class="food">
<h4>牛肉汤面</h4>
<p>评价星级:★★★★</p>
<p>评价内容:这个汤面真的很好吃!牛肉很嫩,汤也很鲜美,建议加点辣椒油会更好吃。</p>
<img src="noodle-soup.jpg" alt="牛肉汤面">
<p>评价时间:2021年5月5日</p>
</div>
</div>
</body>
</html>