请提供一个成熟的电影观赏网页html与css内嵌的代码
时间: 2023-07-31 15:08:26 浏览: 163
html css 电影网站源码
以下是一个简单的电影观赏网页的HTML和CSS代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>电影观赏网页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>电影观赏网页</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">电影列表</a></li>
<li><a href="#">最新电影</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<section>
<h2>最新电影</h2>
<div class="movie">
<img src="movie1.jpg" alt="电影1">
<h3>电影1</h3>
<p>简介:这是一部很好看的电影。</p>
<a href="#">观看</a>
</div>
<div class="movie">
<img src="movie2.jpg" alt="电影2">
<h3>电影2</h3>
<p>简介:这也是一部很好看的电影。</p>
<a href="#">观看</a>
</div>
<div class="movie">
<img src="movie3.jpg" alt="电影3">
<h3>电影3</h3>
<p>简介:这还是一部很好看的电影。</p>
<a href="#">观看</a>
</div>
</section>
<footer>
<p>版权所有 © 2021 电影观赏网页</p>
</footer>
</body>
</html>
```
CSS代码:
```css
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #444;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
padding: 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.movie {
background-color: #eee;
padding: 20px;
margin-bottom: 20px;
text-align: center;
max-width: 300px;
}
.movie img {
max-width: 100%;
height: auto;
}
.movie h3 {
margin-top: 0;
}
.movie p {
margin-top: 10px;
}
.movie a {
display: block;
margin-top: 10px;
background-color: #444;
color: #fff;
padding: 10px;
text-decoration: none;
}
.movie a:hover {
background-color: #333;
}
```
你只需将上述代码保存成两个文件,一个是HTML文件,另一个是CSS文件,命名为index.html和style.css,然后在同一文件夹下打开HTML文件即可看到效果。
阅读全文