Asp.net mvc 3中模仿Google首页导航条的布局和样式
一、Google首页的行为分析
Google首页最上方有一个导航条，以一些链接的形式，来在不同功能间导航，包括“网页”、“图片”、“视频”、“地图”等。
第一页是“网页”，此时链接没有下划线，黑体显示。但仍然是一个链接，点击它会刷新当前的页面。
当我们点击第二项的时候，可以看到，其他“网页”恢复为链接的形式，而我们点击的链接变成类似黑体文本的形式。
Google的第一行导航栏下方，有一条横线。
Google首页中，div gog包住了导航区div gbar和登录区div guser，这是三个主要的div，而横线是由下方的工作区的bodder-top定义。
二、Google首页的样式分析
和导航栏有关系的样式如下
body
{
margin: 0;
}
#gog
{
padding: 3px 8px 0;
}
body, td, a, p, .h
{
font-family: arial,sans-serif;
}a em
{
text-decoration: underline;
}
a.gb1, a.gb2, a.gb3, a.gb4
{
color: #11c !important;
}
#gog
{
background: #fff;
}
#gbar, #guser
{
font-size: 13px;
padding-top: 1px !important;
}
#gbar
{
float: left;
height: 22px;
}
#guser
{
padding-bottom: 7px !important;
text-align: right;
}
.gb1
{
margin-right: .5em;
}
.gb1, .gb3
{
zoom: 1;
}
a.gb1, a.gb4
{
text-decoration: underline !important;
}
a.gb1, a.gb2, a.gb3, a.gb4
{
color: #00c !important;
}
#gbar .gbz0l
{
color: #000 !important;
cursor: default;
font-weight: bold;
text-decoration: none !important;
}
body
{
background: #fff;
color: black;
}
a
{
color: #11c;
text-decoration: none;
}
a:hover, a:active
{
text-decoration: underline;
}
a:visited
{
color: #551a8b;
}
a.gb1, a.gb4
{
text-decoration: underline;
}
三、Google首页和Asp.net mvc中元素的对应关系
div gog对应div header
div gbar对应div menucontainer
div guser对于div logindisplay
因此我们可以参照上面的样式，定义主要的样式，由此得到不折不扣的Google导航条：
body
{
margin: 0;
font-family: arial,sans-serif;
background: #fff;
color: black;
}/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/#header
{
padding: 3px 8px 0;
background: #fff;
}#menucontainer,#logindisplay
{
font-size: 13px;
padding-top: 1px !important;
}
#menucontainer
{
float: left;
height: 22px;
}#logindisplay
{
padding-bottom: 7px !important;
text-align: right;
}/*设置header中的链接属性,此时的权值100+1，表示hearder中的a链接*/
#header a
{
color: #11c !important;
margin-right: .5em;
text-decoration: underline !important;
/*color: #00c !important;*/
}/*设置header中的.selected类的样式，此时权值为100+1*/
#header .selected
{
color: #000 !important;
cursor: default;
font-weight: bold;
text-decoration: none !important;
}
四、定义当前菜单项的样式：
1、如何为ActionLink添加样式：
ActionLink有10个重载，其中Html.ActionLink("linkText","actionName","controlName",routeValues,htmlAttributes)
routeValues用于传递参数，htmlAttributes用于传递a标签的属性，例如：
Html.ActionLink("产品","Detail","Product",new {id=1},new {@class="selected"})，这里将生成：<a href="Products/Detail/1" class="selected">产品</a>
当然如果加入其他属性，不需要@，因为class是关键字，这里传入的时候需要用@class
我们也可以考虑使用GenerateLink，查看ActionLink的源代码，可以看到，基本上是调用GenerateLink的：
HtmlHelper.GenerateLink(helper.ViewContext.RequestContext, helper.RouteCollection, linkText, null/* routeName */, actionName, controllerName, rout,null));
这里helper的viewContext之类的东西也需要熟悉。
2、创建一个hemlhelper，用来定义首页的菜单项：当其为当前页的时候，为其加上selected样式。
/// <summary>
/// 在_layout中取代actionLink，如果是当前页的链接则加上selected样式
/// </summary>
public static class ActionItemHelper
{
public static MvcHtmlString ActionItem(this HtmlHelper helper, string linkText, string actionName, string controllerName)
{
string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];
//如果菜单项是当前页面
if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) &&
currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
return helper.ActionLink(linkText, actionName, controllerName,null,new{@class="selected"});
else
return helper.ActionLink(linkText, actionName, controllerName);
}
}
五、css中，注意样式应用的优先级：优先级规则：
1、同一组css设置中，标记!important的设置，最优先
2、 网页的css高于浏览器默认的样式，这个是当然的
3、选择器权值大的优先
4、选择器权值相等时，后出现的优先
其中权值如何计算：1.内联样式：1000；2."#id"：100；3.".class"：10；4.元素，比如a { }：1
补充：Web开发 , ASP.Net ,
