写一个移动端h5的列表页,淡灰色背景,标题蓝色
时间: 2023-03-19 15:24:18 浏览: 97
以下是一个简单的移动端 H5 列表页的 HTML 和 CSS 代码,其中包含淡灰色背景和蓝色标题:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表页</title>
<style>
body {
background-color: #f7f7f7; /* 淡灰色背景 */
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #1e90ff; /* 蓝色标题 */
color: white;
padding: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
}
.list {
margin: 20px;
padding: 0;
list-style: none;
}
.list-item {
background-color: white;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.list-item-title {
color: #1e90ff; /* 蓝色标题 */
font-size: 20px;
margin: 0;
padding: 0;
}
.list-item-description {
color: #666;
font-size: 16px;
margin: 5px 0 0 0;
padding: 0;
}
</style>
</head>
<body>
<div class="header">列表页</div>
<ul class="list">
<li class="list-item">
<h2 class="list-item-title">列表项标题 1</h2>
<p class="list-item-description">列表项描述 1</p>
</li>
<li class="list-item">
<h2 class="list-item-title">列表项标题 2</h2>
<p class="list-item-description">列表项描述 2</p>
</li>
<li class="list-item">
<h2 class="list-item-title">列表项标题 3</h2>
<p class="list-item-description">列表项描述 3</p>
</li>
</ul>
</body>
</html>
```
在这个代码中,`.header` 类代表页面顶部的标题,`.list` 类代表列表本身,`.list-item` 类代表每一个列表项,`.list-item-title` 类代表每一个列表项的标题,`.list-item-description` 类代表每一个列表项的描述。你可以根据自己的需求进行修改。