【DIV+CSS入门教程】二、使用Table布局是不明智的
使用Table布局页面为什么是不明智的?
大家看到标题,不要误解认为在页面中不能使用Table,而是可以
使用Table,但是尽量不要用Table去布局页面,为什么这么说呢,因为使用Table布局页面会使页面失去灵活性,怎么个灵活法呢,比如今天你好不
容易做出来的页面,第二天老板说我不喜欢登录模块放到右边,还是放到左边,通知板块放到右侧去,页面风格最好一个月换一种,如果遇到这种老板,提出这种要
求,并且你的页面是用Table布局的,那么你会崩溃的,工作量那是大大滴~,如果不相信的话,你们自己可以找个页面,用Table布局出来,然后变换板
块和风格,你就会体会到Table布局的不灵活性,这是为什么呢,因为Table的诞生是为存储数据用的,功能和Execel差不多,不是用来布局用的,
只不过后来大家发现用Table可以把想放的页面元素,比如图片,放到任何自己想放的地方,且做出来的页面可以兼容多种浏览器,于是Table就承担起了
布局页面的重担,这一做就是好几年... ...直到Web
2.0
时代的到来,Table才从布局页面的工作中逐渐解脱,专心的去存储数据^_^
既然Table是为存储数据诞生
的,那谁的诞生是为了页面布局
呢?
答案就是:DIV
,DIV就是为布局页面而诞生的,只不过一直不被人认同,原因就是DIV去布局
页面需要CSS
的配
合,使用比较繁琐,还不如Table拖拖拽拽页面就布局OK了,感觉还不如Table方便,从而DIV被人们放置在一个无人问津的昏暗角落里,暗暗的等待
着伯乐的出现,直到2003年美国加州Scott
Design公司参加了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲,使DIV看到了阳光,走出了阴霾... ...
说
了那么多,我们对比一下Table布局页面和DIV布局页面的优缺点
使用表格进行页面布局会带来很多问题:
*
把格式数据混入你的内容中。这使得文件的大小无谓地变大,而用户访问每个 页面时都必须下载一次这样的格式信息,带宽并非免费。
*
这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。
* 这还使我们保持整个站点的视觉的一致性极难,花费也极高。
*
基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。
而使用CSS进行网页布局
,它
会:
* 使你的页面载入得更快
* 降低你的流量费用
* 让你在修改设计时更有效率而代价更低
*
帮助你的整个站点保持视觉的一致性
* 让你的站点可以更好地被搜索引擎找到
* 使你的站点
相关文档:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格头行固定:使用CSS实现</title>
<style type="text/css" >
div.DivContainer /* Div */{
overflow: scroll;
border: solid 1px gray; ......
CSS的文件格式
1.每种不同款式,定义一个css。按钮A一个css,按钮B虽然长得跟A一样,但是在右边,那就copy下A的css代码,然后改成在右边。
.a{/* 很多样式定义 */}
.b{/* 很多样式定义 */ text-align:center;}
.c{/* 很多样式定义 */ text-align:right;}
<div class="a">按钮A</div>
<div class="b"&g ......
用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。
1.使用自动外边距实现居中
CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为
aut ......
简介
什么是CSS hack(http://www.cssplay.org.cn/css-hack/index.html)由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器 ......
Eric Meyer’s CSS Reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, fo ......