仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 755|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:CSS中怎样准确的利用id和class

[复制链接]
愤怒的大鸟 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:13:14 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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或者是火狐,您的网站都能很好的兼容。
深爱那片海 该用户已被删除
沙发
发表于 2015-1-18 05:35:16 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
透明 该用户已被删除
板凳
发表于 2015-1-26 13:44:17 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
海妖 该用户已被删除
地板
发表于 2015-2-4 20:32:06 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
灵魂腐蚀 该用户已被删除
5#
发表于 2015-2-10 08:11:57 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
冷月葬花魂 该用户已被删除
6#
发表于 2015-3-1 06:21:28 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
第二个灵魂 该用户已被删除
7#
发表于 2015-3-10 13:04:12 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
简单生活 该用户已被删除
8#
发表于 2015-3-17 08:09:24 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
飘灵儿 该用户已被删除
9#
发表于 2015-3-24 04:20:34 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-4 04:30

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表