先简单的用列表组件开发出一个移动端页面
时间: 2023-12-14 10:37:00 浏览: 30
好的,下面是一个简单的移动端页面,使用了列表组件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端页面</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
#list {
list-style: none;
margin: 0;
padding: 0;
}
#list li {
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
padding: 10px;
}
#list li:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div id="header">
<h1>移动端页面</h1>
</div>
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
</body>
</html>
```
这个页面包含一个顶部的标题栏和一个列表。列表使用了 `ul` 和 `li` 标签,样式通过 CSS 实现。在移动端,可以使用媒体查询来设置页面的样式,以适配不同的屏幕大小。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)