利用HTML和CSS相关知识,增加JavaScript动态效果,制作新时代民航精神宣传网站。并给出连贯的完整代码
时间: 2024-09-30 21:10:28 浏览: 3
利用HTML、CSS以及JavaScript,我们可以创建一个交互式的民航精神宣传网站。HTML负责页面结构,CSS提供样式,而JavaScript则添加动态效果。下面是一个简单的示例,展示如何开始:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>新时代民航精神宣传</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入CSS文件 -->
</head>
<body>
<header id="main-header">
<h1 class="logo">新世代民航精神</h1>
<nav id="navigation">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">航空知识</a></li>
<li><a href="#">英雄故事</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main id="content">
<!-- 使用JavaScript动态加载内容 -->
<div id="dynamic-content"></div>
<button onclick="showMessage()">点击显示信息</button>
</main>
<script src="scripts.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>
```
接下来,我们可以在`styles.css`中设置基础样式:
```css
/* styles.css */
body {
font-family: Arial, sans-serif;
}
#main-header {
background-color: #f0f0f0;
padding: 20px;
}
.logo {
color: #333;
text-decoration: none;
}
#navigation ul {
list-style-type: none;
}
#dynamic-content {
display: none; /* 隐藏默认内容 */
}
```
最后,在`scripts.js`中编写JavaScript代码以实现动态效果:
```javascript
// scripts.js
function showMessage() {
document.getElementById('dynamic-content').innerHTML = "欢迎来到新时代民航精神宣传网站,我们将为您提供丰富的航空资讯和感人故事。";
document.getElementById('dynamic-content').style.display = 'block'; // 显示动态内容
}
```
这只是一个基本框架,实际项目可能需要更复杂的布局和更多的交互功能,如轮播图、下拉菜单等。你还可以考虑引入jQuery或者其他前端库来简化JavaScript的使用。