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

本文介绍了一个用于创建导航栏样式的免费工具CssTabDesign,并探讨了如何使用.NET2中的Menu控件来实现类似的效果。文章还讨论了自定义Menu控件模板的方法以及如何利用ASP.NET2.0 CSSFriendlyControlAdapters进行改进。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

  

界面如下:

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

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

InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gifh2 
{dot.gif}{
InBlock.gif        font
: bold 14px Verdana, Arial, Helvetica, sans-serif;
InBlock.gif        color
: #000;
InBlock.gif        margin
: 0px;
InBlock.gif        padding
: 0px 0px 0px 15px;
ExpandedSubBlockEnd.gif
}

InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif
/**//*- Menu Tabs F--------------------------- */
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif    #tabsF 
{dot.gif}{
InBlock.gif      float
:left;
InBlock.gif      width
:100%;
InBlock.gif      background
:#efefef;
InBlock.gif      font-size
:93%;
InBlock.gif      line-height
:normal;
InBlock.gif          border-bottom
:1px solid #666;
ExpandedSubBlockEnd.gif      
}

ExpandedSubBlockStart.gifContractedSubBlock.gif    #tabsF ul 
{dot.gif}{
InBlock.gif        margin
:0;
InBlock.gif        padding
:10px 10px 0 50px;
InBlock.gif        list-style
:none;
ExpandedSubBlockEnd.gif      
}

ExpandedSubBlockStart.gifContractedSubBlock.gif    #tabsF li 
{dot.gif}{
InBlock.gif      display
:inline;
InBlock.gif      margin
:0;
InBlock.gif      padding
:0;
ExpandedSubBlockEnd.gif      
}

ExpandedSubBlockStart.gifContractedSubBlock.gif    #tabsF a 
{dot.gif}{
InBlock.gif      float
:left;
InBlock.gif      background
:url("tableftF.gif") no-repeat left top;
InBlock.gif      margin
:0;
InBlock.gif      padding
:0 0 0 4px;
InBlock.gif      text-decoration
:none;
ExpandedSubBlockEnd.gif      
}

ExpandedSubBlockStart.gifContractedSubBlock.gif    #tabsF a span 
{dot.gif}{
InBlock.gif      float
:left;
InBlock.gif      display
:block;
InBlock.gif      background
:url("tabrightF.gif") no-repeat right top;
InBlock.gif      padding
:5px 15px 4px 6px;
InBlock.gif      color
:#666;
ExpandedSubBlockEnd.gif      
}

ExpandedSubBlockStart.gifContractedSubBlock.gif    
/**//* Commented Backslash Hack hides rule from IE5-Mac \*/
ExpandedSubBlockStart.gifContractedSubBlock.gif    #tabsF a span 
{dot.gif}{float:none;}
ExpandedSubBlockStart.gifContractedSubBlock.gif    
/**//* End IE5-Mac hack */
ExpandedSubBlockStart.gifContractedSubBlock.gif    #tabsF a:hover span 
{dot.gif}{
InBlock.gif      color
:#FFF;
ExpandedSubBlockEnd.gif      
}

ExpandedSubBlockStart.gifContractedSubBlock.gif    #tabsF a:hover 
{dot.gif}{
InBlock.gif      background-position
:0% -42px;
ExpandedSubBlockEnd.gif      
}

ExpandedSubBlockStart.gifContractedSubBlock.gif    #tabsF a:hover span 
{dot.gif}{
InBlock.gif      background-position
:100% -42px;
ExpandedSubBlockEnd.gif      
}

InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif        #tabsF #current a 
{dot.gif}{
InBlock.gif                background-position
:0% -42px;
ExpandedSubBlockEnd.gif        
}

ExpandedSubBlockStart.gifContractedSubBlock.gif        #tabsF #current a span 
{dot.gif}{
InBlock.gif                background-position
:100% -42px;
ExpandedSubBlockEnd.gif        
}

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


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

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

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

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

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

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

转载于:https://www.cnblogs.com/calmzeal/archive/2006/12/04/581257.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值