page--user.tpl.php

page--user.tpl.php

<div class="bbb-page-user clearfix">
	<div class="header">
		<div class="bbb-goback"> <a href="list">« 首页</a> </div>
		<div class="username">@bluesky_still</div>
	</div>
	
	<div class="bbb-user">
		<div class="picture">
			<a href="#" class="">
				<img data-src="holder.js/140x140" class="img-circle" alt="140x140" src="https://avatars2.githubusercontent.com/u/1160703?s=460" style="width: 140px; height: 140px;">
			</a>
		</div>
		<div class="username"><h3>Dale</h3></div>
		<div class="usersignatures">
			<p>天空依然蔚蓝，虽然有时你看不见  这家伙很懒， 这家伙很懒， 这家伙很懒， 这家伙很懒</p>
		</div>
		<div class="ops"><a href="#" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-plus"></span>关 注</a> </div>
		<div class="status clearfix">
			<a href="#" class="tooltip-count" data-toggle="tooltip" data-placement="top" title="代表可信度">
				<span class="item"><div class="count">3</div><div class="s-name">熟人</div></span>
			</a>
			<a href="#" class="tooltip-count" data-toggle="tooltip" data-placement="top" title="代表努力度">
				<span class="item"><div class="count">32</div><div class="s-name">关注</div></span>
			</a>
			<a href="#" class="tooltip-count active" data-toggle="tooltip" data-placement="bottom" title="代表真诚度">
				<span class="item"><div class="count">12</div><div class="s-name">照片</div></span>
			</a>
			<a href="#" class="tooltip-count" data-toggle="tooltip" data-placement="top" title="代表活跃度">
				<span class="item"><div class="count">52</div><div class="s-name">心语</div></span>
			</a>
			<a href="#" class="tooltip-count" data-toggle="tooltip" data-placement="top" title="代表受欢迎度">
				<span class="item"><div class="count">33</div><div class="s-name">粉丝</div></span>
			</a>
			
		</div>
		<div class="demo" style="height:300px;"></div>
	</div>
</div>
<script type="text/javascript">
	// jQuery('.tooltip-count').tooltip();
</script>
<style type="text/css">
	.bbb-goback {
		float: left;
		position: fixed;
	}

	.bbb-page-user{ 
		font-size: 16px;
		color:#FFF;
		text-align: center;
		background: #79b9d9;
	}
	.status a {
		background-color: rgba(255, 255, 255, 0.1);
		color: #FFF;
		display: block;
		border-top: 6px #A59689 solid;
		margin: -4px 0 0 0;
		position: relative;
		z-index: 3;
		width: 20%;
		float: left;
	}
	.status a.active {
		border-top: 6px #FE9325 solid;
		background-color: rgba(165, 150, 137, 0.1);
		/*#887669*/
	}
	.status .count {
		font-family: sans-serif;
		font-size: larger;
	}
	.bbb-page-user .header{
		font-size: 1.5em;
	}
	.bbb-page-user .header .bbb-goback a{
		color: #FFF;
		font-size: 0.8em;
	}
	.ops {
		padding: 10px;
	}
	.usersignatures {
		text-align: left;
		padding: 0 15px;
	}
	.bbb-page-user a:hover {
		text-decoration: none;
	}
</style>