一、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