html+css+js制作电影网站
时间: 2023-08-29 13:06:42 浏览: 66
好的,以下是一个简单的电影网站示例,使用 HTML、CSS 和 JavaScript 进行制作:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电影网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>电影网站</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">电影分类</a></li>
<li><a href="#">最新电影</a></li>
<li><a href="#">登录</a></li>
</ul>
</nav>
</header>
<section id="banner">
<h2>欢迎来到电影网站</h2>
<p>观看最新电影,畅享视觉盛宴</p>
<button>查看更多</button>
</section>
<section id="categories">
<h2>电影分类</h2>
<ul>
<li><a href="#">动作</a></li>
<li><a href="#">科幻</a></li>
<li><a href="#">爱情</a></li>
<li><a href="#">恐怖</a></li>
<li><a href="#">喜剧</a></li>
<li><a href="#">剧情</a></li>
</ul>
</section>
<section id="movies">
<h2>最新电影</h2>
<div class="movie">
<img src="movie1.jpg" alt="电影1">
<h3>电影1</h3>
<p>上映时间:2021-01-01</p>
</div>
<div class="movie">
<img src="movie2.jpg" alt="电影2">
<h3>电影2</h3>
<p>上映时间:2021-02-01</p>
</div>
<div class="movie">
<img src="movie3.jpg" alt="电影3">
<h3>电影3</h3>
<p>上映时间:2021-03-01</p>
</div>
<div class="movie">
<img src="movie4.jpg" alt="电影4">
<h3>电影4</h3>
<p>上映时间:2021-04-01</p>
</div>
</section>
<section id="subscribe">
<h2>订阅我们</h2>
<p>订阅我们的电影资讯,获取最新电影信息和优惠活动</p>
<form>
<input type="email" placeholder="请输入您的邮箱地址">
<button>订阅</button>
</form>
</section>
<footer>
<p>版权所有 © 2021 电影网站</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
}
nav ul {
list-style: none;
display: flex;
}
nav li {
margin-right: 20px;
}
nav li:last-child {
margin-right: 0;
}
nav a {
color: #fff;
}
section {
padding: 60px 40px;
}
#banner {
background-image: url(banner.jpg);
height: 500px;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
}
#banner h2 {
font-size: 60px;
margin-bottom: 20px;
}
#banner p {
font-size: 24px;
margin-bottom: 40px;
}
#banner button {
background-color: #fff;
color: #333;
border: none;
padding: 20px 40px;
font-size: 20px;
cursor: pointer;
}
#categories ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
}
#categories li {
margin-right: 20px;
}
#categories li:last-child {
margin-right: 0;
}
#categories a {
color: #333;
font-size: 20px;
}
#movies {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.movie {
width: 300px;
margin-bottom: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.movie img {
width: 100%;
height: 400px;
object-fit: cover;
margin-bottom: 20px;
}
.movie h3 {
font-size: 30px;
margin-bottom: 20px;
}
.movie p {
font-size: 18px;
}
#subscribe {
text-align: center;
margin-bottom: 60px;
}
#subscribe h2 {
margin-bottom: 20px;
}
#subscribe p {
font-size: 20px;
margin-bottom: 40px;
}
form input[type="email"] {
width: 300px;
height: 40px;
padding: 0 10px;
margin-right: 20px;
border: 1px solid #ccc;
border-radius: 20px;
outline: none;
}
form button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 20px;
font-size: 20px;
cursor: pointer;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
```
JavaScript 代码:
```javascript
// 在此处添加 JavaScript 代码
// 可以实现页面交互效果,如点击按钮弹出提示框等
```
这只是一个简单的电影网站示例,你可以根据自己的需求进行修改和完善。