电影详情页布局html
时间: 2023-10-08 17:14:18 浏览: 78
这是一个简单的电影详情页布局的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" 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>
</ul>
</nav>
</header>
<main>
<section class="poster">
<img src="movie-poster.jpg" alt="电影海报">
</section>
<section class="movie-info">
<h2>电影信息</h2>
<ul>
<li><strong>导演:</strong>某某导演</li>
<li><strong>主演:</strong>某某演员、某某演员</li>
<li><strong>类型:</strong>剧情、喜剧、爱情</li>
<li><strong>上映时间:</strong>2021年3月20日</li>
<li><strong>片长:</strong>120分钟</li>
<li><strong>制片国家/地区:</strong>中国大陆</li>
</ul>
</section>
<section class="plot">
<h2>剧情介绍</h2>
<p>这里是电影的剧情介绍,可以写一段简短的概述,引起观众的兴趣。</p>
<p>接着可以写一些详细的情节描述,但要避免剧透。</p>
</section>
<section class="cast">
<h2>演员表</h2>
<ul>
<li><img src="actor1.jpg" alt="演员1"> 某某演员1</li>
<li><img src="actor2.jpg" alt="演员2"> 某某演员2</li>
<li><img src="actor3.jpg" alt="演员3"> 某某演员3</li>
</ul>
</section>
<section class="reviews">
<h2>影评</h2>
<ul>
<li>
<h3>影评标题1</h3>
<p>这里是影评的内容,可以写一些对电影的评价和看法。</p>
</li>
<li>
<h3>影评标题2</h3>
<p>这里是影评的内容,可以写一些对电影的评价和看法。</p>
</li>
</ul>
</section>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
```
注意:以上代码只是示例,具体实现需要根据实际情况进行调整和完善。另外,为了使页面样式更美观,可以使用CSS来进行样式设计。