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 >
< 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下载
以后打算就用这个了
http://www.cnblogs.com/calmzeal/archive/2006/12/04/581257.html