在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
一、Google首页的行为分析 Google首页最上方有一个导航条,以一些链接的形式,来在不同功能间导航,包括“网页”、“图片”、“视频”、“地图”等。 第一页是“网页”,此时链接没有下划线,黑体显示。但仍然是一个链接,点击它会刷新当前的页面。 当我们点击第二项的时候,可以看到,其他“网页”恢复为链接的形式,而我们点击的链接变成类似黑体文本的形式。 Google的第一行导航栏下方,有一条横线。 Google首页中,div gog包住了导航区div gbar和登录区div guser,这是三个主要的div,而横线是由下方的工作区的bodder-top定义。
二、Google首页的样式分析 和导航栏有关系的样式如下 body body, td, a, p, .h a em a.gb1, a.gb2, a.gb3, a.gb4 .gb1 a.gb1, a.gb4 a.gb1, a.gb2, a.gb3, a.gb4 #gbar .gbz0l a a:visited
三、Google首页和Asp.net mvc中元素的对应关系 div gog对应div header div gbar对应div menucontainer div guser对于div logindisplay
因此我们可以参照上面的样式,定义主要的样式,由此得到不折不扣的Google导航条: body /* PRIMARY LAYOUT ELEMENTS #header #menucontainer,#logindisplay #logindisplay /*设置header中的链接属性,此时的权值100+1,表示hearder中的a链接*/ /*设置header中的.selected类的样式,此时权值为100+1*/
四、定义当前菜单项的样式: 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> 五、css中,注意样式应用的优先级: 优先级规则: 1、同一组css设置中,标记!important的设置,最优先 2、 网页的css高于浏览器默认的样式,这个是当然的 3、选择器权值大的优先 4、选择器权值相等时,后出现的优先 其中权值如何计算:1.内联样式:1000;2."#id":100;3.".class":10;4.元素,比如a { }:1 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论