zoukankan      html  css  js  c++  java
  • 【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>
  • 相关阅读:
    MySQL SQL语言学习
    02-MySQL执行计划详解(EXPLAIN)
    linux下删除oracle11g单实例的方法
    01. Oracle 实例恢复
    替代变量与SQL*Plus环境设置
    9. Oracle 归档日志
    8. Oracle 联机重做日志文件(ONLINE LOG FILE)
    7. Oracle 控制文件(CONTROLFILE)
    6. Oracle 回滚(ROLLBACK)和撤销(UNDO)
    5. Oracle 表空间与数据文件
  • 原文地址:https://www.cnblogs.com/jzm17173/p/2529834.html
Copyright © 2011-2022 走看看