用html css写一个关于电影的网页
时间: 2024-10-16 20:09:28 浏览: 31
创建一个关于电影的简单网页,可以使用HTML结构来展示内容,CSS负责美化和布局。下面是一个基础示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>电影推荐</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入样式表 -->
</head>
<body>
<header>
<h1>欢迎来到电影世界</h1>
<nav>
<ul>
<li><a href="#movies">热门电影</a></li>
<li><a href="#upcoming">即将上映</a></li>
</ul>
</nav>
</header>
<main id="movies">
<section class="movie-list">
<h2>热门电影</h2>
<div class="movie-item">
<img src="movie1.jpg" alt="电影1海报">
<h3>电影1名称</h3>
<p>简介...</p>
</div>
<!-- 可以添加更多电影项 -->
</section>
</main>
<main id="upcoming">
<section class="movie-list">
<h2>即将上映</h2>
<div class="movie-item">
<img src="movie2.jpg" alt="电影2海报">
<h3>电影2名称</h3>
<p>简介...</p>
</div>
</section>
</main>
<footer>
<p>© 2023 电影天堂</p>
</footer>
</body>
</html>
```
接下来,你可以创建一个名为`styles.css`的文件,用于编写样式:
```css
/* styles.css */
body {
font-family: Arial, sans-serif;
}
header {
background-color: #f1f1f1;
padding: 20px;
}
nav ul {
list-style-type: none;
display: flex;
}
.movie-list {
margin: 20px;
}
.movie-item {
text-align: center;
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.movie-item img {
width: 100%;
height: auto;
}
```
这个例子展示了基本的网页结构,包含了标题、导航、两个电影列表(热门和即将上映)、页脚等部分,同时CSS负责了基本的样式。你可以根据实际需求调整元素位置、颜色和尺寸等。
阅读全文