使用html和css设计一个视频播放网站,要求该网站包括视频播放界面和播放视频的下方有·相关视频推荐等
时间: 2023-12-10 15:41:04 浏览: 23
以下是一个简单的视频播放网站的HTML和CSS代码示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>视频播放网站</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>视频播放网站</h1>
</header>
<main>
<section id="video-player">
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</section>
<section id="related-videos">
<h2>相关视频</h2>
<ul>
<li><a href="#">视频1</a></li>
<li><a href="#">视频2</a></li>
<li><a href="#">视频3</a></li>
<li><a href="#">视频4</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2021 视频播放网站</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
header h1 {
margin: 0;
}
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
#video-player {
max-width: 800px;
margin-bottom: 20px;
}
#related-videos {
max-width: 800px;
}
#related-videos h2 {
margin-top: 0;
}
#related-videos ul {
list-style: none;
padding: 0;
margin: 0;
}
#related-videos li {
margin-bottom: 10px;
}
#related-videos a {
color: #333;
text-decoration: none;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
}
```
说明:
- HTML中使用了`<video>`标签来播放视频,其中包含两个`<source>`标签来指定不同格式的视频文件,以便于浏览器兼容。
- CSS样式主要设置了页面的布局和样式,其中`display: flex`和相关属性用于实现页面中心化布局。
- 相关视频部分使用了一个无序列表和超链接来展示。