目录
- 前言
- 一、仿stackoverflow名片
- HTML
- CSS
- 二、仿b站名片
- HTML
- CSS
- 素材
前言
学习自ACwing - Web应用课
一、仿stackoverflow名片
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<div class="user-card">
<div class="user-card-head">
asked Aug 3, 2022 at 2:30
</div>
<div class="user-card-body">
<div class="user-card-body-photo">
<a href="https://blog.csdn.net/qq_37397652?type=blog" target="_blank">
<img src="static/images/head.jpeg" alt=""></a>
</div>
<div class="user-card-body-info">
<div class="user-card-body-info-username">
<a href="https://blog.csdn.net/qq_37397652?type=blog" target="_blank"
style="text-decoration: none; color: #1B75D0;">Kinno</a>
</div>
<div class="user-card-body-info-reputation">
<span style="font-weight: bold;">1,024</span>
<div class="user-card-body-info-reputation-item" style="background-color: #f7ce46;"></div>
3
<div class="user-card-body-info-reputation-item" style="background-color: #b5b8bc;"></div>
14
<div class="user-card-body-info-reputation-item" style="background-color: #caa889;"></div>
25
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.user-card-body-photo img {
width: 32px;
height: 32px;
border-radius: 4px;
}
.user-card {
width: 200px;
height: 67.19px;
background-color: #eef5fc;
margin: 100px auto;
padding: 5px 6px 7px 7px;
box-sizing: border-box;
}
.user-card-head {
font-size: 12px;
color: #636B74;
margin-top: 1px;
margin-bottom: 4px;
}
.user-card-body-info-username {
font-size: 11px;
height: 16px;
/* text-decoration: none; */
line-height: 16px;
/*让字上下居中*/
}
.user-card-body-info-reputation {
font-size: 12px;
color: #636B74;
height: 16px;
line-height: 16px;
}
.user-card-body-photo {
float: left;
}
.user-card-body-info {
float: left;
margin-left: 8px;
}
.user-card-body-info-reputation-item {
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
margin-left: 2px;
margin-right: 3px;
position: relative;
top: -2px;
}
二、仿b站名片
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="user-card">
<div class="user-card-head">
</div>
<div class="user-card-body">
<div class="user-card-body-left">
<img src="/static/images/head.jpeg" alt="head-photo">
</div>
<div class="user-card-body-right">
<div class="user-card-body-right-info">
<div class="user-card-body-right-text">
<div class="user-card-body-right-text-username">
<a href="#" style="text-decoration: none;">Kinno喵喵</a>
<i>
<img src="/static/images/6-level.png" alt="6-level" style="width: 17.8px;">
</i>
</div>
</div>
<div class="user-card-body-right-text-reputation">
<div class="user-card-body-right-text-reputation-item">
<span style="color: rgb(24, 25, 28);">304</span>
<span style="color: rgb(148, 153, 160); margin-left: 3px;">关注</span>
</div>
<div class="user-card-body-right-text-reputation-item">
<span>8</span>
<span style="color: rgb(148, 153, 160); margin-left: 3px;">粉丝</span>
</div>
<div class="user-card-body-right-text-reputation-item">
<span>8</span>
<span style="color: rgb(148, 153, 160); margin-left: 3px;">获赞</span>
</div>
</div>
<div class="user-card-body-right-button">
<button>+ 关注</button>
<button>发消息</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.user-card {
width: 366px;
height: 220px;
box-shadow: 2px 2px 5px lightgray;
border-radius: 5px;
}
.user-card-head {
background-image: url(/static/images/bilibili-background.png);
background-size: cover;
width: 100%;
height: 85px;
}
.user-card-body-right {
width: 366px;
height: 134px;
padding: 12px 20px 16px 70px;
box-sizing: border-box;
}
.user-card-body-right-info {
display: flex;
flex-direction: column;
}
.user-card-body-left {
width: 70px;
height: 48px;
float: left;
margin-top: 10px;
display: flex;
justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
}
.user-card-body-left img {
width: 48px;
height: 48px;
border-radius: 50%;
}
.user-card-body-right-text-username {
margin-bottom: 10px;
width: 276px;
height: 30px;
}
.user-card-body-right-text-username a {
line-height: 30px;
font-size: 16px;
font-weight: 600;
color: rgb(24, 25, 28);
display: inline-block;
/* 设置为inline-block，以支持高度和垂直对齐 */
vertical-align: middle;
/* 与图标垂直居中对齐 */
}
.user-card-body-right-text-username i {
width: 30px;
height: 30px;
margin-left: 5px;
}
.user-card-body-right-text-reputation {
width: 276px;
height: 18px;
font-size: 12px;
line-height: 18px;
font-weight: 400;
display: flex;
}
.user-card-body-right-text-reputation-item {
margin-right: 18px;
display: inline-block;
text-size-adjust: 100%;
display: flex;
}
.user-card-body-right-button {
margin-top: 16px;
width: 276px;
height: 32px;
}
.user-card-body-right-button button {
width: 100px;
height: 30px;
font-size: 14px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.user-card-body-right-button button:nth-child(1) {
background-color: #00AEEC;
color: white;
margin-right: 8px;
}
.user-card-body-right-button button:nth-child(1):hover {
background-color: #43c3f2;
transition: 500ms;
}
.user-card-body-right-button button:nth-child(2) {
background-color: white;
border: rgb(201, 204, 208) solid 1px;
color: rgb(97, 102, 109);
}
.user-card-body-right-button button:nth-child(2):hover {
border-color: #00AEEC;
color: #00AEEC;
transition: 500ms;
}
素材
- b站名片背景：
- 头像：
- b站level6：
