[CSS] CSS仿OSC TOP5标签布局样式

2014-08-22 23:07:55 -0700

代码复制

<style type="text/css">
.d-tag5{
	background: #F5F5F5;
	color: #FFF;
	width:230px;
	text-align: center;
}
.d-tag5 div {
	float: left;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}
.d-tag5 div  a{
	color:white;
}
.d-tag5 div:hover{
	opacity: 0.5;
}
.d-tagitem1{
	background: #6AD178;
	line-height:130px;
	font-size: 20px;
	width: 130px;
	height: 130px;
}
.d-tagitem2{
	background: #2E9DD5;
	width: 100px;
	height: 65px;
	line-height:65px;
	font-size: 16x;
}
.d-tagitem3{
	background: #3DBFD5;
	width: 100px;
	height: 65px;
	line-height:65px;
}
.d-tagitem4{
	background: #EBB741;
	width: 80px;
	height: 80px;
	line-height:80px;
	font-size: 16x;
}
.d-tagitem5{
	background: #7FE35D;
	width: 150px;
	height: 80px;
	line-height:80px;
	font-size: 16x;
}
.clear{
	both;
	font-size: 1px;
	line-height: 0;
}
</style>
</head>
<body>
<div class="d-tag5">
	<div class="d-tagitem1">
		<a href="#">一二三四五六七八九十</a>
	</div>
	<div class="d-tagitem2">
		<a href="#">一二三四五六七八九十</a>
	</div>
	<div class="d-tagitem3">
		<a href="#">一二三四五六七八九十</a>
	</div>
	<div class="d-tagitem4">
		<a href="#">一二三四五六七八九十</a>
	</div>
	<div class="d-tagitem5">
		<a href="#">一二三四五六七八九十</a>
	</div>
	<div class="clear">
	</div>
</div>
</body>
</html>

代码演示

一二三四五六七八九十

一二三四五六七八九十

一二三四五六七八九十

一二三四五六七八九十

一二三四五六七八九十

«Newer Older»

----Comments(1)----
追梦小窝 (@yzm) | @ at 2014-09-01 22:45:
不错
.

Back to home

Subscribe | Register | Login | N