HTML加css电影页面代码
时间: 2024-01-22 22:02:41 浏览: 36
以下是一个简单的电影页面,包括HTML和CSS代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>电影页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>电影页面</h1>
</header>
<main>
<section>
<h2>热门电影</h2>
<ul>
<li><a href="#">复仇者联盟4:终局之战</a></li>
<li><a href="#">阿拉丁</a></li>
<li><a href="#">哪吒之魔童降世</a></li>
</ul>
</section>
<section>
<h2>最新电影</h2>
<ul>
<li><a href="#">寄生虫</a></li>
<li><a href="#">大侦探皮卡丘</a></li>
<li><a href="#">海市蜃楼</a></li>
</ul>
</section>
<section>
<h2>即将上映</h2>
<ul>
<li><a href="#">星球大战:天行者崛起</a></li>
<li><a href="#">黑衣人:全球追缉</a></li>
<li><a href="#">小丑</a></li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2020 电影页面</p>
</footer>
</body>
</html>
```
CSS代码:
```css
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
}
main {
margin: 20px;
display: flex;
flex-wrap: wrap;
}
section {
flex: 1;
margin: 10px;
padding: 20px;
background-color: #f7f7f7;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
h2 {
margin-top: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
```
此代码将创建一个简单的电影页面,其中包括一个标题、三个电影列表(热门电影、最新电影和即将上映),以及一个页脚。CSS将为页面添加样式,包括背景颜色、边框和阴影。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)