网页布局id vs class

原创 2007年09月24日 20:00:00

 

无论是class还是id,都是XHTML所有对象都支持的一种公共属性,并且也是其中的核心属性。

1. 什么是id

 

1.1  idXHTML元素的一个属性,用于标示元素名称。除了可以定义样式,也方便交互,比如JS控制. id名称在使用上要求每个页面只能出现一次, 比如JS对其进行控制的话,2ID一样的会无法操作从而发生错误.  但页面还是能显示的,不过不符合规范.

1.2  使用的情况

在不考虑使用JavaScript,而是使用XHTML代码结构及CSS样式应用的情况下,应当有选者性的使用id属性对元素进行标识.

l          样式只使用一次

如果有一段样式代码在页面中只可能使用一次, 例如 logo之类的一般只会用一次。

l          对于页面的区域进行标识

比如head 可以用div 来标示,有助于XHTML的可读性.也有助于CSS样式的编写。

 

2.  class

2.1 什么是class

class直译为类,种类。顺名思义, class是相对于id的一个属性。如果说id  对单独元素的标示,那么class就是对一类元素的标示。

 

2.2 使用情况

l          一种样式一个页面中需要出现很多次

这样的情况应该是很经常出现的.

l          通用及经常能使用的元素

`如页面的多个部分可能都需要出现一个 80 X 80的广告区,而这个区域并不总是存在,也有可能同时出现多个。

l          class的高级使用技巧

class作为专门对于样式定义的属性,不通于ID,除了在使用上可以多个元素同时使用同一个class名称之外,甚至可以同一个元素使用多个class样式。

div class=”c1 c2 c3”>xx</div>

 

 

不过总体来说, class使用的频率会高很多.

参照163首页上的代码,会发现基本都是class.

 

网页布局之Div vs Table (2)

大家都知道table可以实现很清晰的表状结构,这样的特点对于初学者来说无疑是很方便的。很多时候人们都忽略了div的表格效果,其实div也能实现比较好的表格效果,下面为大家演示一下。 div实现表...

网页布局之Div vs Table (2)

大家都知道table可以实现很清晰的表状结构,这样的特点对于初学者来说无疑是很方便的。很多时候人们都忽略了div的表格效果,其实div也能实现比较好的表格效果,下面为大家演示一下。div实现表格效果需...
  • lsh6688
  • lsh6688
  • 2012年03月15日 22:14
  • 5707

网页布局之Div vs Table (1)

关于网页布局,大体上可以分为两种,一种是使用table布局,另一种使用div布局,很多人说现在主流的网页布局是div+css。那么div和table布局究竟有那些联系和区别呢?我们又该如何进行网页布局...
  • lsh6688
  • lsh6688
  • 2012年03月13日 10:56
  • 3631

【CSS】关于div的对齐与网页布局

div布局之所以要学懂学透,是因为table的布局实在是难堪大用,如果是同处于一个表格之内, 各行的规格分布根本就没法调, 例如下面的一段非常简单的代码: 无标题文档 1111...

网页布局中的常见的兼容性问题

1.居中问题     div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto 2.高度问题     两上下排列或嵌套的div,上面的div设置高度(hei...

网页布局里那些让人摸不着头脑的小问题——有关html代码换行

网页布局时常常会遇到很多让人苦恼的兼容性问题,或者莫名其妙的错误。这篇博文会...

最新Android WebView Websettings设置, Android WebView加载网页布局错乱, 在Android4.4新版本之后WebSettings新增设置。

两张图片对比后,你会发现第一张加载web网页的布局乱了。原因:Android4.4(API 版本 19) 提供了一个基于 Chromium 版本的新版本 WebView,不再是webkit了。所以在对...

前端基础学习-常见CSS网页布局

常见的网页布局大致分为:一列布局,两列布局,三列布局以及混合布局一列布局 Document .header{ height: 8...

Struts2 使用SiteMesh做网页布局

简单来讲SiteMesh就是用来做网页母版 Layout分层的。   SiteMesh官方网站给出的最新版本是SiteMesh Version 2.4.1,但是下载不下来!!下载页面NOT...
  • zavens
  • zavens
  • 2012年09月03日 22:58
  • 3701

CSS垂直居中网页布局实现的5种方法

CSS 垂直居中 vertical-align
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页布局id vs class
举报原因:
原因补充:

(最多只允许输入30个字)