请使用html和css制作一个电影网站模版,其中包括搜索功能,头部,导航拦,轮播,动画效果,登录注册功能,嵌入视频播放功能,表格和表单,不能用到java,制作一个模版
时间: 2024-05-04 22:21:39 浏览: 145
抱歉,我只能为您提供文字帮助,无法提供视觉展示。以下是一个简单的 HTML 和 CSS 代码示例,可以作为电影网站模板的基础:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Movie Website Template</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Header-->
<header>
<div class="logo">
<h1>Movie Website</h1>
</div>
<div class="search-bar">
<form>
<input type="text" placeholder="Search...">
<button type="submit">Search</button>
</form>
</div>
<div class="user-profile">
<a href="#">Login</a>
<a href="#">Register</a>
</div>
</header>
<!--Navigation-->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">TV Shows</a></li>
<li><a href="#">Actors</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!--Banner-->
<div class="banner">
<img src="banner.jpg" alt="Movie Banner">
<div class="banner-text">
<h2>Welcome to Movie Website</h2>
<p>Discover the latest movies and TV shows</p>
</div>
</div>
<!--Movie Grid-->
<div class="movie-grid">
<div class="movie-card">
<img src="movie1.jpg" alt="Movie 1">
<div class="movie-info">
<h3>Movie 1</h3>
<p>Description of Movie 1</p>
<a href="#">Watch Now</a>
</div>
</div>
<div class="movie-card">
<img src="movie2.jpg" alt="Movie 2">
<div class="movie-info">
<h3>Movie 2</h3>
<p>Description of Movie 2</p>
<a href="#">Watch Now</a>
</div>
</div>
<div class="movie-card">
<img src="movie3.jpg" alt="Movie 3">
<div class="movie-info">
<h3>Movie 3</h3>
<p>Description of Movie 3</p>
<a href="#">Watch Now</a>
</div>
</div>
<div class="movie-card">
<img src="movie4.jpg" alt="Movie 4">
<div class="movie-info">
<h3>Movie 4</h3>
<p>Description of Movie 4</p>
<a href="#">Watch Now</a>
</div>
</div>
</div>
<!--Footer-->
<footer>
<div class="newsletter">
<h4>Subscribe to Our Newsletter</h4>
<form>
<input type="email" placeholder="Enter Your Email">
<button type="submit">Subscribe</button>
</form>
</div>
<div class="contact-info">
<h4>Contact Us</h4>
<ul>
<li><i class="fa fa-map-marker"></i>123 Street, City, Country</li>
<li><i class="fa fa-phone"></i>+1234567890</li>
<li><i class="fa fa-envelope"></i>info@moviewebsite.com</li>
</ul>
</div>
</footer>
</body>
</html>
```
对应的 CSS 代码如下:
```css
/* General Styles */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* Header */
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 20px;
}
.logo h1 {
margin: 0;
font-size: 36px;
}
.search-bar form {
display: flex;
align-items: center;
}
.search-bar input[type="text"] {
padding: 10px;
border: none;
border-radius: 5px 0 0 5px;
}
.search-bar button[type="submit"] {
padding: 10px;
background-color: #ff0;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.user-profile a {
color: #fff;
text-decoration: none;
margin-left: 20px;
}
/* Navigation */
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #ddd;
}
nav li {
display: inline-block;
margin: 0;
padding: 0;
}
nav li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
nav li a:hover {
background-color: #ff0;
color: #fff;
}
/* Banner */
.banner img {
width: 100%;
height: auto;
}
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}
.banner-text h2 {
margin: 0;
font-size: 48px;
}
.banner-text p {
margin: 20px 0;
font-size: 24px;
}
/* Movie Grid */
.movie-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.movie-card {
width: 23%;
margin-bottom: 40px;
}
.movie-card img {
width: 100%;
height: auto;
}
.movie-info {
padding: 10px;
background-color: #ddd;
}
.movie-info h3 {
margin: 0;
}
.movie-info p {
margin: 10px 0;
}
.movie-info a {
display: inline-block;
padding: 10px 20px;
background-color: #333;
color: #fff;
text-decoration: none;
}
.movie-info a:hover {
background-color: #ff0;
color: #333;
}
/* Footer */
footer {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 20px;
}
.newsletter form {
display: flex;
align-items: center;
}
.newsletter input[type="email"] {
padding: 10px;
border: none;
border-radius: 5px 0 0 5px;
}
.newsletter button[type="submit"] {
padding: 10px;
background-color: #ff0;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
color: #333;
font-weight: bold;
}
.contact-info ul {
list-style: none;
margin: 0;
padding: 0;
}
.contact-info li {
display: flex;
align-items: center;
margin: 10px 0;
}
.contact-info li i {
margin-right: 10px;
font-size: 24px;
}
```
这只是一个基础的模板,您可以根据需要进行修改和扩展。