$bilibili-card$
bug多多的第一次尝试
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/css/bilibili.css">
</head>
<body>
<div class="card">
<div class="back-head">
</div>
<div class="back-down">
<div class="back-down-left">
<img class="back-down-left-user-img" src="https://cdn.acwing.com/media/user/profile/photo/168817_lg_e8e65608bd.jpg" alt="user-img">
</div>
<div class="back-down-right">
<div class="back-down-right-username">Qimu</div>
<div class="back-down-right-level">Lv5</div>
<div class="back-down-right-num">386</div>
<div class="back-down-right-info">关注</div>
<div class="back-down-right-num">13</div>
<div class="back-down-right-info">粉丝</div>
<div class="back-down-right-num">61</div>
<div class="back-down-right-info">获赞</div><br>
<div class="back-down-right-down-info">AcWing: Qimu</div>
<button class="button1"><a style="width: 92px;height: 30px" class="a1" href="https://www.acwing.com/user/myspace/index/168817/" target="_blank">+关注</a></button>
<button class="button2"><a class="a2" href="https://www.acwing.com/user/myspace/index/168817/" target="_blank">发消息</a></button>
</div>
</div>
</div>
</body>
</html>
css
.card {
margin: 200px 300px ;
width: 366px;
height: 239px;
margin-right: 0px;
border: solid 1px;
border-radius: 5px;
border-color: lightgray;
box-shadow: darkgrey 1px;
}
.back-head {
width: 367px;
height: 85px;
background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fd5f006e9110876278154765a8f33cc56ae4994be.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665724797&t=6de0505d25d4c537b88fe3ee50d11d40);
border-radius: 5px;
background-size: cover;
}
.back-down {
margin-top: 0px;
width: 366px;
height: 154px;
box-sizing: border-box;
}
.back-down-left {
width: 70px;
height: 154px;
margin: 0 0;
float: left;
box-sizing: border-box;
}
.back-down-left-user-img {
padding: 11px;
width: 48px;
height: 48px;
border-radius: 50%;
}
.back-down-right {
width: calc(100% - 70px);
height: 154px;
margin-left: 70px;
box-sizing: border-box;
}
.back-down-right-username {
width: 53px;
height: 24px;
margin: 12px 0 0 0;
font-size: 16px;
color: #18191C;
box-sizing: border-box;
float: left;
}
.back-down-right-level {
font-size: 12px;
color: orange;
font-style: italic;
padding: 16px 16px 10px 16px;
}
.back-down-right-num {
font-size: 12px;
color: #18191C;
float: left;
width: 24px;
height: 14px;
}
.back-down-right-info {
font-size: 12px;
color: #9499A0;
float: left;
width: 30px;
height: 14px;
}
.back-down-right-down-info {
padding: 6px 0;
font-size: 12px;
color: #9499A0;
float: left;
width: 100%;
height: 26px;
}
.back-down-right-down-info > a {
width: 100px;
height: 30px;
}
.button1 {
width: 100px;
height: 30px;
background-color: #00AEEC;
color: white;
border-radius: 3px;
margin: 0 8px 0 0;
border-style: none;
font-size: 14px;
padding: 0;
}
.button2 {
border: solid 1px lightgrey;
border-radius: 3px;
font-size: 14px;
width: 100px;
height: 30px;
background-color: white;
margin: 0 8px 0 0;
}
.a1 {
margin: 0;
width: 92px;
height: 30px;
text-decoration: none;
color: white;
}
.a2 {
margin: 0;
width: 100px;
height: 30px;
text-decoration: none;
color: #61666D;
}