用 html代码和css写一个 电影网页
时间: 2023-10-05 20:13:32 浏览: 192
以下是一个简单的电影网页的 HTML 代码和 CSS 样式:
```html
<!DOCTYPE html>
<html>
<head>
<title>电影网页</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
h1 {
font-size: 40px;
margin: 0;
}
nav {
background-color: #666;
color: #fff;
padding: 10px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 5px;
}
nav a:hover {
background-color: #999;
}
section {
margin: 20px;
}
article {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
article h2 {
font-size: 30px;
margin-top: 0;
}
article p {
font-size: 20px;
margin-bottom: 0;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>电影网页</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">电影列表</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<section>
<article>
<h2>复仇者联盟4:终局之战</h2>
<p>上映时间:2019年4月24日</p>
<p>导演:安东尼·罗素 / 乔·罗素</p>
<p>主演:小罗伯特·唐尼 / 克里斯·埃文斯 / 马克·鲁法洛 / 克里斯·海姆斯沃斯 / 斯嘉丽·约翰逊 / 杰瑞米·雷纳 / 保罗·路德 / 本尼迪克特·康伯巴奇 / 查德维克·博斯曼 / 汤姆·希德勒斯顿 / 伊丽莎白·奥尔森 / 安东尼·麦凯 / 唐·钱德尔 / 本尼西奥·德尔·托罗 / 丹娜·古瑞拉</p>
</article>
<article>
<h2>流浪地球</h2>
<p>上映时间:2019年2月5日</p>
<p>导演:郭帆</p>
<p>主演:屈楚萧 / 吴京 / 李光洁 / 吴孟达 / 赵今麦 / 赵子琪 / 邵翔 / 翟文斌</p>
</article>
</section>
<footer>
<p>版权所有 © 2021 电影网页</p>
</footer>
</body>
</html>
```
你可以将这段代码复制到一个 HTML 文件中,并用浏览器打开它,看看效果如何。
当然,这只是一个简单的示例,你可以根据自己的需求和喜好进行更改和定制。
阅读全文