CSS TAB DESIGNER生成的超漂亮DIV+CSS导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/uploadfile/201012/28/FB11100574.gif") no-repeat left top;      margin:0;      padding:0 0 0 4px;      text-decoration:none;      }    #tabs a span {      float:left;      display:block;      background:url("/uploadfile/cssnav/tabright.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#666;      }    /* Commented Backslash Hack hides rule from IE5-Mac \*/    #tabs a span {float:none;}    /* End IE5-Mac hack */    #tabs a:hover span {      color:#FF9834;      }    #tabs a:hover {      background-position:0% -42px;      }    #tabs a:hover span {      background-position:100% -42px;      }   /*- Menu Tabs B--------------------------- */    #tabsB {      float:left;      width:100%;      background:#F4F4F4;      font-size:93%;      line-height:normal;      }    #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none;      }    #tabsB li {      display:inline;      margin:0;      padding:0;      }    #tabsB a {      float:left;      background:url("/uploadfile/cssnav/tableftB.gif") no-repeat left top;      margin:0;      padding:0 0 0 4px;      text-decoration:none;      }    #tabsB a span {      float:left;      display:block;      background:url("/uploadfile/cssnav/tabrightB.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#666;      }    /* Commented Backslash Hack hides rule from IE5-Mac \*/    #tabsB a span {float:none;}    /* End IE5-Mac hack */    #tabsB a:hover span {      color:#000;      }    #tabsB a:hover {      background-position:0% -42px;      }    #tabsB a:hover span {      background-position:100% -42px;      }   /*- Menu Tabs C--------------------------- */    #tabsC {      float:left;      width:100%;      background:#EDF7E7;      font-size:93%;      line-height:normal;      }    #tabsC ul { margin:0; padding:10px 10px 0 50px; list-style:none;      }    #tabsC li {      display:inline;      margin:0;      padding:0;      }    #tabsC a {      float:left;      background:url("/uploadfile/cssnav/tableftC.gif") no-repeat left top;      margin:0;      padding:0 0 0 4px;      text-decoration:none;      }    #tabsC a span {      float:left;      display:block;      background:url("/uploadfile/cssnav/tabrightC.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#464E42;      }    /* Commented Backslash Hack hides rule from IE5-Mac \*/    #tabsC a span {float:none;}    /* End IE5-Mac hack */    #tabsC a:hover span {      color:#FFF;      }    #tabsC a:hover {      background-position:0% -42px;      }    #tabsC a:hover span {      background-position:100% -42px;      }     /*- Menu Tabs D--------------------------- */    #tabsD {      float:left;      width:100%;      background:#FCF3F8;      font-size:93%;      line-height:normal;   border-bottom:1px solid #F4B7D6;      }    #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none;      }    #tabsD li {      display:inline;      margin:0;      padding:0;      }    #tabsD a {      float:left;      background:url("/uploadfile/cssnav/tableftD.gif") no-repeat left top;      margin:0;      padding:0 0 0 4px;      text-decoration:none;      }    #tabsD a span {      float:left;      display:block;      background:url("/uploadfile/cssnav/tabrightD.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#C7377D;      }    /* Commented Backslash Hack hides rule from IE5-Mac \*/    #tabsD a span {float:none;}    /* End IE5-Mac hack */    #tabsD a:hover span {      color:#C7377D;      }    #tabsD a:hover {      background-position:0% -42px;      }    #tabsD a:hover span {      background-position:100% -42px;      }     /*- Menu Tabs E--------------------------- */    #tabsE {      float:left;      width:100%;      background:#000;      font-size:93%;      line-height:normal;      }    #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none;      }    #tabsE li {      display:inline;      margin:0;      padding:0;      }    #tabsE a {      float:left;      background:url("/uploadfile/cssnav/tableftE.gif") no-repeat left top;      margin:0;      padding:0 0 0 4px;      text-decoration:none;      }    #tabsE a span {      float:left;      display:block;      background:url("/uploadfile/cssnav/tabrightE.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#FFF;      }    /* Commented Backslash Hack hides rule from IE5-Mac \*/    #tabsE a span {float:none;}    /* End IE5-Mac hack */    #tabsE a:hover span {      color:#FFF;      }    #tabsE a:hover {      background-position:0% -42px;      }    #tabsE a:hover span {      background-position:100% -42px;      }     /*- 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("/uploadfile/cssnav/tableftF.gif") no-repeat left top;      margin:0;      padding:0 0 0 4px;      text-decoration:none;      }    #tabsF a span {      float:left;      display:block;      background:url("/uploadfile/cssnav/tabrightF.gif") no-repeat 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;      }   /*- Menu Tabs G--------------------------- */    #tabsG {      float:left;      width:100%;      background:#666;      font-size:93%;      line-height:normal;      }    #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none;      }    #tabsG li {      display:inline;      margin:0;      padding:0;      }    #tabsG a {      float:left;      background:url("/uploadfile/cssnav/tableftG.gif") no-repeat left top;      margin:0;      padding:0 0 0 4px;      text-decoration:none;      }    #tabsG a span {      float:left;      display:block;      background:url("/uploadfile/cssnav/tabrightG.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#FFF;      }    /* Commented Backslash Hack hides rule from IE5-Mac \*/    #tabsG a span {float:none;}    /* End IE5-Mac hack */    #tabsG a:hover span {      color:#FFF;      }    #tabsG a:hover {      background-position:0% -42px;      }    #tabsG a:hover span {      background-position:100% -42px;      } /*- Menu Tabs H--------------------------- */    #tabsH {      float:left;      width:100%;      background:#000;      font-size:93%;      line-height:normal;      }    #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none;      }    #tabsH li {      display:inline;      margin:0;      padding:0;      }    #tabsH a {      float:left;      background:url("/uploadfile/cssnav/tableftH.gif") no-repeat left top;      margin:0;      padding:0 0 0 4px;      text-decoration:none;      }    #tabsH a span {      float:left;      display:block;      background:url("/uploadfile/cssnav/tabrightH.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#FFF;      }    /* Commented Backslash Hack hides rule from IE5-Mac \*/    #tabsH a span {float:none;}    /* End IE5-Mac hack */    #tabsH a:hover span {      color:#FFF;      }    #tabsH a:hover {      background-position:0% -42px;      }    #tabsH a:hover span {      background-position:100% -42px;      }/*- Menu Tabs I--------------------------- */    #tabsI {      float:left;      width:100%;      background:#EFF4FA;      font-size:93%;      line-height:normal;   border-bottom:1px solid #DD740B;      }    #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none;      }    #tabsI li {      display:inline;      margin:0;      padding:0;      }    #tabsI a {      float:left;      background:url("/uploadfile/cssnav/tableftI.gif") no-repeat left top;      margin:0;      padding:0 0 0 5px;      text-decoration:none;      }    #tabsI a span {      float:left;      display:block;      background:url("/uploadfile/cssnav/tabrightI.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#FFF;      }    /* Commented Backslash Hack hides rule from IE5-Mac \*/    #tabsI a span {float:none;}    /* End IE5-Mac hack */    #tabsI a:hover span {      color:#FFF;      }    #tabsI a:hover {      background-position:0% -42px;      }    #tabsI a:hover span {      background-position:100% -42px;      }/*- Menu Tabs J--------------------------- */    #tabsJ {      float:left;      width:100%;      background:#F4F4F4;      font-size:93%;      line-height:normal;   border-bottom:1px solid #24618E;      }    #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none;      }    #tabsJ li {      display:inline;      margin:0;      padding:0;      }    #tabsJ a {      float:left;      background:url("/uploadfile/cssnav/tableftJ.gif") no-repeat left top;      margin:0;      padding:0 0 0 5px;      text-decoration:none;      }    #tabsJ a span {      float:left;      display:block;      background:url("/uploadfile/cssnav/tabrightJ.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#24618E;      }    /* Commented Backslash Hack hides rule from IE5-Mac \*/    #tabsJ a span {float:none;}    /* End IE5-Mac hack */    #tabsJ a:hover span {      color:#FFF;      }    #tabsJ a:hover {      background-position:0% -42px;      }    #tabsJ a:hover span {      background-position:100% -42px;      }/*- Menu Tabs K--------------------------- */      #tabsK {      float:left;      width:100%;      background:#E7E5E2;      font-size:93%;      line-height:normal;   border-bottom:1px solid #54545C;      }    #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none;      }    #tabsK li {      display:inline;      margin:0;      padding:0;      }    #tabsK a {      float:left;      background:url("/uploadfile/cssnav/tableftK.gif") no-repeat left top;      margin:0;      padding:0 0 0 4px;      text-decoration:none;      }    #tabsK a span {      float:left;      display:block;      background:url("/uploadfile/cssnav/tabrightK.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#FFF;      }    /* Commented Backslash Hack hides rule from IE5-Mac \*/    #tabsK a span {float:none;}    /* End IE5-Mac hack */    #tabsK a:hover span {      color:#FFF;   background-position:100% -42px;      }    #tabsK a:hover {      background-position:0% -42px;      }    #tabsK a:hover span {      background-position:100% -42px;   }</style></head><body><h2>Tab Menu</h2><div id="tabs">  <ul>    <li><a href="http://Netton.cn" title="Link 1"><span>Link 1</span></a></li>    <li><a href="http://Netton.cn" title="Link 2"><span>Link 2</span></a></li>    <li><a href="http://Netton.cn" title="Link 3"><span>Link 3</span></a></li>    <li><a href="http://Netton.cn" title="Longer Link Text"><span>Longer Link Text</span></a></li>    <li><a href="http://Netton.cn" title="Link 5"><span>Link 5</span></a></li>    <li><a href="http://Netton.cn" title="Link 6"><span>Link 6</span></a></li> <li><a href="http://Netton.cn" title="Link 7"><span>Link 7</span></a></li>  </ul></div><br /><br /><h2>Tab Menu B</h2><div id="tabsB">  <ul>    <li><a href="http://Netton.cn" title="Link 1"><span>Link 1</span></a></li>    <li><a href="http://Netton.cn" title="Link 2"><span>Link 2</span></a></li>    <li><a href="http://Netton.cn" title="Link 3"><span>Link 3</span></a></li>    <li><a href="http://Netton.cn" title="Longer Link Text"><span>Longer Link Text</span></a></li>    <li><a href="http://Netton.cn" title="Link 5"><span>Link 5</span></a></li>    <li><a href="http://Netton.cn" title="Link 6"><span>Link 6</span></a></li> <li><a href="http://Netton.cn" title="Link 7"><span>Link 7</span></a></li>  </ul></div><br /><br /><h2>Tab Menu C</h2><div id="tabsC">  <ul>    <li><a href="http://Netton.cn" title="Link 1"><span>Link 1</span></a></li>    <li><a href="http://Netton.cn" title="Link 2"><span>Link 2</span></a></li>    <li><a href="http://Netton.cn" title="Link 3"><span>Link 3</span></a></li>    <li><a href="http://Netton.cn" title="Longer Link Text"><span>Longer Link Text</span></a></li>    <li><a href="http://Netton.cn" title="Link 5"><span>Link 5</span></a></li>    <li><a href="http://Netton.cn" title="Link 6"><span>Link 6</span></a></li> <li><a href="http://Netton.cn" title="Link 7"><span>Link 7</span></a></li>  </ul></div><br /><br /><h2>Tab Menu D</h2><div id="tabsD">  <ul>    <li><a href="http://Netton.cn" title="Link 1"><span>Link 1</span></a></li>    <li><a href="http://Netton.cn" title="Link 2"><span>Link 2</span></a></li>    <li><a href="http://Netton.cn" title="Link 3"><span>Link 3</span></a></li>    <li><a href="http://Netton.cn" title="Longer Link Text"><span>Longer Link Text</span></a></li>    <li><a href="http://Netton.cn" title="Link 5"><span>Link 5</span></a></li>    <li><a href="http://Netton.cn" title="Link 6"><span>Link 6</span></a></li> <li><a href="http://Netton.cn" title="Link 7"><span>Link 7</span></a></li>  </ul></div><br /><br /><h2>Tab Menu E</h2><div id="tabsE">  <ul>    <li><a href="http://Netton.cn" title="Link 1"><span>Link 1</span></a></li>    <li><a href="http://Netton.cn" title="Link 2"><span>Link 2</span></a></li>    <li><a href="http://Netton.cn" title="Link 3"><span>Link 3</span></a></li>    <li><a href="http://Netton.cn" title="Longer Link Text"><span>Longer Link Text</span></a></li>    <li><a href="http://Netton.cn" title="Link 5"><span>Link 5</span></a></li>    <li><a href="http://Netton.cn" title="Link 6"><span>Link 6</span></a></li> <li><a href="http://Netton.cn" title="Link 7"><span>Link 7</span></a></li>  </ul></div><br /><br /><h2>Tab Menu F</h2><div id="tabsF">  <ul>    <li><a href="http://Netton.cn" title="Link 1"><span>Link 1</span></a></li>    <li><a href="http://Netton.cn" title="Link 2"><span>Link 2</span></a></li>    <li><a href="http://Netton.cn" title="Link 3"><span>Link 3</span></a></li>    <li><a href="http://Netton.cn" title="Longer Link Text"><span>Longer Link Text</span></a></li>    <li><a href="http://Netton.cn" title="Link 5"><span>Link 5</span></a></li>    <li><a href="http://Netton.cn" title="Link 6"><span>Link 6</span></a></li> <li><a href="http://Netton.cn" title="Link 7"><span>Link 7</span></a></li>  </ul></div><br /><br /><h2>Tab Menu G</h2><div id="tabsG">  <ul>    <li><a href="http://Netton.cn" title="Link 1"><span>Link 1</span></a></li>    <li><a href="http://Netton.cn" title="Link 2"><span>Link 2</span></a></li>    <li><a href="http://Netton.cn" title="Link 3"><span>Link 3</span></a></li>    <li><a href="http://Netton.cn" title="Longer Link Text"><span>Longer Link Text</span></a></li>    <li><a href="http://Netton.cn" title="Link 5"><span>Link 5</span></a></li>    <li><a href="http://Netton.cn" title="Link 6"><span>Link 6</span></a></li> <li><a href="http://Netton.cn" title="Link 7"><span>Link 7</span></a></li>  </ul></div><br /><br /><h2>Tab Menu H</h2><div id="tabsH">  <ul>    <li><a href="http://Netton.cn" title="Link 1"><span>Link 1</span></a></li>    <li><a href="http://Netton.cn" title="Link 2"><span>Link 2</span></a></li>    <li><a href="http://Netton.cn" title="Link 3"><span>Link 3</span></a></li>    <li><a href="http://Netton.cn" title="Longer Link Text"><span>Longer Link Text</span></a></li>    <li><a href="http://Netton.cn" title="Link 5"><span>Link 5</span></a></li>    <li><a href="http://Netton.cn" title="Link 6"><span>Link 6</span></a></li> <li><a href="http://Netton.cn" title="Link 7"><span>Link 7</span></a></li>  </ul></div><br /><br /><h2>Tab Menu I</h2><div id="tabsI">  <ul>    <li><a href="http://Netton.cn" title="Link 1"><span>Link 1</span></a></li>    <li><a href="http://Netton.cn" title="Link 2"><span>Link 2</span></a></li>    <li><a href="http://Netton.cn" title="Link 3"><span>Link 3</span></a></li>    <li><a href="http://Netton.cn" title="Longer Link Text"><span>Longer Link Text</span></a></li>    <li><a href="http://Netton.cn" title="Link 5"><span>Link 5</span></a></li>    <li><a href="http://Netton.cn" title="Link 6"><span>Link 6</span></a></li> <li><a href="http://Netton.cn" title="Link 7"><span>Link 7</span></a></li>  </ul></div><br /><br /><h2>Tab Menu J</h2><div id="tabsJ">  <ul>    <li><a href="http://Netton.cn" title="Link 1"><span>Link 1</span></a></li>    <li><a href="http://Netton.cn" title="Link 2"><span>Link 2</span></a></li>    <li><a href="http://Netton.cn" title="Link 3"><span>Link 3</span></a></li>    <li><a href="http://Netton.cn" title="Longer Link Text"><span>Longer Link Text</span></a></li>    <li><a href="http://Netton.cn" title="Link 5"><span>Link 5</span></a></li>    <li><a href="http://Netton.cn" title="Link 6"><span>Link 6</span></a></li> <li><a href="http://Netton.cn" title="Link 7"><span>Link 7</span></a></li>  </ul></div><br /><br /><h2>Tab Menu K</h2><div id="tabsK">  <ul>    <li><a href="http://Netton.cn" title="Link 1"><span>Link 1</span></a></li>    <li><a href="http://Netton.cn" title="Link 2"><span>Link 2</span></a></li>    <li><a href="http://Netton.cn" title="Link 3"><span>Link 3</span></a></li>    <li><a href="http://Netton.cn" title="Longer Link Text"><span>Longer Link Text</span></a></li>    <li><a href="http://Netton.cn" title="Link 5"><span>Link 5</span></a></li>    <li><a href="http://Netton.cn" title="Link 6"><span>Link 6</span></a></li> <li><a href="http://Netton.cn" title="Link 7"><span>Link 7</span></a></li>  </ul></div></body></html>

Netton.cn 提示：可以先修改部分代码后再运行

如下图所示，超级漂亮的DIV+CSS导航菜单
CSS TAB DESIGNER生成的超漂亮DIV+CSS导航菜单

生成此菜单的软件下载：
自动生成您需要的DIV+CSS导航菜单CSS TAB DESIGNER下载

<< 发一个不用图片实现圆角代码，非常经典2007流行网站导航设计欣赏 >>

查看所有评论