代码：
<!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>
