html电影网页设计代码带素材
时间: 2023-08-18 16:04:18 浏览: 82
以下是一个简单的HTML电影网页设计代码示例,包括一些素材:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电影网页设计</title>
<style>
/* 样式表 */
body {
background-color: #f5f5f5;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
font-weight: normal;
}
nav {
background-color: #eee;
padding: 10px;
overflow: hidden;
}
nav a {
float: left;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ddd;
color: #333;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
section div {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
margin: 10px;
box-shadow: 0px 0px 10px #ccc;
width: 300px;
}
section div img {
width: 100%;
height: 200px;
object-fit: cover;
}
section div h2 {
font-size: 24px;
margin: 10px;
}
section div p {
font-size: 16px;
margin: 10px;
text-align: justify;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
footer p {
margin: 0;
font-size: 14px;
}
</style>
</head>
<body>
<header>
<h1>电影网</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">最新电影</a>
<a href="#">热门电影</a>
<a href="#">经典电影</a>
</nav>
<section>
<div>
<img src="https://picsum.photos/id/1015/300/200" alt="电影1">
<h2>电影1</h2>
<p>这里是电影1的简介,可以写一些关于电影的介绍。</p>
</div>
<div>
<img src="https://picsum.photos/id/1021/300/200" alt="电影2">
<h2>电影2</h2>
<p>这里是电影2的简介,可以写一些关于电影的介绍。</p>
</div>
<div>
<img src="https://picsum.photos/id/103/300/200" alt="电影3">
<h2>电影3</h2>
<p>这里是电影3的简介,可以写一些关于电影的介绍。</p>
</div>
<div>
<img src="https://picsum.photos/id/104/300/200" alt="电影4">
<h2>电影4</h2>
<p>这里是电影4的简介,可以写一些关于电影的介绍。</p>
</div>
<div>
<img src="https://picsum.photos/id/105/300/200" alt="电影5">
<h2>电影5</h2>
<p>这里是电影5的简介,可以写一些关于电影的介绍。</p>
</div>
<div>
<img src="https://picsum.photos/id/1060/300/200" alt="电影6">
<h2>电影6</h2>
<p>这里是电影6的简介,可以写一些关于电影的介绍。</p>
</div>
</section>
<footer>
<p>版权所有 © 2021 电影网</p>
</footer>
</body>
</html>
```
注意:这里使用了一个[Lorem Picsum](https://picsum.photos/)来生成免费的随机图片。如果你想使用自己的图片,请替换 `img` 标签的 `src` 属性。