html+css 完成通用列表list

代码：
<!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>
posted on 2022-02-25 22:10 剽悍一小兔阅读(145) 评论(0) 收藏举报来源