HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./index.css">
<title>微博个人页“微关系”</title>
</head>
<body>
<div class="relation">
<div class="title">微关系</div>
<div class="relation-container">
<div class="follow">
<div class="title">她的关注(523)</div>
<ul class="follow-list">
<li class="item">
<div class="avatar-tag">
<div class="avatar"></div>
<div class="tag"></div>
</div>
<div class="name">绿洲</div>
</li>
<li class="item">
<div class="avatar-tag">
<div class="avatar"></div>
<div class="tag"></div>
</div>
<div class="name">带着微笑去旅行</div>
</li>
<li class="item">
<div class="avatar-tag">
<div class="avatar"></div>
<div class="tag"></div>
</div>
<div class="name">分析红包</div>
</li>
<li class="item">
<div class="avatar-tag">
<div class="avatar"></div>
<div class="tag"></div>
</div>
<div class="name">BIGBIGBIG</div>
</li>
</ul>
</div>
<div class="fans">
<div class="title">她的粉丝(18705761)</div>
<ul class="fans-list">
<li class="item">
<div class="avatar-tag">
<div class="avatar"></div>
</div>
<div class="name">泽·逸</div>
</li>
<li class="item">
<div class="avatar-tag">
<div class="avatar"></div>
</div>
<div class="name">霍霍1018</div>
</li>
<li class="item">
<div class="avatar-tag">
<div class="avatar"></div>
</div>
<div class="name">小菌朵...</div>
</li>
<li class="item">
<div class="avatar-tag">
<div class="avatar"></div>
</div>
<div class="name">用户6...</div>
</li>
</ul>
</div>
</div>
<div class="more">
<span class="text">查看更多</span>
<span class="right-icon"></span>
</div>
</div>
</body>
</html>
CSS部分:
html,
body {
height: 100%;
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
h1,
h2 {
margin: 0;
}
p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
/* 浏览器都有自己的默认样式,以上部分为清除浏览器默认样式 */
.relation {
width: 300px;
margin: 0 auto;
margin-top: 15px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
border-radius: 2px;
background: #fff;
}
.relation > .title {
height: 39px;
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
color: #333;
padding: 0 16px;
}
.relation .relation-container {
border-top: 1px solid #f2f2f5;
border-bottom: 1px solid #d9d9d9;
padding: 0 16px;
}
.relation .relation-container .title {
font-size: 14px;
font-weight: 500;
color: #333333;
margin: 13px 0 9px;
}
.relation .relation-container .follow-list,
.relation .relation-container .fans-list {
margin-bottom: 17px;
display: flex;
justify-content: space-between;
}
.relation .item {
width: 50px;
flex: none;
text-align: center;
}
.relation .item .avatar-tag {
width: 50px;
position: relative;
margin-bottom: 9px;
}
.relation .item .avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: url(./images/avatar.png) no-repeat center/contain;
}
.relation .item .tag {
position: absolute;
bottom: -5px;
right: -1px;
width: 20px;
height: 20px;
background: url(./images/vip-circle.png) no-repeat center/contain;
}
.relation .item .name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
color: #333;
}
.relation .more {
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.relation .more .text {
font-size: 12px;
color: #333;
margin-right: 4px;
}
.relation .more .right-icon {
width: 4px;
height: 7px;
background: url(./images/arrow-right.png) no-repeat center/contain;
}