html+css做一个影视类的网页源代码
时间: 2023-08-15 08:07:36 浏览: 181
以下是一个简单的影视类网页的HTML+CSS源代码示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>影视网站</title>
<link rel="stylesheet" type="text/css" 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>
<li><a href="#">动漫</a></li>
</ul>
</nav>
</header>
<main>
<section class="featured">
<h2>推荐影片</h2>
<div class="movie">
<img src="movie1.jpg" alt="电影1">
<h3>电影1</h3>
<p>简介</p>
</div>
<div class="movie">
<img src="movie2.jpg" alt="电影2">
<h3>电影2</h3>
<p>简介</p>
</div>
<div class="movie">
<img src="movie3.jpg" alt="电影3">
<h3>电影3</h3>
<p>简介</p>
</div>
</section>
<section class="movies">
<h2>电影</h2>
<div class="movie">
<img src="movie4.jpg" alt="电影4">
<h3>电影4</h3>
<p>简介</p>
</div>
<div class="movie">
<img src="movie5.jpg" alt="电影5">
<h3>电影5</h3>
<p>简介</p>
</div>
<div class="movie">
<img src="movie6.jpg" alt="电影6">
<h3>电影6</h3>
<p>简介</p>
</div>
<div class="movie">
<img src="movie7.jpg" alt="电影7">
<h3>电影7</h3>
<p>简介</p>
</div>
<div class="movie">
<img src="movie8.jpg" alt="电影8">
<h3>电影8</h3>
<p>简介</p>
</div>
<div class="movie">
<img src="movie9.jpg" alt="电影9">
<h3>电影9</h3>
<p>简介</p>
</div>
</section>
<section class="tvshows">
<h2>电视剧</h2>
<div class="tvshow">
<img src="tvshow1.jpg" alt="电视剧1">
<h3>电视剧1</h3>
<p>简介</p>
</div>
<div class="tvshow">
<img src="tvshow2.jpg" alt="电视剧2">
<h3>电视剧2</h3>
<p>简介</p>
</div>
<div class="tvshow">
<img src="tvshow3.jpg" alt="电视剧3">
<h3>电视剧3</h3>
<p>简介</p>
</div>
<div class="tvshow">
<img src="tvshow4.jpg" alt="电视剧4">
<h3>电视剧4</h3>
<p>简介</p>
</div>
<div class="tvshow">
<img src="tvshow5.jpg" alt="电视剧5">
<h3>电视剧5</h3>
<p>简介</p>
</div>
<div class="tvshow">
<img src="tvshow6.jpg" alt="电视剧6">
<h3>电视剧6</h3>
<p>简介</p>
</div>
</section>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
section h2 {
margin-top: 0;
}
.movie {
display: inline-block;
width: 200px;
margin-right: 20px;
}
.movie img {
width: 100%;
height: auto;
}
.movie h3 {
margin: 10px 0;
font-size: 18px;
}
.tvshow {
display: inline-block;
width: 200px;
margin-right: 20px;
}
.tvshow img {
width: 100%;
height: auto;
}
.tvshow h3 {
margin: 10px 0;
font-size: 18px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
注意:这只是一个示例,实际情况下您可能需要根据自己的需求进行修改和调整。