- CSS仿OSC TOP5标签布局样式，实现这种不是对称风格的方块布局，有人叫为混搭，最新的Win8系统好像是这种界面又是一种新的流行趋势，有空了看看哦。
-
<html><head><title>仿OSC TOP5标签布局样式</title><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>
标签：网站源码