电影网站设计html页面
时间: 2023-10-12 16:36:00 浏览: 115
web 电影网页_电影网页设计
5星 · 资源好评率100%
设计电影网站的HTML页面可以分成以下几个部分:
1. 头部:包括网站的logo、导航栏、搜索框等;
2. 主体:包括电影分类、电影列表、电影详情等;
3. 底部:包括网站的版权信息、联系方式等。
下面是一个简单的电影网站HTML页面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>电影网站</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- 头部 -->
<header>
<div class="logo">
<a href="#">电影网站</a>
</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">电影分类</a></li>
<li><a href="#">最新电影</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<div class="search">
<form action="#" method="get">
<input type="text" name="search" placeholder="搜索电影">
<button type="submit">搜索</button>
</form>
</div>
</header>
<!-- 主体 -->
<main>
<section class="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>
</ul>
</section>
<section class="movies">
<h2>最新电影</h2>
<ul>
<li>
<a href="#">
<img src="movie1.jpg" alt="电影海报">
<h3>电影名称</h3>
</a>
</li>
<li>
<a href="#">
<img src="movie2.jpg" alt="电影海报">
<h3>电影名称</h3>
</a>
</li>
<li>
<a href="#">
<img src="movie3.jpg" alt="电影海报">
<h3>电影名称</h3>
</a>
</li>
<li>
<a href="#">
<img src="movie4.jpg" alt="电影海报">
<h3>电影名称</h3>
</a>
</li>
</ul>
</section>
<section class="movie-details">
<h2>电影详情</h2>
<h3>电影名称</h3>
<p>电影简介</p>
<p>主演:演员1,演员2,演员3</p>
<p>导演:导演名称</p>
</section>
</main>
<!-- 底部 -->
<footer>
<p>版权所有 © 2021 电影网站</p>
<p>联系方式:电话:+86 1234567890,邮箱:info@movie.com</p>
</footer>
</body>
</html>
```
以上代码只是一个简单的示例,实际上电影网站的HTML页面需要根据具体的需求进行设计和开发。
阅读全文