• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Asp.netmvc3中模仿Google首页导航条的布局和样式

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
如何在ASP.NET环境下长期保存ASP.NET页面的session变量发布时间:2022-07-10
下一篇:
[我还会回来的]asp.net core再战iris发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap