在Asp.Net 2.0中使用Css Tab Design样式美化菜单

Css Tab Design 是一个用来做导航样式非常方便的Freeware.(其实就是提供了一堆样式可以套用: ) ),效果如下图所示:

  

界面如下:

可以非常方便的导出css文件:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
         < html  xmlns ="http://www.w3.org/1999/xhtml" >
                 < head >
                         < meta  http-equiv ="Content-Type"  content ="text/html; charset=iso-8859-1"   />
                         < title > Free CSS Navigation Menu Designs 1 at exploding-boy.com </ title >
                         < style  type ="text/css" >
<!--
    body {}{
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}

h2 {}{
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

/**//*- 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("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("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;
      }

        #tabsF #current a {}{
                background-position:0% -42px;
        }
        #tabsF #current a span {}{
                background-position:100% -42px;
        }
-->
</ style >
                 </ head >

                 < body >
                         < h2 > Tab Menu F </ h2 >
                         < div  id ="tabsF" >
                                 < ul >
                                         <!--  CSS Tabs  -->
< li >< a  href ="home.html" >< span > Home </ span ></ a ></ li >
< li >< a  href ="products.html" >< span > Products </ span ></ a ></ li >
< li  id ="current" >< a  href ="services.html" >< span > Services </ span ></ a ></ li >
< li >< a  href ="support.html" >< span > Support </ span ></ a ></ li >
< li >< a  href ="order.html" >< span > Order </ span ></ a ></ li >
< li >< a  href ="about.html" >< span > About </ span ></ a ></ li >

                                 </ ul >
                         </ div >
                 </ body >
</ html >

而.Net2自带的Menu控件用来做导航也是非常方便的
只要SiteMap文件里定义好站点路径
拖一个SiteMapDataSource和一个Menu并设置DataSource就好了

直接复制Css是不行的,因为Css Tab Design生成的是Div布局的
而Menu是Table布局的，而且从上面的代码可以看出
菜单项文字<span>也是有样式的，因此需要自定义Menu的模板 加入<span>

在这里有个问题郁闷了我很久,初学.Net 2 ,SiteMap不大熟
http://community.csdn.net/Expert/topic/5199/5199167.xml?temp=.8506586

最后总算调好了,没有做进一步的美化:


有兴趣的可以下载源码看看

另:  今天看Scott的blog发现有 ASP.NET 2.0 CSS Friendly Control Adapters 1.0 这个dd
就是把menu gridview等输出成div格式的
上面的Menu也挺漂亮的
提供了Start Kit下载
以后打算就用这个了