|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。
明天有点闲,想向人人就教一下id和class的利用。 依照字面的意义,id是指一个元素在全部文档中的“独一标记”,而class则是它所属的“种别”。依照语法,同名的id在一个文档里只应当呈现一次,而class名可反复利用。
可是在详细利用的时分,哪些款式该用id,哪些款式改用class呢?有个谜底很复杂:
那些只会在页面中呈现一次的元素应当用id来暗示。好比页头(header)页尾(footer),导航菜单(main-menu)等。可是真的这么复杂么?
我先举几个例子来讲明我所碰到的为难:
- 年夜多半的页面都是两栏结构的:一个主栏(maincolumn),一个侧栏(sidecolumn)。就像如许:
OK,我们会用两个div来暗示它们。成绩来了,应当利用id仍是class?依照惯例的了解,一个页面只会有一个主栏,一个侧栏咯,以是固然应当用id。文档写成这:
<divid="main-col"></div>
<divid="side-col"></div>
#main-col{float:left;width:700px;}
#side-col{float:right;width:200px;}
也是很心旷神怡的,不是么?以是我决意用id。
因而页面做好了,网站做好了,上线了,运营了,会见量年夜了。这时候候公司决意,嗯,我们应当在一些页面中加几个通栏告白。“通栏”哦!这就意味着它必需高出主栏和侧栏,把它们俩拦腰截断。因而我们从头“创造”一个款式:banner,让banner来一个clear:both;然后放到页面两头往制止失落两个栏的浮动。然后再在banner的前面持续分两栏。上面是表示图:
以是HTML应当是如许:
<divid="main-col"></div>
<divid="side-col"></div>
<divclass="banner></div>
<divid="main-col"></div>
<divid="side-col"></div>
成绩轻松办理(多亏偶履历丰厚啊,表彰一下本人,咔咔。)。惟独只要一个成绩:main-col和side-col这两个id反复了。这个成绩实在也不贫苦,把它们全体改成class不就好啦(乃至,不往改它,我就不信扫瞄器会给我报错,哼)。
- 可是,我这不是本人给了本人一个嘴巴么?现在还信誓旦旦的说,main-col只会呈现一次,以是用id……。以是教导就是,main-col和side-col,或是left-col,right-col,extra-col,xxx-col,这些用来分栏结构的款式,都给我用class。嗯,记在本本上。
- 计划页面的时分,在页头和主菜单之间放了一个搜刮框(search-box)。既然我们的页头(header),导航栏(main-menu),登录框(login-box)都用的是id,和它们在一同的search-box也应当用id咯?呃,当心啊,老板极可能会让你在页尾也放一个搜刮框的,你用id你就逝世定了。以是search-box应当用class。不外如许怪怪的,凭甚么login-box用id,而search-box却用class呢?
- 慢着,你觉得导航栏就能够包管独一了么?我来说一个例子:
喏,老板要来一点分歧的,让把导航栏放在左边。这个没成绩,用一个ul就弄定拉。我把它的id设置成main-menu可是过了一会儿,他说,嗯,为了可用性(咳咳。。),我们必要把菜单分红两部分。就像:
呃。。好说,分红两个ul就行了。可是,它们的id都叫main-menu么??哎,老成绩又来了
支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。 |
|