首页 - ASP.NET技术专区 - ASP.NET控件

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

发布时间: 2007-01-25 11:57    作者: 未知    来源: 未知    浏览：    评论

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下载
以后打算就用这个了
 



上一篇 Web显示层技术评估 下一篇 最近看问分页控件的人比较多，自己改造了一下国外人的控件，不敢独享，大家分享。

TAG

Smile Big Smile Surprise Stick out tongue Wink Sad Tongue Tied Indifferent Crying Embarrassed Cool Angry Angel Devil [8-|] [:#] [:-*] [:^)] [<:o)] [|-)] Yes Beer Left Hug Music Star Time Snail Pizza Automobile Umbrella Computer Storm [mo] [8o|] [^o)] [+o(] [*-)] [8-)] Coffee No Drinks [Z] Right Hug Cake Broken Heart Gift Wilted Flower Movie Dog Idea Sleep Email Travel Paradise
呢称：

加粗 斜体 下划线 链接 图片 代码 邮件地址 引用 列表

最多只能输入100个字符

Tags

SQL 数据库 asp.net C# XML 控件 .NET教程 程序 事件 数据 安全 代码 Server 客户端 验证 数据库专栏 接口 文件 Oracle DataSet 函数 DataGrid 问题 .net return C#语言 JavaScript 服务 IIS 对象 语句 windows 继承 时间 web.config 设计 开发 参数 变量 解决 字符 ADO.net 环境 VB.Net语言 web 异常 工具 服务器 计算 实例 OLEDB Application VB Word WebService insert asp net 安装 记录

精华推荐

更多

精品下载

更多