一、Google首頁(yè)的行為分析

    Google首頁(yè)最上方有一個(gè)導(dǎo)航條，以一些鏈接的形式，來在不同功能間導(dǎo)航，包括“網(wǎng)頁(yè)”、“圖片”、“視頻”、“地圖”等。

    第一頁(yè)是“網(wǎng)頁(yè)”，此時(shí)鏈接沒有下劃線，黑體顯示。但仍然是一個(gè)鏈接，點(diǎn)擊它會(huì)刷新當(dāng)前的頁(yè)面。

    當(dāng)我們點(diǎn)擊第二項(xiàng)的時(shí)候，可以看到，其他“網(wǎng)頁(yè)”恢復(fù)為鏈接的形式，而我們點(diǎn)擊的鏈接變成類似黑體文本的形式。

    Google的第一行導(dǎo)航欄下方，有一條橫線。

    Google首頁(yè)中，div gog包住了導(dǎo)航區(qū)div gbar和登錄區(qū)div guser，這是三個(gè)主要的div，而橫線是由下方的工作區(qū)的bodder-top定義。

二、Google首頁(yè)的樣式分析

和導(dǎo)航欄有關(guān)系的樣式如下

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首頁(yè)和Asp.net mvc中元素的對(duì)應(yīng)關(guān)系

div gog對(duì)應(yīng)div header

div gbar對(duì)應(yīng)div menucontainer

div guser對(duì)于div logindisplay

因此我們可以參照上面的樣式，定義主要的樣式，由此得到不折不扣的Google導(dǎo)航條：

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;
}

/*設(shè)置header中的鏈接屬性,此時(shí)的權(quán)值100+1，表示hearder中的a鏈接*/
#header a
{
    color: #11c !important;
    margin-right: .5em;
    text-decoration: underline !important;
    /*color: #00c !important;*/
}

/*設(shè)置header中的.selected類的樣式，此時(shí)權(quán)值為100+1*/
#header .selected
{
    color: #000 !important;
    cursor: default;
    font-weight: bold;
    text-decoration: none !important;
}

四、定義當(dāng)前菜單項(xiàng)的樣式：

1、如何為ActionLink添加樣式：

    ActionLink有10個(gè)重載，其中Html.ActionLink("linkText","actionName","controlName",routeValues,htmlAttributes)

    routeValues用于傳遞參數(shù)，htmlAttributes用于傳遞a標(biāo)簽的屬性，例如：

    Html.ActionLink("產(chǎn)品","Detail","Product",new {id=1},new {@class="selected"})，這里將生成：<a href="Products/Detail/1" class="selected">產(chǎn)品</a>

    當(dāng)然如果加入其他屬性，不需要@，因?yàn)閏lass是關(guān)鍵字，這里傳入的時(shí)候需要用@class

    我們也可以考慮使用GenerateLink，查看ActionLink的源代碼，可以看到，基本上是調(diào)用GenerateLink的：

     HtmlHelper.GenerateLink(helper.ViewContext.RequestContext, helper.RouteCollection, linkText, null/* routeName */, actionName, controllerName, rout,null));

    這里helper的viewContext之類的東西也需要熟悉。

2、創(chuàng)建一個(gè)hemlhelper，用來定義首頁(yè)的菜單項(xiàng)：當(dāng)其為當(dāng)前頁(yè)的時(shí)候，為其加上selected樣式。

/// <summary>
/// 在_layout中取代actionLink，如果是當(dāng)前頁(yè)的鏈接則加上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"];  
       
        //如果菜單項(xiàng)是當(dāng)前頁(yè)面
        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中，注意樣式應(yīng)用的優(yōu)先級(jí)：

優(yōu)先級(jí)規(guī)則：

1、同一組css設(shè)置中，標(biāo)記!important的設(shè)置，最優(yōu)先

2、 網(wǎng)頁(yè)的css高于瀏覽器默認(rèn)的樣式，這個(gè)是當(dāng)然的

3、選擇器權(quán)值大的優(yōu)先

4、選擇器權(quán)值相等時(shí)，后出現(xiàn)的優(yōu)先

其中權(quán)值如何計(jì)算：1.內(nèi)聯(lián)樣式：1000；2."#id"：100；3.".class"：10；4.元素，比如a { }：1