用html+css写一个电影详情页
时间: 2023-08-13 13:06:48 浏览: 189
以下是一个示例的电影详情页的HTML和CSS代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>电影详情页</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.movie-header {
text-align: center;
}
.movie-title {
font-size: 30px;
margin-bottom: 10px;
}
.movie-info {
font-size: 16px;
color: #666666;
margin-bottom: 20px;
}
.movie-poster {
width: 300px;
height: auto;
margin-right: 20px;
float: left;
}
.movie-summary {
margin-top: 20px;
clear: both;
}
.movie-summary h2 {
font-size: 24px;
margin-bottom: 10px;
}
.movie-summary p {
line-height: 1.5;
color: #333333;
}
.movie-genre {
margin-top: 20px;
}
.movie-genre ul {
list-style-type: none;
padding-left: 0;
}
.movie-genre li {
display: inline-block;
margin-right: 10px;
background-color: #f2f2f2;
padding: 5px 10px;
border-radius: 5px;
}
.movie-actors {
margin-top: 20px;
}
.movie-actors ul {
list-style-type: none;
padding-left: 0;
}
.movie-actors li {
margin-bottom: 10px;
}
.movie-actors img {
width: 50px;
height: auto;
margin-right: 10px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="movie-header">
<h1 class="movie-title">电影标题</h1>
<p class="movie-info">导演: 导演姓名 | 上映日期: 2022-01-01 | 时长: 120分钟</p>
</div>
<div class="movie-poster">
<img src="movie-poster.jpg" alt="电影海报">
</div>
<div class="movie-summary">
<h2>剧情简介</h2>
<p>这里是电影的剧情简介,描述电影的故事梗概和主要情节。</p>
</div>
<div class="movie-genre">
<h2>类型</h2>
<ul>
<li>动作</li>
<li>冒险</li>
<li>科幻</li>
</ul>
</div>
<div class="movie-actors">
<h2>主要演员</h2>
<ul>
<li>
<img src="actor1.jpg" alt="演员1">
演员1
</li>
<li>
<img src="actor2.jpg" alt="演员2">
演员2
</li>
<li>
<img src="actor3.jpg" alt="演员3">
演员3
</li>
</ul>
</div>
</div>
</body>
</html>
```
上述代码中,我们使用了简单的HTML结构和CSS样式来创建电影详情页。`.container` 类用于设置最大宽度并居中对齐内容。`.movie-header` 类用于电影标题和信息的居中对齐。`.movie-poster` 类用于设置海报图片的大小和浮动到左侧。`.movie-summary` 类用于设置剧情简介的样式。`.movie-genre` 和 `.movie-actors` 类用于设置类型和演员的样式。
你可以将上述代码复制到一个HTML文件中,并将相应的图片资源替换为实际的图片路径,以查看效果。希望能对你有所帮助!如果有任何问题,请随时提问。