仿stackoverflow名片与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;
}