html用css设计一个简单浅蓝色调电影分类页面
时间: 2023-06-19 08:03:34 浏览: 61
以下是一个简单的浅蓝色调电影分类页面的 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>
<li><a href="#">恐怖</a></li>
</ul>
</nav>
<main>
<section>
<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>
<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>
<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>
<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>
<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>
</main>
<footer>
<p>版权所有 © 2021 电影分类</p>
</footer>
</body>
</html>
```
CSS 样式代码:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
}
header {
background-color: #87cefa;
padding: 20px;
}
header h1 {
margin: 0;
color: white;
}
nav {
background-color: #b0e0e6;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li a {
color: #000080;
text-decoration: none;
}
nav li a:hover {
color: #87cefa;
}
main {
padding: 20px;
display: flex;
flex-wrap: wrap;
}
section {
flex: 1;
min-width: 200px;
margin: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
section h2 {
padding: 10px;
margin: 0;
background-color: #87cefa;
color: white;
border-radius: 10px 10px 0 0;
}
section ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section li {
padding: 10px;
border-bottom: 1px solid #f0f0f0;
}
section li:last-child {
border-bottom: none;
}
section li a {
color: #000080;
text-decoration: none;
}
section li a:hover {
color: #87cefa;
}
footer {
background-color: #87cefa;
padding: 10px;
text-align: center;
color: white;
}
```
你可以将这些代码复制到一个 HTML 文件和一个 CSS 文件中,然后在浏览器中打开 HTML 文件以查看结果。