利用html写一个海豚保护的网站 并利用css javascript修饰网站 使网站页面出众 丰富多彩颜色 还需要一个视频播放器播放海豚录像和海豚的介绍栏
时间: 2024-03-14 19:43:10 浏览: 19
好的,我会尽力回答你的问题。首先,我们可以先使用HTML编写网站的基本结构,并添加一些基本的内容,如以下代码所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>海豚保护网站</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>海豚保护网站</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">海豚介绍</a></li>
<li><a href="#">海豚保护</a></li>
<li><a href="#">视频播放器</a></li>
</ul>
</nav>
<main>
<section>
<h2>欢迎来到海豚保护网站</h2>
<p>这里是一个致力于保护海豚的网站,我们希望通过宣传和教育的方式来增加人们对海豚的关注和保护意识。</p>
</section>
<section>
<h2>海豚介绍</h2>
<p>海豚是一种聪明、友好的海洋哺乳动物,它们生活在全球各大洋海域中。它们是海洋生态系统中不可或缺的一部分,但由于过度捕猎和海洋污染等原因,海豚的数量正在急剧减少。</p>
</section>
<section>
<h2>海豚保护</h2>
<p>我们应该采取措施来保护海豚,例如减少捕猎和污染、建立海豚保护区等。</p>
</section>
<section>
<h2>视频播放器</h2>
<video controls>
<source src="dolphin_video.mp4" type="video/mp4">
<source src="dolphin_video.webm" type="video/webm">
您的浏览器不支持视频播放器。
</video>
</section>
</main>
<footer>
<p>版权所有 © 2021 海豚保护网站</p>
</footer>
</body>
</html>
```
上述代码创建了一个简单的HTML页面,其中包含了头部、导航、主体、视频播放器和页脚等元素。接下来,我们可以使用CSS来美化网站,如以下代码所示:
```css
body {
font-family: Arial, sans-serif;
background-color: #E6F2FF;
}
header {
background-color: #008CBA;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #F2F2F2;
border: 1px solid #E6E6E6;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
float: left;
}
nav li a {
display: block;
padding: 10px;
color: #333;
text-align: center;
text-decoration: none;
}
nav li a:hover {
background-color: #ddd;
color: black;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
section h2 {
font-size: 24px;
margin-bottom: 10px;
}
section p {
font-size: 16px;
line-height: 1.5;
}
footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
video {
width: 100%;
height: auto;
}
```
上述代码添加了一些样式来美化网站,包括背景颜色、字体、颜色、边框、内边距、间距、字体大小、行高、背景颜色等。最后,我们可以使用JavaScript来实现视频播放器和海豚介绍栏的功能,如以下代码所示:
```javascript
var videoPlayer = document.querySelector('video');
var playButton = document.querySelector('#play-button');
var pauseButton = document.querySelector('#pause-button');
playButton.addEventListener('click', function() {
videoPlayer.play();
});
pauseButton.addEventListener('click', function() {
videoPlayer.pause();
});
var dolphinInfo = document.querySelector('#dolphin-info');
var dolphinButton = document.querySelector('#dolphin-button');
dolphinButton.addEventListener('click', function() {
if (dolphinInfo.style.display === 'none') {
dolphinInfo.style.display = 'block';
} else {
dolphinInfo.style.display = 'none';
}
});
```
上述代码实现了视频播放器的播放和暂停按钮的功能,以及海豚介绍栏的显示和隐藏功能。现在,我们就有了一个漂亮的海豚保护网站,并且具有视频播放器和海豚介绍栏的功能。