Asp.net mvc 3 imitates the layout and style of the Google homepage navigation bar

I. Behavior Analysis on the Google Homepage

There is a navigation bar at the top of the Google homepage, which uses links to navigate between different functions, including webpage, image, video, and map.

The first page is "webpage". The link does not have any underscores and is displayed in black box. But it is still a link. Clicking it will refresh the current page.

When we click the second item, we can see that the other "Web pages" are restored to the form of links, and the links we click are changed to the form of simhei text.

There is a horizontal line under the navigation bar of Google's first line.

On the Google homepage, div gog includes the div gbar in the navigation area and the div guser In the logon area. These are the three main div groups, and the horizontal line is defined by the bodder-top in the lower workspace.

 

2. Style Analysis on the Google Homepage

The style related to the navigation bar is as follows:

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

 

 

Iii. Relationship between elements on the Google homepage and Asp.net mvc

Div gog corresponds to div header

Div gbar corresponds to div menucontainer

Div guser for div logindisplay

 

Therefore, we can refer to the above style to define the main style, so as to get an uncompromising Google navigation bar:

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

/* Set the link attribute in the header. The weight is 100 + 1, indicating the link in the hearder */
# Header
{
Color: # 11c! Important;
Margin-right:. 5em;
Text-decoration: underline! Important;
/* Color: # 00c! Important ;*/
}

/* Set the. selected class style in the header. The weight is 100 + 1 */
# Header. selected
{
Color: #000! Important;
Cursor: default;
Font-weight: bold;
Text-decoration: none! Important;
}

 

4. Define the style of the current menu item:

1. How to add a style for ActionLink:

ActionLink has 10 reloads, of which Html. ActionLink ("linkText", "actionName", "controlName", routeValues, htmlAttributes)

RouteValues is used to pass Parameters. htmlAttributes is used to pass attributes of a tag, for example:

Html. actionLink ("Product", "Detail", "Product", new {id = 1}, new {@ class = "selected"}), which is generated here: <a href = "Products/Detail/1" class = "selected"> product </a>

Of course, if other attributes are added, @ is not required. Because class is a keyword, @ class is required when passed in.

We can also consider using GenerateLink to view the source code of ActionLink. It can be seen that basically GenerateLink is called:

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

Here, you need to be familiar with things like viewContext of helper.

2. Create a hemlhelper to define the menu items of the home page: when it is the current page, add the selected style to it.

/// <Summary>
/// Replace actionLink in _ layout. If it is the link of the current page, the selected style is added.
/// </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 the menu item is the current page
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 );
}
}

5. In css, pay attention to the priority of the style application:

Priority rules:

1. Mark the same group of css settings! Important settings, top priority

2. the css of the webpage is higher than the default style of the browser. This is of course

3. Priority of a large selector weight

4. When the selector weights are equal

How to calculate the weight: 1. inline style: 1000; 2. "# id": 100; 3. ". class ": 10; 4. element, such as a {}: 1