实现结构与表现分离

　　在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就如下，这没有外加任何表现控制的标签：

　　<p>加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。</p>

　如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：

　　<p><font color="#FF0000" face="宋体">段落内容</font></p>

　　这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。

　　再直接列一段代码加深理解结构和表现相分离：
　　用CSS排版

以下是引用片段： <style type="text/css"> <!-- #photoList img{ 　　height:80; 　　width:100; 　　margin:5px auto; } --> </style> <div id="photoList"> <img src="01.jpg" /> <img src="02.jpg" /> <img src="03.jpg" /> <img src="04.jpg" /> <img src="05.jpg" /> </div>

　　不用CSS排版

以下是引用片段： <img src="01.jpg" width="100" height="80" align="middle" /> <img src="02.jpg" width="100" height="80" align="middle" /> <img src="03.jpg" width="100" height="80" align="middle" /> <img src="04.jpg" width="100" height="80" align="middle" /> <img src="05。jpg" width="100" height="80" align="middle" />

上一页  [1] [2] [3] [4] [5] [6] [7] [8] 下一页