DIV/CSS+Jquery自己写的分页标签

一个简单的分页标签的样式

1》html

<div class="tabview" style="margin:10px;" mce_style="margin:10px;"> <ul class="tab"> <li class="active">图表</li> <li>数据</li> <li>查询</li> </ul> <div id="A_Area" class="show"> <div class="tabcontent">1111111</div> </div> <div id="B_Area"> <div class="tabcontent">2222222</div> </div> <div id="C_Area"> <div class="tabcontent">3333333</div> </div> </div> 

2》css

div.tabview{ margin: 2px; border: 1px solid #d8d8d8; } div.tabview ul{ margin: 0px; width: inherit; height: 28px; background: #C4C4C4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.796875)), to(rgba(255, 255, 255, 0))); } ul.tab{ background:url(../images/header.jpg) repeat-x 100% 50%; } .tabview li{ float: left; width: 50px; margin-left: 1px; margin-right: 1px; margin-top:2px; height: 25px; line-height: 25px; text-align: center; background-color: #d5d5d5; border-left: 1px solid #d8d8d8; border-right: 1px solid #d8d8d8; border-top: 1px solid #d8d8d8; display: block; -moz-border-radius:5px 5px 0px 0px; /* For Firefox3.6+ */ border-radius:5px 5px 0px 0px; } .tabview li.active{ background-color: #ffffff; border-bottom: none; } .tabview li.hover{ background-color: #00c8c8; border-bottom: none; cursor: pointer; } .tabview li:click{ background-color: #00c8c8; border-bottom: none; cursor: pointer; } .tabcontent{ padding: 2px; margin: 3px; border: 1px solid #00c8c8; min-height: 100px; }  

3》js

<mce:script src="../resources/js/jquery.js" mce_src="resources/js/jquery.js" type="text/javascript"/><!-- <script> jQuery(function(){ jQuery("div.tabview > div[class!='show']").hide(); jQuery("ul.tab li").click(function(){ jQuery(this).addClass("active").siblings().removeClass("active"); var index = jQuery(this).index("ul.tab li"); jQuery("div.tabview > div").eq(index).show().siblings("div").hide(); }).hover(function(){ jQuery(this).addClass("hover"); }, function(){ jQuery(this).removeClass("hover"); }) }) // --></mce:script> 

4》效果

5》圆角css

 

-moz-border-radius:5px 5px 0px 0px;               /* For Firefox3.6+ */这个是火狐浏览器3.6+的圆角，5px代表圆角半径

 border-radius:5px 5px 0px 0px;                      这个是与谷歌浏览器使用一样引擎的浏览器圆角写法

在ie下使用圆角必须要用图片或者使用多个层

 

6》渐变色css

background: #C4C4C4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.796875)), to(rgba(255, 255, 255, 0)));   这个是在webkit浏览器下使用的渐变色css

 

background:url(../pic/*.jpg) repeat-x 100% 50%;在ie下面常使用的方法就是图片