master

分支 (1)

管理

管理

master

Example
/
tag.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>tag</title>
	<style type="text/css">
		html, body{
			font-family: "Microsoft YaHei",Arial,Helvetica,sans-serif;
		}
		ul{
			list-style: none;
			margin:0;
			padding:0;
		}
		li{
			list-style-type: none;
			display: list-item;
		}
		a{
			color:#222;
			text-decoration: none;
		}
/*		a:visited{
			color:#00a1d6;
		}*/
		.tag-wrap{
			width:360px;
			position: absolute;
			border-radius: 0 0 4 4;
			background: #fff;
			box-shadow: rgba(0,0,0,0.16) 0 2px 4px;
			border: 1px solid #e5e9ef;
			text-align: center;
			font-size:12px;
			z-index: 1000;
		}
		.tag-menu{
			display: block;
			position: relative;
			text-align: center;
			padding:10px 0px;
			line-height: normal;
		}
		.menu{
			position: relative;
		    display: inline-block;
		    vertical-align: top;
		    text-align: center;
		}
		.menu ul{
			overflow: auto;
			width:100%;
			padding:0px;
		}
		.menu li{
			width:24px;
			height:30px;
			line-height: 30px;
			float:left;
			cursor:pointer;
			padding:0px 5px;
			margin-left:5px;
			transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-webkit-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}
		.menu li:hover a{
			color:#00a1d6;
		}
		.line{
			position:absolute;
			top:24px;
			left:10px;
			bottom:0;
			background: #00a1d6;
			height:1px;
			border:0;
			width:24px;
			margin:0;
		}
		.dot{
			width:3px;
			height:3px;
			border-radius:3px;
			background: #00a1d6;
			margin: 0 auto;
			margin-top:-1px;
		}
		.on a{
			color: #00a1d6;
		}

		.tag-content{
			width:100%;
			height:230px;
			overflow: hidden;
		}

	/*	#vedio,#live,#draw{
			width:100%;
			height:300px;
		}*/
		.tag-video,.tag-live,.tag-draw{
			height:230px;
			max-height: 300px;
			background-color: #fff;
			position:relative;
		}
		.tag-video-list,.tag-live-list,.tag-draw-list{
			overflow-y: auto;
			height:180px;
		}
		.no_data{
			height:30px;
			line-height: 30px;
			overflow: hidden;
			color:#99a2aa;
		}

		.video_info{
			font-size: 13px;
			display: block;
			word-wrap: break-word;
			margin-bottom: 5px;
		}

		.video_info:hover{
			-moz-transition: all 0.5s ease;
			-webkit-transition: all 0.5s ease;
			transition: all 0.5s ease;
			background: #e5e9ef;
			color: #00a1d6;
		}
		.tag-content ul li{
			padding:6px 12px 10px;
		}

		.tag_footer{
			line-height: 30px;
			height:30px;
			position:relative;
			padding:10px 12px 10px;
			white-space: nowrap;
			text-align: center;
		}

		.tag_footer a{
			display: block;
			background: #e5e9ef;
			border-radius: 4px;
			height:26px;
			border: 1px solid #e0e6ed;
			-moz-transition: all 0.5s ease;
			-webkit-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}

		.tag_footer a:hover{
			background:#e0e6ed;
			color:#00a1d6;
		}
	</style>
</head>
<body>
<div class="tag-wrap">
	<div class="tag-menu">
		<div class="menu">
			<ul>
				<li class="on"><a href="#video">视频</a></li>
				<li><a href="#live">直播</a></li>
				<li><a href="#draw">画友</a></li>
				<div class="line"><div class="dot"></div></div>
			</ul>
		</div>
	</div>
	<div class="tag-content">
		<div class="tag-video" id="video">
			<ul class="tag-video-list">
				<li class="no_data">video 暂时没有新动态了哦！</li>
				<li class="video_info">videovideovideovideovideovideovideovideo</li>
				<li class="video_info">videovideovideovideovideovideovideovideo</li>
			</ul>
			<div class="tag_footer"><a href="#">查看全部</a></div>
		</div>
		<div class="tag-live" id="live">
			<ul class="tag-live-list">
				<li class="no_data">live 暂时没有新动态了哦！</li>
				<li class="live_info"></li>
			</ul>
			<div class="tag_footer"><a href="#">所有关注</a></div>
		</div>
		<div class="tag-draw" id="draw">
			<ul class="tag-draw-list">
				<li class="no_data">draw 暂时没有新动态了哦！</li>
				<li class="draw_info"></li>
			</ul>
			<div class="tag_footer"><a href="#">查看全部</a></div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="./semantic/js/jquery.min.js">
	$(document).ready(function(){
	});
</script>
</html>