帮我写一个果园网站的前端页面 包括一个简洁、清晰的导航栏,包括主页、关于我们、产品展示、新闻动态、联系我们等选项背景最好用绿色
时间: 2023-10-22 15:07:08 浏览: 193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>果园网站</title>
<style>
body {
background-color: #e9f5e9;
margin: 0;
padding: 0;
}
nav {
background-color: #2e8b57;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
nav a {
color: #fff;
font-weight: bold;
text-decoration: none;
margin-left: 20px;
}
nav a:hover {
text-decoration: underline;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #2e8b57;
text-align: center;
}
.product {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 30px 0;
}
.product img {
max-width: 300px;
margin-bottom: 20px;
}
.news {
display: flex;
flex-direction: column;
align-items: center;
margin: 30px 0;
}
.news article {
max-width: 600px;
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
}
.news h2 {
color: #2e8b57;
}
.contact {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 30px 0;
}
.contact form {
background-color: #fff;
padding: 20px;
max-width: 400px;
margin-right: 20px;
}
.contact form input[type="text"], .contact form input[type="email"], .contact form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
}
.contact form input[type="submit"] {
background-color: #2e8b57;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.contact p {
max-width: 400px;
margin-top: 20px;
line-height: 1.5;
}
.footer {
background-color: #2e8b57;
color: #fff;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<nav>
<h1>果园网站</h1>
<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>
</ul>
</nav>
<div class="container">
<h1>欢迎来到果园网站</h1>
<div class="product">
<div>
<img src="https://via.placeholder.com/300x200" alt="产品1">
<h2>产品1</h2>
<p>这里是产品1的简介。</p>
</div>
<div>
<img src="https://via.placeholder.com/300x200" alt="产品2">
<h2>产品2</h2>
<p>这里是产品2的简介。</p>
</div>
<div>
<img src="https://via.placeholder.com/300x200" alt="产品3">
<h2>产品3</h2>
<p>这里是产品3的简介。</p>
</div>
</div>
<div class="news">
<h2>最新动态</h2>
<article>
<h3>新闻标题1</h3>
<p>这里是新闻1的内容。</p>
</article>
<article>
<h3>新闻标题2</h3>
<p>这里是新闻2的内容。</p>
</article>
<article>
<h3>新闻标题3</h3>
<p>这里是新闻3的内容。</p>
</article>
</div>
<div class="contact">
<form>
<h2>联系我们</h2>
<input type="text" placeholder="姓名">
<input type="email" placeholder="邮箱">
<textarea placeholder="留言"></textarea>
<input type="submit" value="发送">
</form>
<p>如果您有任何问题或建议,请填写上面的表单给我们留言,我们会尽快回复您。</p>
</div>
</div>
<footer class="footer">
<p>© 2021 果园网站</p>
</footer>
</body>
</html>
阅读全文