代码：
<!DOCTYPE html>
<html>
<head>
<title>用户列表</title>
<style type="text/css">
body {
background: #222;
}
.list {
width: 300px;
border: 1px solid #666;
margin: 0 auto;
background: #FFF;
}
.list .header {
height: 80px;
border-bottom: 1px solid #666;
text-align: center;
line-height: 80px;
}
.list .header a {
text-decoration: none;
color: #222;
font-size: 30px;
float: left;
}
.list .body .user{
height: 180px;
border-bottom: 1px solid #666;
}
.list .body .user .u_left {
height: 100%;
width: 186px;
float: left;
}
.list .body .user .u_left .d1 {
width: 80px;
height: 100%;
float: left;
text-align: center;
line-height: 238px;
}
.list .body .user .u_left .d1 img {
width: 66px;
height: 66px;
border-radius: 50%;
}
.list .body .user .u_left .d2 {
width: 106px;
height: 100%;
float: left;
}
.list .body .user .u_left .d2 .d2_1{
height: 100px;
line-height: 150px;
}
.list .body .user .u_left .d2 .d2_2{
font-size: 12px;
color: #666;
}
.list .body .user .gz {
width: 80px;
height: 28px;
background: green;
color: #FFFFFF;
text-align: center;
line-height: 28px;
float: right;
border-radius: 10px;
margin: 70px 16px;
}
</style>
</head>
<body>
<div class="list">
<div class="header">
<span style="margin-left: -23px;">用户</span>
<a href="#"><</a>
</div>
<div class="body">
<div class="user">
<div class="u_left">
<div class="d1">
<img src="img/4.jpg">
</div>
<div class="d2">
<div class="d2_1">天涯</div>
<div class="d2_2">粉丝数量：1230</div>
</div>
</div>
<a class="gz">关注</a>
</div>
<div class="user">
<div class="u_left">
<div class="d1">
<img src="img/3.jpg">
</div>
<div class="d2">
<div class="d2_1">小猫咪</div>
<div class="d2_2">粉丝数量：666</div>
</div>
</div>
<a class="gz">关注</a>
</div>
<div class="user">
<div class="u_left">
<div class="d1">
<img src="img/timg.jpg">
</div>
<div class="d2">
<div class="d2_1">小丸子</div>
<div class="d2_2">粉丝数量：1888</div>
</div>
</div>
<a class="gz">关注</a>
</div>
</div>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）