Archive for February, 2006

下雨了,天转冷

早上刚起床就发现外面又下雨了,飘飘洒洒,淅淅沥沥,不喜欢上班路上的雨,因为总是会把我的衣服或是鞋子淋湿,现在Office里衣服穿少还会冷得发抖,特别是这几天心情不是很好的时候,更是哀怨惆怅,愁绪万千~~~

下班的路上,雨下的更大,走在路上都觉得又湿又冷,不过不再为了工作的事情而烦心,我小弟的同学刚调到福州,晚上带他去金山找他小姨子,一向路痴的我,虽然问了同事具体的路线,还画了一张地图,却还是迷了路,汗。。。估计这辈子都不会有长进,迷糊了几十年了也不见能改善,不再指望了。赶到他小姨子家的时候,肚子都快饿扁了,一到那里就赶紧下手,哪里来客气都不知道。哈哈。。。

回来的时候雨下的更大,天更冷了,还好他开车的,没多久就开暖气了,要不,这又冷又湿的雨夜,都不知道有多凄凉的,回到宿舍习惯性打开电脑,一边聊天然后听外面的雨声,感觉很温馨,这样的雨夜,屋外雨打铁皮挡板的叮叮当当声,雨滴落下的声音滴沥叮,组成一曲美妙的音乐,心中的烦恼也随之而去。

Comments

小猪的对话

这两天心情贼不好,天使送了一个Flash让我开心一下。献出来让大家也高兴高兴。。。呵呵。。。把所有的烦恼都抛开。。。

Comments (2)

下雨的周末

周六了,由于昨天加班到临晨2点多才回宿舍,跟Boss说周六早上不来上班了,不过没能同意,说要过来开会,哎~就为了开会,每周的例会。2多的时候不想吃快餐(也可能不送了),因为一直不喜欢吃白米饭,所以出去外面吃,下着小雨,不想再跑上楼带伞,想到以前学校的时候经常在雨散步,不带伞似乎已成为习惯了,走在路上,整个城市笼罩在阴湿的雨里,灰蒙蒙的天空看不到一缕阳光,天色也比较阴暗,让人感觉好像是黄昏而不是一天中最亮的时候,下雨的时候没伞,有伞的时候没雨。或许这就叫人生。

加班到6点左右才回来,天气转冷,这几天晚上都在下雨,今天下的特别大,现在从公司出来,竟然是倾盆大雨,公司的媒体总监说在外面吃完再回去,要不,你回去还做饭不是很累的呀~想想也是啊~

吃完出来,雨小了一点,坐上公交车,因为妈妈寄朋友带好吃过来,所以给朋友打了一个电话,去她家拿,小坐了一会,回到宿舍,突然想到,我已经很长时间没好好喝汤了,所以拿了一些排骨,加上茶树菇,薏米等下去煲汤,叫Avenger和他老婆一起喝汤,Avenger说很好喝,呵呵。。。发现自己已经很久没有好好下厨了。

最近连继加班两周了,整个人都苍老、憔悴了很多,哎~突然发现自己早已不再年轻了,也经不起折腾了。

Comments

一周没有休息了

  已经和朋友说好上周末去爬山,然后可以去采草莓,结果周五的时候临时通知要做一个项目,本来是说只要设计几套方案就可以了,其它的事情都可以不用我们处理的。汗。。。没想到的时候,周六周日两天都狂加班,虽然知道公司每次做事情的时候,总是策划的不好,方案还要改来改去的,没有一点改善,但是这次更夸张的是总策划的都不知道是誰,要资料的时候问一下,大家都没有,貌似由我程序和设计人员来策划文案的。真是笑掉人家的大门牙了,哈哈。。。搞不懂,建议领导无数次,为何就是不能有一点点实际意义的改善。哎~~~长期下去,人心散了,队伍更不好带了。
  准备找个时间,把一个项目该有流程整理一份,不过,不知道是懒还是心散,现在已经没有以前的激情了,杂事一大堆,有时候做的人心烦。叹。。。
  周天晚上半夜的时候饿的跟什么似的,到处觅食去,发现泡面加糟菜这样的配套非常的好吃,简直是人间的美味,人饿的时候吃什么都非常好吃滴,今天早上五点多才到宿舍,睡到10点多起来送妹妹去泉州上班,送她到车站,回宿舍后刷刷洗洗,继续上班,晚上竟然还可以陪一MM逛街(其实就去一大夏溜一圈,后来去超市买点东西就跑回来)发现自己真是太NB了,不过贼困ING~

Comments

div+css布局的入门

这是在网页设计师上看到的一篇文章,很适合入门div+css布局的人看,转了过来收藏,hoho~~

你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习:

第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无策,不知道该转换成对应的什么CSS语句。当你解决了第一种问题,知道了如何结构化你的HTML,我再给出一个列表,详细列出原来的表现属性用什么CSS来代替。

结构化HTML

我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

如果你希望你的HTML页面用CSS布局(是CSS-friendly的),你需要回头重来,先不考虑“外观”,要先思考你的页面内容的语义和结构。

外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来,CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义,显示在任何地方,任何网络设备上。

开始思考

首先要学习什么是"结构",一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块,以及每块内容服务的目的,然后再根据这些内容目的建立起相应的HTML结构。

如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块:

标志和站点名称
主页面内容
站点导航(主菜单)
子菜单
搜索框
功能区(例如购物车、收银台)
页脚(版权和有关法律声明)
我们通常采用DIV元素来将这些结构定义出来,类似这样:

<div id="header"></div>

<div id="content"></div>

<div id="globalnav"></div>

<div id="subnav"></div>

<div id="search"></div>

<div id="shop"></div>

<div id="footer"></div>

这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块,也可以嵌套另一个DIV。内容块可以包含任意的HTML元素—标题、段落、图片、表格、列表等等。

根据上面讲述的,你已经知道如何结构化HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。

使用选择器是件美妙的事

id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。

另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这样:#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如,通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲,你的页面是由图片、链接、列表、段落等组成的,这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观。

一个仔细结构化的HTML页面非常简单,每一个元素都被用于结构目的。当你想缩进一个段落,不需要使用blockquote标签,只要使用p标签,并对p加一个CSS的margin规则就可以实现缩进目的。p是结构化标签,margin是表现属性,前者属于HTML,后者属于CSS。(这就是结构于表现的相分离.)

良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码<table width="80%" cellpadding="3" border="2" align="left">,现在可以只在HTML中写<table>,所有控制表现的东西都写到CSS中去,在结构化的HTML中,table就是表格,而不是其他什么(比如被用来布局和定位)。

亲自实践一下结构化

上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现DIV嵌套的情况,你会看到"container"层中又有其它层,结构类似这样:

<div id="navcontainer">

<div id="globalnav">

<ul>a list</ul>

</div>

<div id="subnav">

<ul>another list</ul>

</div>

</div>

嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#navcontainer一个规则让列表居右,再给#globalnav一个规则让列表居左,而给#subnav的list另一个完全不同的表现。

用CSS替换传统方法

下面的列表将帮助你用CSS替换传统方法:

HTML属性以及相对应的CSS方法
HTML属性 CSS方法 说明
align="left"

align="right" float: left;

float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等

当你使用float属性,必须给这个浮动元素定义一个宽度。

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的,你可以分别指定元素的top, right, bottom和left的margin值。

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

a:visited: #339;

a:hover: #999;

a:active: #00f;

在HTML中,链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器,页面不同部分的链接样式可以不一样。

bgcolor="#FFFFFF" background-color: #fff; 在CSS中,任何元素都可以定义背景颜色,不仅仅局限于body和table元素。

bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder),你可以分别定义top, right, bottom和left

border="3"

cellspacing="3" border-width: 3px; 用CSS,你可以定义table的边框为统一样式,也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。

你可以使用 table, td or th 这些选择器.

如果你需要设置无边框效果,可以使用CSS定义: border-collapse: collapse;

<br clear="left">

<br clear="right">

<br clear="all">
clear: left;

clear: right;

clear: both;

许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片,你可以使用clear属性.

cellpadding="3"

vspace="3"

hspace="3" padding: 3px; 用CSS,任何元素都可以设定padding属性,同样,padding可以分别设置top, right, bottom and left。padding是透明的。

align="center" text-align: center;

margin-right: auto; margin-left: auto;
Text-align 只适用于文本.

象div,p这样的块级怨毒可以通过margin-right: auto; 和margin-left: auto;来水平居中

一些令人遗憾的技巧和工作环境

由于浏览器对CSS支持的不完善,我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效果。例如块级元素有时侯需要使用水平居中的技巧,盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。

另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。

Comments

CSS布局基础–水平和垂直居中

在div+css布局中,居中问题是每个初学者都会碰到的问题:


水平居中


运行代码框






[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


另外,经典论坛阿捷的例子:



主要的样式定义如下:

body {TEXT-ALIGN: center;}

#center {

MARGIN-RIGHT: auto;

MARGIN-LEFT: auto;

}

说明:

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

完整举例代码如下:


运行代码框






[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


垂直居中


若BOX的宽度和高度已知:


运行代码框






[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


解释:如果把屏幕中点设为坐标原点(0 0),X的正方向是屏幕的右边,Y的正方向屏幕的上边。那么在已知BOX宽度和高度的情况下,设BOX的属性为绝对定位,top:50% left:50%,这样的话,BOX的左上角就在坐标原点(0 0), 设margin-left:-320px(宽度的一半), 左上角的坐标(-320 0),再设margin-top:-240px(高度的一半),左上角的坐标现在是(-320 240),相对原点来说, BOX是完全居中了,四个顶点的值分比别是(320 240)Ⅰ, (-320 240)Ⅱ,(-320 -240)Ⅲ ,(320 -240)Ⅳ。



适用于首页带语言选择版本或者欢迎页。

单行文字可采用行高来实现垂直居中,或者用padding来调整。

Comments

XHTML+CSS=网站重构

一,什么是WEB标准?

WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。我们来简单了解一下这些标准:

1.结构标准语言

(1)XML

XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,参考( http://www.w3.org/TR/2000/REC-XML-20001006 )。和HTML一样,XML同样来源于SGML,但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了,网上有很多资料,也有很多书籍可以参考。

(2)XHTML

XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0(参考 http://www.w3.org/TR/xhtml1 )。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡。

2. 表现标准语言

CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2(参考 http://www.w3.org/TR/CSS2/ )。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。

3.行为标准

(1)DOM

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范( http://www.w3.org/DOM/ ),DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。

(2) ECMAScript

ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript)。目前推荐遵循的是ECMAScript 262( http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM )。

二、为什么要建立网站标准?

我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;针对某种浏览器的DHTML特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。这是一种恶性循环,是一种巨大的浪费。

如何解决这些问题呢?有识之士早已开始思考,需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处,因此在W3C(W3C.org)的组织下,网站标准开始被建立(1998年2月10日发布XML1.0为标志),并在网站标准组织(webstandards.org)的督促下推广执行。

简单说,网站标准的目的就是:

提供最多利益给最多的网站用户
确保任何网站文挡都能够长期有效
简化代码、降低建设成本
让网站更容易使用,能适应更多不同用户和更多网路设备
当浏览器版本更新,或者出现新的网络交互设备时,确保所有应用能够继续正确执行。
对于网站设计和开发人员来说,遵循网站标准就是使用标准;对于你的网站用户来说,网站标准就是最佳体验。

三、采用网站标准有什么好处?

对网站浏览者的好处:

文件下载与页面显示速度更快;
内容能被更多的用户所访问(包括失明、视弱、色盲等残障人士);
内容能被更广泛的设备所访问(包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等)
用户能够通过样式选择定制自己的表现界面
所有页面都能提供适于打印的版本

对网站所有者的好处:

更少的代码和组件,容易维护
带宽要求降低(代码更简洁),成本降低。举个例子:当 ESPN.com 使用 CSS改版后,每天节约超过两兆字节(terabytes)的带宽。
更容易被搜寻引擎搜索到
改版方便,不需要变动页面内容
提供打印版本而不需要复制内容
提高网站易用性。在美国,有严格的法律条款(Section 508)来约束政府网站必须达到一定的易用性,其他国家也有类似的要求。

四、怎么改善现有网站?

我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程,使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进,分阶段来逐步达到完全符合网站标准的目标。如果你是新手,或者对代码不是很熟悉,也可以采用遵循标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准最完善的工具。

1.初级改善

为页面添加正确的DOCTYPE

很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以,如果你不注意设置了错误的DOCTYPE,结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择:

(1)过渡型(Transitional )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">

(2)严格型(Strict )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">

(3)框架型(Frameset )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-frameset.dtd">

对于我们初级改善来说,只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等,不至于让你觉得变化太大,难以掌握。

Tip:你懒得输入上面过渡型代码的话,可以访问 http://www.macromedia.com/ 网站的首页,然后查看源代码,把head区同样的代码拷贝粘贴就可以了。

设定一个名字空间(Namespace)

直接在DOCTYPE声明后面添加如下代码:

<html XMLns="’" DESIGNTIMESP=1921>http://www.w3.org/1999/xhtml">

一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

声明你的编码语言

为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5。

用小写字母书写所有的标签

XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的:

<TITLE>公司简介</TITLE>

正确的写法是:

<title>公司简介</title> 同样的,<P>改成<p>,<B>改成<b>等等。这步转换很简单。

为图片添加 alt 属性

为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义:

<img src="logo_unc_120×30.gif" alt="logo_unc_120×30.gif">

正确的写法:

<img src="logo_unc_120×30.gif" alt="UNC公司标志,点击返回首页">

给所有属性值加引号

在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。

例:height="100",而不能是height=100。

关闭所有的标签

在XHTML中,每一个打开的标签都必须关闭。就象这样:

<p>每一个打开的标签都必须关闭。</p> <b>HTML可以接受不关闭的标,XHTML就不可以。</b>

这个规则可以避免HTML的混乱和麻烦。举例来说:如果你不关闭图像标签,在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是:空标签也要关闭,在标签尾部使用一个正斜杠"/"来关闭它们自己。例如:

<br /> <img src="webstandards.gif" />

经过上述七个规则处理后,页面就基本符合XHTML1.0的要求。但我们还需要校验一下是否真的符合标准了。我们可以利用W3C提供免费校验服务( http://validator.w3.org/ )。发现错误后逐个修改。在后面的资源列表中我们也提供了其他校验服务和对校验进行指导的网址,可以作为W3C校验的补充。当最后通过了XHTML验证,恭喜你已经向网站标准迈出了一大步。不是想象中的那么难吧!

2.中级改善

接下来我们的改善主要在结构和表现相分离上,这一步不象第一步那么容易实现,我们需要观念上的转变,以及对CSS2技术的学习和运用。但学习任何新知识都需要花点时间的,不是吗?诀窍在于边做边学。假如你一直采用表格布局,根本没用过 CSS,也不必急于跟表格布局说再见,你可以先用样式表代替 font 标签。随着你学到的越多,你能做的就越多。好,一起来看看我们需要做哪些事:

用CSS定义元素外观

我们在写标识时已经养成习惯,当希望字体大点就用<h1>,希望在前面加个点符号就用<li>。我们总是想<h1>的意思是大的,<li>的意思是圆点,<b>的意思是“加粗文本”。而实际上, <h1>能变成你想要的任何样子,通过CSS,<h1>能变成小的字体,<p>文本能够变成巨大的、粗体的,<li>能够变成一张图片等等。我们不能强迫用结构元素实现表现效果,我们应该使用CSS来确定那些元素的外观。

例如,我们可以使原来默认的6级标题可以看起来大小一样:
h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }

用结构化元素代替无意义的垃圾

许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现,而不是结构。例如,一段列表内容可能会使用下面这样的标识:

句子一<br /> 句子二<br /> 句子三<br />
如果我们采用一个无序列表代替会更好:
<ul> <li>句子一</li> <li>句子二</li> <li>句子三</li> </ul>
你或许会说“但是<li>显示的是一个圆点,我不想用圆点”。事实上,CSS没有设定元素看起来是什么样子,你完全可以用CSS关掉圆点。

给每个表格和表单加上id
给表格或表单赋予一个唯一的、结构的标记,例如

<table id="menu">

接下来,在书写样式表的时候,你就可以创建一个“menu”的选择器,并且关联一个CSS规则,用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样,不需要对每个%lt;td>标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记(标记“menu”的id标记),你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。

中级改善我们这里先列主要的三点,但其中包含的内容和知识点非常多,需要我们逐步学习和掌握,直到最后实现完全采用CSS而不才用任何表格实现布局。

Comments