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><href="home.html"><span>Home</span></a></li>
<li><href="products.html"><span>Products</span></a></li>
<li id="current"><href="services.html"><span>Services</span></a></li>
<li><href="support.html"><span>Support</span></a></li>
<li><href="order.html"><span>Order</span></a></li>
<li><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下载
以后打算就用这个了