GitHub 博客园 Nanakon

【css3】渐变

by 张克军

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://t.douban.com/js/jquery.min.js" async="true"></script>
<script src="http://t.douban.com/js/do.js"></script>
<style type="text/css">
/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}

body{padding:10em;font:12px/1.5 arial,sans-serif}

/* Tab */
.tabs{width:100%;overflow:hidden;margin-bottom:20px}
.tabs ul{float:left;-moz-box-shadow:#ddd 3px 3px 3px;-webkit-box-shadow:#ddd 3px 3px 3px}
.tabs li{float:left;margin-left:-1px;border:1px solid #666;border-bottom:1px solid #dfdfdf;
    /* 上的左右圆角 */
    -moz-border-radius-topleft:4px;
      -moz-border-radius-topright:4px;
    /* 渐变 */
      background-image:-moz-linear-gradient(0,
        #ddd 1%,
        #f5f5f5 3%,
        #f5f5f5 100%);

    -webkit-border-top-left-radius:4px;
      -webkit-border-top-right-radius:4px;
      background-image:-webkit-gradient(linear, left top, right top,
        color-stop(0.01, #ddd),
        color-stop(0.03, #f5f5f5),
        color-stop(1, #f5f5f5))
}
.tabs li:first-child{margin:0;background:#f5f5f5}
.tabs li.on{background:#fff;border-bottom:none}
.tabs li a{display:block;*display:inline-block;height:27px;padding:0 20px;text-align:center;line-height:27px;overflow:hidden;color:#333;outline:0}
.tabs li.on a,
.tabs li a:link,.tabs li a:visited{color:#333;text-decoration:none}
.tabs .others{overflow:auto;height:28px;*display:inline-block;border-bottom:1px solid #dfdfdf;text-align:right}
</style>
</head>
<body>
<div class="tabs">
    <ul>
        <li><a href="page1.html">正在收听</a></li>
        <li><a href="page2.html">最近播放过的歌曲</a></li>
        <li class="on"><a href="page3.html">好友的电台</a></li>
        <li><a href="page4.html">常见问题</a></li>
    </ul>
    <div class="others">&nbsp;</div>
</div>  
<script>
Do(function () {
    $('.tabs a').click(function (e) {
        e.preventDefault();
        $('.tabs .on').removeClass('on');
        $(this).parent().addClass('on');
    });
});
</script>
</body>
</html>

posted on 2012-06-01 09:30  jzm17173  阅读(181)  评论(0)    收藏  举报

导航

轻音