彻底弄懂CSS盒子模式（DIV布局快速入门）

• 在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用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="http://www.QQread.com/css/01.jpg"/>

  <imgsrc="http://www.qqread.com/css/02.jpg"/>

  <imgsrc="http://www.qqread.com/css/03.jpg"/>

  <imgsrc="http://www.qqread.com/css/04.jpg"/>

  <imgsrc="http://www.qqread.com/css/05.jpg"/>

  </div>

  不用CSS排版

  <imgsrc="http://www.qqread.com/css/01.jpg"width="100"height="80"align="middle"/>

  <imgsrc="http://www.qqread.com/css/02.jpg"width="100"height="80"align="middle"/>

  <imgsrc="http://www.qqread.com/css/03.jpg"width="100"height="80"align="middle"/>

  <imgsrc="http://www.qqread.com/css/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排版减小网页文件体积

  

  
  

• 上一页 [1] [2] [3] [4] [5] [6] 下一页 
• 复制本页网址和标题，发送给你QQ/Msn的好友一起分享
  
  
• 彻底弄懂CSS盒子模式（DIV布局快速入门） 相关文章：
• ·DIV+CSS布局入门实例教程
• ·创建一个纯CSS的水平导航条
• ·设计一个基于CSS的网页模板
• ·Javascript+CSS横向三级导航菜单
• ·站长推荐：53个CSS-不可或缺的技巧
• ·CSS文本：word-wrap
• ·网页设计基础:Div+CSS布局入门教程
• ·如何使用CSS来进行网页排版
• ·彻底弄懂CSS盒子模式（DIV布局快速入门）
• ·CSS中的滑动门技术
• 彻底弄懂CSS盒子模式（DIV布局快速入门） 相关软件
• ·CSS中文教程
• ·Rapid CSS 2007 V8.0.0.75
• ·DVD Region+CSS Free Lite V5.9.8.3
• ·CSS-BuMa V1.2
• ·DVD Region+CSS Free V5.983
• ·ＣＳＳ２中文手册

上一篇:纯CSS代码实现翻页

下一篇:彻底弄懂CSS盒子模式

• 特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
• 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
• 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

精品推荐

热点TOP10

特别推荐