HTML网页设计制作一个简约风六部电影推荐网页,并且可以链接其他网页
时间: 2023-11-20 18:05:34 浏览: 49
好的,下面是一个简约风格的六部电影推荐网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>电影推荐</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #F0F0F0;
}
h1 {
text-align: center;
margin-top: 50px;
font-size: 36px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #FFF;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.movie {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px;
}
.movie-card {
width: 32%;
margin-bottom: 20px;
background-color: #FFF;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.movie-card img {
width: 100%;
height: auto;
object-fit: cover;
}
.movie-card h2 {
margin: 10px;
font-size: 24px;
color: #333;
}
.movie-card p {
margin: 10px;
font-size: 16px;
color: #666;
}
.movie-card a {
display: block;
margin: 10px;
padding: 10px;
background-color: #333;
color: #FFF;
text-align: center;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.2s ease-in-out;
}
.movie-card a:hover {
background-color: #666;
}
</style>
</head>
<body>
<h1>六部电影推荐</h1>
<div class="container">
<div class="movie">
<div class="movie-card">
<img src="https://picsum.photos/id/1015/400/300">
<h2>肖申克的救赎</h2>
<p>导演:弗兰克·德拉邦特 / 主演:蒂姆·罗宾斯、摩根·弗里曼</p>
<a href="#">了解更多</a>
</div>
<div class="movie-card">
<img src="https://picsum.photos/id/1018/400/300">
<h2>阿甘正传</h2>
<p>导演:罗伯特·泽米吉斯 / 主演:汤姆·汉克斯、罗宾·怀特</p>
<a href="#">了解更多</a>
</div>
<div class="movie-card">
<img src="https://picsum.photos/id/1027/400/300">
<h2>泰坦尼克号</h2>
<p>导演:詹姆斯·卡梅隆 / 主演:莱昂纳多·迪卡普里奥、凯特·温丝莱特</p>
<a href="#">了解更多</a>
</div>
<div class="movie-card">
<img src="https://picsum.photos/id/1035/400/300">
<h2>盗梦空间</h2>
<p>导演:克里斯托弗·诺兰 / 主演:莱昂纳多·迪卡普里奥、艾伦·佩吉</p>
<a href="#">了解更多</a>
</div>
<div class="movie-card">
<img src="https://picsum.photos/id/1060/400/300">
<h2>星际穿越</h2>
<p>导演:克里斯托弗·诺兰 / 主演:马修·麦康纳、安妮·海瑟薇</p>
<a href="#">了解更多</a>
</div>
<div class="movie-card">
<img src="https://picsum.photos/id/1074/400/300">
<h2>放牛班的春天</h2>
<p>导演:克里斯托夫·巴拉蒂 / 主演:杰拉尔·朱诺、弗朗索瓦·贝莱昂</p>
<a href="#">了解更多</a>
</div>
</div>
</div>
</body>
</html>
```
这个网页使用了 HTML 和 CSS,通过 `div` 和 `flex` 布局来实现了电影卡片的排列。每个电影卡片包括了一张海报、电影名、导演和主演等信息,以及一个链接到更多详情的按钮。你可以根据需要修改电影信息和样式。
如果你想要链接其他网页,可以使用 HTML 的 `a` 标签。比如,如果你想要在电影详情页面链接到 IMDB 网站,你可以这样写:
```html
<a href="https://www.imdb.com/title/tt0111161/" target="_blank">IMDB</a>
```
其中 `href` 属性指定了链接的地址,`target="_blank"` 属性表示在新窗口中打开链接。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)