zoukankan      html  css  js  c++  java
  • 在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><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下载
    以后打算就用这个了

  • 相关阅读:
    如何快速上手LINQ to XML
    协变还是逆变,这还是个问题吗
    WPF的依赖属性是怎么节约内存的?
    CLR线程总结
    关于.NET异常 你应该知道的更多点
    [TED] Kinect控制的四翼直升机
    vSphere系列Windows环境安装部署嵌入式PSC的vCenter Server
    vSphere系列Linux环境部署安装非嵌入式PSC的vCenter Server Appliance
    Go 初识
    vSphere系列vCenter Server入门_01.认识与安装
  • 原文地址:https://www.cnblogs.com/calmzeal/p/581257.html
Copyright © 2011-2022 走看看