水晶按钮

来源:互联网 发布:seo发展前景 编辑:程序博客网 时间:2024/05/21 08:42

<html>
<head>

<style type="text/css">
/*- Menu Tabs F--------------------------- */
    #tabsF {
      float:left;
      width:100%;
      background:#efefef;
      font-size:93%;
      line-height:normal;
   border-bottom:1px solid #666;
      }
    #tabsF ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
     background:url('tabrightF.gif'); background-repeat: no-repeat; background-position: left top
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url('tabrightF.gif'); background-repeat: no-repeat; background-position: right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac /*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#FFF;
      }
    #tabsF a:hover {
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      background-position:100% -42px;
      }
 
 </style>
</head>
<body>
<h2>Tab Menu F</h2>
<h2>Tab Menu F</h2>
<div id="tabsF">
  <ul>
    <li><a href="http://www.nkcn.net/java" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="http://www.nkcn.net/java" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="http://www.nkcn.net/java" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="http://www.nkcn.net/java" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="http://www.nkcn.net/java" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="http://www.nkcn.net/java" title="Link 6"><span>Link 6</span></a></li>
 <li><a href="http://www.nkcn.net/java" title="Link 7"><span>Link 7</span></a></li>
  </ul>
</div>
</body>
</html>

原创粉丝点击