CSS布局教程

基于web标准的网站设计指南

« web标准的常见问题表格布局的神话与没落 »

详解css布局与table布局的区别

基于web标准的网站设计的核心在于如何使用众多的web标准中的各项技术来达到表现与内容的分离,即网站的结构,表现,行为三者的分离,只有真正实现了结构分离的网页设计,才是真正的意义上的符合web标准的网页设计,不排除为了达到表现与内容分离,以后将诞生更多的新技术与结构,这里推荐使用xhtml,以便更严谨的语言编写结构,并使用css来完成网页的布局表现,因此掌握基于css的布局方式,是实现web标准的基础环节
传统table布局方式上是利用html table表格元素具有的无边框特性,由于table元素可以在显示时使得单元格的边框和间距设置为0,即不显示边框,因此可以将网页中的各个元素按版式划分放入表格的各个单元格中,从而实现复杂的排版组合
table布局的核心在于设计一个能满足版式要求的表格结构,将内容装入每个单元格中,间距及定格则通过插入图像进行占位来实现,最终的结构使一个复杂的表格,不利于设计与修改
表格布局的代码最常见的是在html标签之间加入一些设计代码,如width="100%"等,表格布局的混合代码就是这样编写的,大量样式设计代码混杂在表格,单元格之间,使得可读性大大降低,维护起来成本也相当高,尽管现在有像dreamweaver这样优秀的网页设计软件能帮助我们可视化的进行这些代码的编写,但是其永远不会智能的帮助你缩减代码或删减重复代码。
复杂的表格设计使得设计极为不易,修改更加复杂,最后生成的网页代码除了表格本身的代码,还有许多没有意义的图像占位符及其他元素,文件量庞大,最终导致浏览器下载及解析速度变慢天津网站建设天津网站优化汽车玻璃天津二手装载机商业策划招商  钢板桩租赁天津废锡回收
而使用css布局则可以根本上改变这种情况,css布局的重点不再放在table元素的设计中,取代的是html中的另一个元素div,div可以理解为图层或一个块,div是一种比较表格简单的元素,从语法中只有div开始及/div结束这样一个简单的定义,div的功能仅仅是将一段信息标记出来用于后期的样式定义,这里的将信息标记,就是我们前面所提到的网页的结构部分,通过使用div,我们可以将网页中的各个元素划分到各个div中,成为网页中的结构主体,而样式表现则由css来完成。
div在使用时不需要像表格一样通过其内部的单元格来组织版式,通过css强大的样式定义功能可以比表格更简单更自由的来控制页面版式或样式,下面是一段div样式设计代码
xhtml文件部分
<div id="main">内容</div>
表示页面中定义了一个div并命名为main
css样式表部分:
#main{float:left;
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:10px;
background-color:#575757;
text-align:center;
line-height:160%;
width:50%;}
从这个简单的css代码样式可以看出,html中保留了div标签及其中的内容,所有的样式设计代码均在css样式表文件中编写,这也就实现了css布局的表现与内容分离.
从样式设计的角度来看,css对当前的id名为main的div定义了许多属性,如上边距,浮动,背景颜色,文本对齐等样式,这些样式有些在html中可以直接使用,而类似上边距等设计形式则是html本身不具备的
不仅如此,应用css布局还可以充分提高代码的利用率,效率也大大提高

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号