用html和css制作一个电影演员大全的页面
时间: 2023-11-05 13:09:23 浏览: 83
好的,以下是一个简单的电影演员大全页面的 HTML 和 CSS 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>电影演员大全</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 48px;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
}
.actor {
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
padding: 20px 0;
}
.actor img {
width: 150px;
margin-right: 20px;
}
.actor h2 {
margin: 0;
font-size: 24px;
}
.actor p {
margin: 10px 0 0;
font-size: 18px;
}
</style>
</head>
<body>
<header>
<h1>电影演员大全</h1>
</header>
<div class="container">
<div class="actor">
<img src="https://via.placeholder.com/150" alt="Actor">
<div>
<h2>演员姓名</h2>
<p>出生日期:2000年1月1日</p>
<p>国籍:中国</p>
<p>代表作品:电影名称1、电影名称2</p>
</div>
</div>
<div class="actor">
<img src="https://via.placeholder.com/150" alt="Actor">
<div>
<h2>演员姓名</h2>
<p>出生日期:2000年1月1日</p>
<p>国籍:中国</p>
<p>代表作品:电影名称1、电影名称2</p>
</div>
</div>
<!-- 添加更多演员信息 -->
</div>
</body>
</html>
```
在这个示例中,我们首先定义了一个页面的标题和基本样式,包括页面字体、边距和背景颜色。然后,我们定义了一个包含演员信息的容器,并定义了一个名为 `actor` 的类来表示每个演员的信息。
每个演员信息由一张头像图片和一个包含姓名、出生日期、国籍和代表作品的信息框组成。我们使用 `flex` 属性来使图片和信息框对齐,并使用 `border` 属性添加边框,以使每个信息框之间有明显的分隔线。
你可以按照这个示例继续添加更多演员信息,以创建一个完整的电影演员大全页面。
阅读全文