网页布局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 (1)

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

网页布局之Div vs Table (2)

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

网页布局之响应式设计简明指南

一、为什么要使用响应式设计? 我们想让我们的网站通过响应用户的行为、设备的屏幕大小和屏幕方向,从而在所有设备上都能用。 二、一个碎片化的世界 截止2013年,有成千上万种不同的设...

Struts2 使用SiteMesh做网页布局

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

网页布局基础浅谈

网页布局基础

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

CSS 垂直居中 vertical-align

H5研究四:用Native App思想指导网页布局

用Native App思想指导网页布局,通过比对网页与原生App的共同特点,快速理解网页布局。实现横向对比,解决困惑。 首先如果让你用安卓或者IOS客户端来完成这个页面,我们该怎么办? 这里以IOS...

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

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

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

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

前端技能练习:html网页布局css属性position的属性值的描述

在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static、absolute、fixed、r...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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