制作一个电影详情介绍页面,影片的详情介绍页面中需包含图片、文字和试看视频,文字介绍内容超出显示区域需提供滚动条,以便拖动查看完整内容。(写出具体网页代码)
时间: 2024-03-14 21:48:06 浏览: 249
好的,下面是一个简单的 HTML 和 CSS 代码示例,可以创建一个包含图片、文字和试看视频的电影详情介绍页面,并提供滚动条。
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>电影详情介绍页面</title>
<style>
/* 设置页面样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 设置图片样式 */
.movie-image {
width: 100%;
height: auto;
}
/* 设置文字介绍样式 */
.movie-description {
margin: 20px;
overflow-y: scroll;
height: 300px;
}
/* 设置视频样式 */
.movie-video {
margin: 20px;
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<!-- 插入电影图片 -->
<img class="movie-image" src="movie-image.jpg" alt="电影海报" />
<!-- 插入电影文字介绍 -->
<div class="movie-description">
<h2>电影名称</h2>
<p>
电影剧情简介:这里是电影的简短描述,包括电影的类型、导演、演员等信息。这段文字可能会超出显示区域,因此提供了滚动条以便用户查看完整内容。
</p>
<p>
电影详细介绍:这里是电影的详细介绍,包括电影的剧情、演员、导演等信息。这段文字可能会超出显示区域,因此提供了滚动条以便用户查看完整内容。
</p>
</div>
<!-- 插入电影试看视频 -->
<div class="movie-video">
<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>
</body>
</html>
```
CSS 代码:
```
/* 设置页面样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 设置图片样式 */
.movie-image {
width: 100%;
height: auto;
}
/* 设置文字介绍样式 */
.movie-description {
margin: 20px;
overflow-y: scroll;
height: 300px;
}
/* 设置视频样式 */
.movie-video {
margin: 20px;
width: 100%;
height: 400px;
}
```
请注意,这只是一个简单的示例,您可以根据您的需求进行更改和扩展。另外,视频的src属性需要替换为您自己的视频ID。
阅读全文