用html css 制作一个电影列表
时间: 2024-03-25 12:41:54 浏览: 19
好的,以下是一个简单的电影列表的HTML和CSS代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>电影列表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>电影列表</h1>
<div class="movie-list">
<div class="movie">
<img src="movie1.jpg">
<h2>电影1</h2>
<div class="rating">
<span class="star">★</span>
<span class="score">8.0</span>
</div>
<p class="genre">剧情 / 爱情</p>
<p class="summary">这是一部关于……的电影。</p>
</div>
<div class="movie">
<img src="movie2.jpg">
<h2>电影2</h2>
<div class="rating">
<span class="star">★</span>
<span class="score">7.5</span>
</div>
<p class="genre">喜剧 / 动作</p>
<p class="summary">这是一部关于……的电影。</p>
</div>
<div class="movie">
<img src="movie3.jpg">
<h2>电影3</h2>
<div class="rating">
<span class="star">★</span>
<span class="score">9.2</span>
</div>
<p class="genre">动画 / 奇幻</p>
<p class="summary">这是一部关于……的电影。</p>
</div>
<div class="movie">
<img src="movie4.jpg">
<h2>电影4</h2>
<div class="rating">
<span class="star">★</span>
<span class="score">6.8</span>
</div>
<p class="genre">恐怖 / 惊悚</p>
<p class="summary">这是一部关于……的电影。</p>
</div>
</div>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin: 20px 0;
}
.movie-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
padding: 0 50px;
}
.movie {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.movie img {
width: 100%;
height: auto;
}
.movie h2 {
margin: 10px 0;
font-size: 20px;
}
.rating {
display: flex;
justify-content: center;
align-items: center;
}
.rating .star {
color: #f1c40f;
font-size: 20px;
margin-right: 5px;
}
.rating .score {
font-size: 18px;
}
.genre {
margin: 10px 0;
font-size: 16px;
}
.summary {
font-size: 14px;
line-height: 1.5;
}
```
在这个例子中,我们使用了网格布局(grid)来放置电影列表,每行显示4个电影。每个电影单元格包含电影海报、电影名称、评分、类型和简介。使用CSS样式来美化页面,包括字体、颜色和间距等。
相关推荐
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)