标签 样式

样式一

效果图：
image

<!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="/first/css/style.css" type="text/css">
	<link rel="stylesheet" href="/first/css/style2.css" type="text/css">
</head>

<body>
	<div class="user-card">
		<div class="user-card-head">asked Feb 9, 2019 at 18:18</div>
		<div class="user-card-body">
			<div class="user-card-body-photo">
				<a href="#" target="_blank">
					<img src="/first/img/logo.jpg" alt="照片被删除">
				</a>
			</div>
			<div class="user-card-body-info">
				<div class="user-card-body-info-username">
					<a href="#">zzh</a>
				</div>
				<div class="user-card-body-info-reputation">
					<span style="color: #6a737c; font-weight: bold;">1,024</span>
					<div class="user-card-body-info-item" style="background-color: #ffcc01"></div>
					3
					<div class="user-card-body-info-item" style="background-color: #B4B8BC""></div>
					14
					<div class=" user-card-body-info-item" style="background-color: #D1A684"></div>
					28
				</div>
			</div>
		</div>
	</div>

</body>

</html>


.user-card {
    background-color: #d9eaf7;
    width: 200px;
    height: 67.69px;
    margin: 100px auto;
    /* 外边距 */
    padding: 5px 6px 7px 7px;
    /* 内边距 */
    box-sizing: border-box;
    /* 不会因为内边距而整体效果变大 */
}

.user-card-head {
    margin: 1px 0px 4px 0px;
    color: #6a737c;
    font-size: 12px;
}

.user-card-body-photo img {
    width: 32px;
    height: 32px;
    border-radius: 3px;
}

/* .user-card-body-photo>img {
    width: 32px;
    height: 32px;
} */



.user-card-body-photo {
    float: left;
}

.user-card-body-info {
    float: left;
    margin-left: 8px;
}

.user-card-body-info-username {
    height: 14px;
    line-height: 14px;
    margin-bottom: 2px;
}

.user-card-body-info-username>a {
    font-size: 13px;
    color: #0074cc;
    text-decoration: none;
}

.user-card-body-info-reputation {
    font-size: 12px;
    color: #838c95;
    height: 16px;
    line-height: 16px;
}

.user-card-body-info-item {
    height: 6px;
    width: 6px;
    display: inline-block;
    border-radius: 50%;
    margin: 0 3px 0 2px;
    position: relative;
    top: -2px;
    /* float: left; */
}

__EOF__

本文作者：ZZH
本文链接：https://www.cnblogs.com/zzh1206/p/17119434.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   zzh1206  阅读(39)  评论(0)  编辑  收藏  举报
相关博文：
·  css1.0
·  css2.0
·  CSS _css样式
·  css笔记
·  css标签样式
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示