HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>可用的一些布局(用户篇) - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid p-t-15">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header"><h4>可用的一些布局 - 用户头像篇</h4></div>
<div class="card-body">
<p>关于用户头像布局演示，布局来源于网络，大家看需要使用，O(∩_∩)O。<span class="text-danger">目前这些布局是基于bootstrap 3.3.7。</span></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header"><h4>用户</h4></div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<p><strong>基础</strong></p>
<ul class="list-inline">
<li class="m-r-10">
<p class="text-center">基本使用</p>
<span class="img-avatar">二娃</span>
<img class="img-avatar" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-2.png">
</li>
<li class="m-r-10">
<p class="text-center">带提示的</p>
<span class="img-avatar" data-toggle="tooltip" title="大力娃">大娃</span>
<img class="img-avatar" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-1.png" alt="..." data-toggle="tooltip" title="大力娃">
</li>
<li class="m-r-10">
<p class="text-center">带链接的</p>
<a class="img-avatar" href="#!">三娃</a>
<a href="#!"><img class="img-avatar" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-3.png"></a>
</li>
</ul>
</div>
<div class="col-md-6">
<p><strong>尺寸</strong></p>
<p>可用的尺寸有: <code>img-avatar-36</code>，<code>img-avatar-48</code>，<code>img-avatar-96</code>，<code>img-avatar-128</code>，默认大小是64px。</p>
<span class="img-avatar img-avatar-36">36</span>
<span class="img-avatar img-avatar-48">48</span>
<span class="img-avatar">64</span>
<span class="img-avatar img-avatar-96">96</span>
<span class="img-avatar img-avatar-128">128</span>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<p><strong>状态</strong></p>
<p>可用的状态值: <code>status-primary</code>, <code>status-success</code>, <code>status-info</code>, <code>status-warning</code>, <code>status-danger</code>, <code>status-dark</code>, <code>status-secondary</code>。</p>
<span class="img-avatar-36 status-primary"><img class="img-avatar" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-3.png"></span>
<span class="img-avatar-48 status-danger"><img class="img-avatar" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-4.png"></span>
<span class="status-success"><img class="img-avatar" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-7.png"></span>
<span class="status-info"><img class="img-avatar" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-5.png"></span>
<span class="status-warning img-avatar-96"><img class="img-avatar" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-4.png"></span>
<span class="status-dark img-avatar-128"><img class="img-avatar" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-6.png"></span>
</div>
<div class="col-md-6">
<p><strong>带文字的头像</strong></p>
<a class="img-avatar img-avatar-pill img-avatar-36" href="#!">
<img src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-1.png">
<span>大娃 力大无穷</span>
</a>
<a class="img-avatar img-avatar-pill img-avatar-48" href="#!">
<img src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-2.png">
<span>二娃 千里眼顺风耳</span>
</a>
<a class="img-avatar img-avatar-pill" href="#!">
<img src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-3.png">
<span>三娃 刀枪不入</span>
</a>
<br/> <br/>
<a class="img-avatar img-avatar-pill img-avatar-96" href="#!">
<img src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-4.png">
<span>四娃 喷火娃</span>
</a>
<a class="img-avatar img-avatar-pill img-avatar-128" href="#!">
<img src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-5.png">
<span>五娃 喷水娃</span>
</a>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-6">
<p><strong>头像列表</strong></p>
<div class="img-avatar-list">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-1.png">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-2.png">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-3.png">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-4.png">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-5.png">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-6.png">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-7.png">
</div>
<div class="img-avatar-list m-t-10">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-1.png">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-2.png">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-3.png">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-4.png">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-5.png">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-6.png">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-7.png">
</div>
</div>
<div class="col-md-6">
<p><strong>头像叠加</strong></p>
<div class="img-avatar-list img-avatar-list-overlap">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-1.png" data-toggle="tooltip" title="大娃">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-2.png" data-toggle="tooltip" title="二娃">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-3.png" data-toggle="tooltip" title="三娃">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-4.png" data-toggle="tooltip" title="火娃">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-5.png" data-toggle="tooltip" title="水娃">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-6.png" data-toggle="tooltip" title="六娃">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-7.png" data-toggle="tooltip" title="七娃">
</div>
<div class="img-avatar-list img-avatar-list-overlap m-t-10">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-1.png" data-toggle="tooltip" title="大娃">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-2.png" data-toggle="tooltip" title="二娃">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-3.png" data-toggle="tooltip" title="三娃">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-4.png" data-toggle="tooltip" title="火娃">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-5.png" data-toggle="tooltip" title="水娃">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-6.png" data-toggle="tooltip" title="六娃">
<img class="img-avatar img-avatar-48" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-7.png" data-toggle="tooltip" title="七娃">
</div>
</div>
</div>
<hr/>
<p>当用户数量太多的时候，可以隐藏部分用户</p>
<div class="row">
<div class="col-md-12">
<div class="img-avatar-list">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-1.png">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-2.png">
<img class="img-avatar img-avatar-36" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar-3.png">
<a class="img-avatar img-avatar-36 img-avatar-more" href="#!">
<span>+4</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/main.min.js"></script>
</body>
</html>
CSS
.img-avatar {
position: relative;
background-color: #f9fafb;
color: #8b95a5;
}
.img-avatar img {
width: 64px;
height: 64px;
-webkit-border-radius: 50%;
border-radius: 50%;
vertical-align: bottom;
}
/* 尺寸 */
.img-avatar-36,
.img-avatar-36 img {
width: 36px;
height: 36px;
}
.img-avatar-36 {
line-height: 36px;
}
.img-avatar-48 img {
width: 48px;
height: 48px;
}
.img-avatar-96,
.img-avatar-96 img {
width: 96px;
height: 96px;
}
.img-avatar-96 {
line-height: 96px;
}
.img-avatar-128,
.img-avatar-128 img {
width: 128px;
height: 128px;
}
.img-avatar-128 {
line-height: 128px;
}
/* 状态 */
[class*='status-'] {
position: relative;
display: inline-block;
}
[class*='status-']::after {
content: '';
position: absolute;
right: 7px;
bottom: 0;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid #fff;
background-color: #33cabb;
}
[class*='status-'].img-avatar-36::after {
right: 0px;
}
[class*='status-'].img-avatar-48::after {
right: 4px;
}
[class*='status-'].img-avatar-96::after {
right: 15px;
width: 12px;
height: 12px;
}
[class*='status-'].img-avatar-128::after {
right: 20px;
width: 16px;
height: 16px;
}
.status-primary::after {
background-color: #33cabb;
}
.status-danger::after {
background-color: #f96868;
}
.status-success::after {
background-color: #15c377;
}
.status-info::after {
background-color: #48b0f7;
}
.status-warning::after {
background-color: #faa64b;
}
.status-dark::after {
background-color: #465161;
}
/* 带文字 */
.img-avatar-pill {
width: auto;
border-radius: 32px;
color: #4d5259;
text-transform: none;
letter-spacing: 0;
background-color: #f9fafb;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-align: center;
align-items: center;
}
.img-avatar-pill:hover {
background-color: #f5f6f7;
}
.img-avatar-pill.img-avatar-36 {
border-radius: 18px;
}
.img-avatar-pill.img-avatar-48 {
border-radius: 24px;
}
.img-avatar-pill.img-avatar-96 {
border-radius: 48px;
}
.img-avatar-pill.img-avatar-128 {
border-radius: 64px;
}
.img-avatar-pill span {
padding-right: 18px;
padding-left: 8px;
}
.img-avatar-pill.img-avatar-36 span {
padding-right: 14px;
}
.img-avatar-pill.img-avatar-48 span {
padding-right: 24px;
}
.img-avatar-pill.img-avatar-96 span {
padding-right: 32px;
padding-left: 12px;
}
.img-avatar-pill.img-avatar-128 span {
padding-right: 48px;
padding-left: 12px;
}
/* 头像列表 */
.img-avatar-list:not(.img-avatar-list-overlap) .img-avatar {
margin: 2px;
}
/* 头像叠加 */
.img-avatar-list-overlap .img-avatar {
border: 2px solid #fff;
-webkit-box-shadow: 0 0 25px rgba(0,0,0,0.2);
box-shadow: 0 0 25px rgba(0,0,0,0.2);
-webkit-transition: .15s linear;
transition: .15s linear;
cursor: pointer;
}
.img-avatar-list-overlap .img-avatar+.img-avatar {
margin-left: -26px;
}
.img-avatar-list-overlap .img-avatar+.img-avatar-36 {
margin-left: -18px;
}
.img-avatar-list-overlap .img-avatar+.img-avatar-48 {
margin-left: -24px;
}
.img-avatar-list-overlap .img-avatar+.img-avatar-96 {
margin-left: -48px;
}
.img-avatar-list-overlap .img-avatar+.img-avatar-128 {
margin-left: -64px;
}
.img-avatar-list-overlap .img-avatar:hover+.img-avatar {
margin-left: 0;
}
/* 更多用户 */
.img-avatar-more span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: rgba(255, 255, 255, 0.8);
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.img-avatar-more:hover span {
color: #fff;
background-color: rgba(0,0,0,0.65);
}