console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<title></title>
</head>
<body>
<div class="main">
<div class="title">这是标题</div>
<div class="top">
<input type="" placeholder="搜索">
</div>
<div class="list">
<ol type="A">
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
<li>通讯录</li>
</ol>
</div>
</div>
</body>
</html>
.main{
width: 350px; border: 1px solid '#000'; display: flex; background: #fff; position: relative; flex-direction: column; margin: 0 auto;
}
.title{
border-bottom: 1px solid #dfdfdf; font-size: 16px; color: #333; line-height: 45px; font-weight: bold; text-align: center;
}
.top{
width: 100%; padding:15px 15px 10px 15px; box-sizing: border-box; position: sticky; top: 0px; background:#fff;
}
.top input {
width: 100%; border: 1px solid #dfdfdf; box-sizing: border-box; padding: 5px 10px; font-size: 15px; line-height: 30px; font-size: 13px; border-radius: 20px;
}
.list{
display: flex; flex-direction: column; padding: 0 10px;
}
.list ol{
padding-left: 20px; line-height: 40px; font-size: 14px; color: #333;
}
.list ol li{
list-style-type:upper-alpha; border-bottom: 1px solid #dfdfdf;
}