电影详情页布局html和css
时间: 2023-09-20 08:03:32 浏览: 59
电影详情页布局的HTML和CSS可以根据具体需求进行设计,以下是一个简单的示例:
HTML部分:
```html
<div class="movie-detail">
<div class="movie-poster">
<img src="path/to/poster.jpg" alt="Movie Poster">
</div>
<div class="movie-info">
<h1 class="movie-title">Movie Title</h1>
<p class="movie-summary">Movie summary or description goes here.</p>
<ul class="movie-details">
<li><strong>Director:</strong> Director's Name</li>
<li><strong>Stars:</strong> Actor 1, Actor 2, Actor 3</li>
<li><strong>Genre:</strong> Action, Drama, Sci-Fi</li>
<li><strong>Release Date:</strong> January 1, 2022</li>
<li><strong>Runtime:</strong> 120 minutes</li>
<li><strong>Rating:</strong> 8.5/10</li>
</ul>
<div class="movie-trailer">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
```
CSS部分:
```css
.movie-detail {
display: flex;
flex-wrap: wrap;
}
.movie-poster {
width: 40%;
margin-right: 2rem;
}
.movie-poster img {
max-width: 100%;
height: auto;
}
.movie-info {
width: 55%;
}
.movie-title {
font-size: 3rem;
margin-bottom: 1rem;
}
.movie-summary {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.movie-details {
list-style: none;
padding-left: 0;
margin-bottom: 2rem;
}
.movie-details li {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.movie-details strong {
font-weight: bold;
}
.movie-trailer {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
}
.movie-trailer iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
这个示例使用了flex布局,将电影海报和电影信息分为两个部分,并使用CSS样式进行了布局。其中,电影海报部分使用了40%的宽度,电影信息部分使用了55%的宽度,电影详情部分使用了无序列表进行排列。最后,电影预告片使用了响应式嵌入框架进行嵌入。