用html编写一个美食门户网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美食门户网站</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f3f3f3;
}
<pre><code> header {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.logo {
float: left;
font-size: 28px;
font-weight: bold;
color: #ff6a00;
margin-right: 20px;
}
nav {
float: right;
margin-top: 5px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #333;
text-decoration: none;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
}
nav a:hover {
color: #ff6a00;
}
section {
margin: 20px;
}
section h2 {
font-size: 28px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
text-align: center;
}
article {
display: inline-block;
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 30%;
vertical-align: top;
margin-right: 20px;
}
article img {
width: 100%;
margin-bottom: 10px;
}
article h3 {
font-size: 20px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
article p {
font-size: 16px;
color: #666;
line-height: 1.5;
margin-bottom: 10px;
}
article a {
display: block;
background-color: #ff6a00;
color: #fff;
padding: 10px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
transition: all 0.3s ease;
}
article a:hover {
background-color: #333;
color: #fff;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
footer p {
font-size: 16px;
margin: 0;
}
</style>
</code></pre>
</head>
<body>
<header>
<div class="logo">美食门户网站</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">热门食谱</a></li>
<li><a href="#">最新发布</a></li>
<li><a href="#">美食视频</a></li>
<li><a href="#">美食教程</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<section>
<h2>热门食谱</h2>
<article>
<img src="upload://dp164kenDYgAEMswz6XTXroYolH.jpeg" alt="食谱图片">
<h3>麻辣火锅</h3>
<p>麻辣火锅，是一种源于中国西南地区的火锅。其特点是麻辣味浓</p>
<a href="#">查看详情</a>
</article>
<article>
<img src="upload://dp164kenDYgAEMswz6XTXroYolH.jpeg" alt="食谱图片">
<h3>麻辣火锅</h3>
<p>麻辣火锅，是一种源于中国西南地区的火锅。其特点是麻辣味浓</p>
<a href="#">查看详情</a>
</article>
<article>
<img src="upload://dp164kenDYgAEMswz6XTXroYolH.jpeg" alt="食谱图片">
<h3>麻辣火锅</h3>
<p>麻辣火锅，是一种源于中国西南地区的火锅。其特点是麻辣味浓</p>
<a href="#">查看详情</a>
</article>
</section>
<section>
<h2>最新发布</h2>
<article>
<img src="upload://dp164kenDYgAEMswz6XTXroYolH.jpeg" alt="食谱图片">
<h3>麻辣火锅</h3>
<p>麻辣火锅，是一种源于中国西南地区的火锅。其特点是麻辣味浓</p>
<a href="#">查看详情</a>
</article>
<article>
<img src="upload://dp164kenDYgAEMswz6XTXroYolH.jpeg" alt="食谱图片">
<h3>麻辣火锅</h3>
<p>麻辣火锅，是一种源于中国西南地区的火锅。其特点是麻辣味浓</p>
<a href="#">查看详情</a>
</article>
<article>
<img src="upload://dp164kenDYgAEMswz6XTXroYolH.jpeg" alt="食谱图片">
<h3>麻辣火锅</h3>
<p>麻辣火锅，是一种源于中国西南地区的火锅。其特点是麻辣味浓</p>
<a href="#">查看详情</a>
</article>
</section>
<footer>
<p>版权所有 © 2021 美食门户网站</p>
</footer>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/jvn 著作权归作者所有。请勿转载和采集!