设计一个乡村官网的网站,并写出源代码
时间: 2024-03-22 15:37:14 浏览: 134
乡村旅游网站源码
好的,我可以给你提供一个简单的乡村官网的网站设计和源代码。这个网站包含了一个首页、一个新闻列表页面和一个新闻详情页面。以下是代码示例:
### HTML 代码
#### index.html
```html
<!DOCTYPE html>
<html>
<head>
<title>乡村官网</title>
</head>
<body>
<header>
<h1>欢迎来到乡村官网</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="news.html">新闻动态</a></li>
</ul>
</nav>
</header>
<main>
<p>乡村官网欢迎您!</p>
</main>
<footer>
<p>© 2021 乡村官网</p>
</footer>
</body>
</html>
```
#### news.html
```html
<!DOCTYPE html>
<html>
<head>
<title>新闻动态 - 乡村官网</title>
</head>
<body>
<header>
<h1>新闻动态</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="news.html">新闻动态</a></li>
</ul>
</nav>
</header>
<main>
<ul>
<li><a href="news1.html">新闻1</a></li>
<li><a href="news2.html">新闻2</a></li>
<li><a href="news3.html">新闻3</a></li>
</ul>
</main>
<footer>
<p>© 2021 乡村官网</p>
</footer>
</body>
</html>
```
#### news1.html
```html
<!DOCTYPE html>
<html>
<head>
<title>新闻1 - 乡村官网</title>
</head>
<body>
<header>
<h1>新闻1</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="news.html">新闻动态</a></li>
</ul>
</nav>
</header>
<main>
<p>这是新闻1的内容。</p>
</main>
<footer>
<p>© 2021 乡村官网</p>
</footer>
</body>
</html>
```
### CSS 代码
#### style.css
```css
body {
font-family: Arial, sans-serif;
margin: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
这个网站使用了简单的 HTML 和 CSS,包含了一个顶部导航栏、一个页头、一个页脚和一个主要内容区域。你可以根据自己的需求修改内容和样式。
希望这个示例能够帮到你!
阅读全文