HTML和css设计电影介绍页面
时间: 2023-11-18 12:24:54 浏览: 43
好的,下面是一个简单的电影介绍页面的HTML和CSS代码。
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电影介绍</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 class="title">电影名称</h1>
<div class="poster">
<img src="电影海报.jpg" alt="电影海报">
</div>
</div>
<div class="content">
<div class="description">
<h2>电影简介</h2>
<p>这里是电影简介,可以写一些电影的故事情节、主题等等</p>
</div>
<div class="details">
<h2>电影详情</h2>
<ul>
<li><strong>导演:</strong>导演姓名</li>
<li><strong>主演:</strong>主演姓名1、主演姓名2、主演姓名3</li>
<li><strong>类型:</strong>电影类型</li>
<li><strong>制片国家/地区:</strong>制片国家/地区</li>
<li><strong>语言:</strong>电影语言</li>
<li><strong>上映日期:</strong>上映日期</li>
<li><strong>片长:</strong>电影时长</li>
</ul>
</div>
</div>
</div>
</body>
</html>
```
CSS代码:
```css
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.title {
font-size: 36px;
margin: 0;
}
.poster img {
width: 300px;
height: 450px;
}
.content {
display: flex;
flex-wrap: wrap;
}
.description {
flex: 1 1 50%;
padding-right: 20px;
}
.description h2 {
font-size: 24px;
margin-top: 0;
}
.description p {
font-size: 16px;
line-height: 1.5;
}
.details {
flex: 1 1 50%;
}
.details h2 {
font-size: 24px;
margin-top: 0;
}
.details ul {
list-style: none;
padding: 0;
}
.details li {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}
.details li strong {
font-weight: bold;
margin-right: 5px;
}
```
这个示例页面使用了一些常见的HTML元素,如标题、段落、列表、图片等等,同时使用CSS对它们进行布局和样式设置。在这个示例中,我们使用了flexbox布局来实现页面的响应式设计,这样页面可以根据屏幕大小自动调整布局和大小。
希望这个例子对你有帮助!