在真正开始布局实践之前，再来熟悉一件事——结构和表现相分离，这也用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排版
<styletype="text/css">
<!--
#photoListimg{
height:80;
width:100;
margin:5pxauto;
}
-->
</style><divid="photoList">
<imgsrc="01.jpg"/>
<imgsrc="02.jpg"/>
<imgsrc="03.jpg"/>
<imgsrc="04.jpg"/>
<imgsrc="05.jpg"/>
</div>
不用CSS排版
<imgsrc="01.jpg"width="100"height="80"align="middle"/>
<imgsrc="02.jpg"width="100"height="80"align="middle"/>
<imgsrc="03.jpg"width="100"height="80"align="middle"/>
<imgsrc="04.jpg"width="100"height="80"align="middle"/>
<imgsrc="05。jpg"width="100"height="80"align="middle"/>
第一种方法是结构表现相分离，内容部分代码简单吧，假如还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。假如BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。演示地址：http://www.hsptc.com/css1.html用CSS排版减小网页文件体积
评论加载中…
 |