制作一个电影详情页面,影片的详情介绍页面中需包含图片、文字和试看视频,文字介绍内容超出显示区域需提供滚动条,以便拖动查看完整内容。(写出具体网页代码,不使用js)
时间: 2024-03-17 09:41:28 浏览: 173
网站模板制作中的详情页面的设计方法(图文教程)
好的,以下是具体的网页代码,不使用 JavaScript:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电影详情</title>
<style>
.movie-details {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
.movie-details h1 {
font-size: 32px;
text-align: center;
margin-top: 0;
}
.movie-details img {
display: block;
margin: 20px auto;
max-width: 100%;
height: auto;
}
.movie-details .description {
margin-bottom: 30px;
max-height: 200px;
overflow-y: scroll;
}
.movie-details h2 {
font-size: 24px;
margin-top: 0;
}
.movie-details p {
line-height: 1.5;
}
.movie-details .preview video {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="movie-details">
<h1>电影名称</h1>
<img src="海报图片地址" alt="电影海报">
<div class="description">
<h2>电影介绍</h2>
<p>电影简介</p>
<p>电影主演</p>
<p>电影导演</p>
<p>电影类型</p>
<p>电影上映时间</p>
<p>电影时长</p>
<p>电影评分</p>
<p>电影制片国家/地区</p>
</div>
<div class="preview">
<h2>试看视频</h2>
<video src="试看视频地址" controls></video>
</div>
</div>
</body>
</html>
```
这里使用 CSS 样式实现了文字介绍内容超出显示区域时,自动出现滚动条,以便拖动查看完整内容。同时,使用 HTML5 的 `video` 标签实现了试看视频的播放,并加上了控制条(`controls` 属性)。
阅读全文