仓酷云

标题: 来谈谈：CSS中怎样准确的利用id和class [打印本页]

作者: 愤怒的大鸟 时间: 2015-1-16 00:13
标题: 来谈谈：CSS中怎样准确的利用id和class
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
明天有点闲，想向人人就教一下id和class的利用。　　依照字面的意义，id是指一个元素在全部文档中的“独一标记”，而class则是它所属的“种别”。依照语法，同名的id在一个文档里只应当呈现一次，而class名可反复利用。
　　可是在详细利用的时分，哪些款式该用id，哪些款式改用class呢？有个谜底很复杂：
　　那些只会在页面中呈现一次的元素应当用id来暗示。好比页头（header）页尾（footer），导航菜单（main-menu）等。可是真的这么复杂么？
我先举几个例子来讲明我所碰到的为难：

年夜多半的页面都是两栏结构的：一个主栏（maincolumn），一个侧栏（sidecolumn）。就像如许：

登录/注册后可看大图

2008062021513370.gif (6.24 KB, 下载次数: 2)

下载附件保存到相册

来谈谈：CSS中怎样准确的利用id和class

2015-1-16 00:13 上传

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
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 透明 时间: 2015-1-26 13:44
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 海妖 时间: 2015-2-4 20:32
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 灵魂腐蚀 时间: 2015-2-10 08:11
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 冷月葬花魂 时间: 2015-3-1 06:21
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 第二个灵魂 时间: 2015-3-10 13:04
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 简单生活 时间: 2015-3-17 08:09
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 飘灵儿 时间: 2015-3-24 04:20
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

欢迎光临仓酷云 (http://ckuyun.com/)