CSS 布局
近日开发中,总感觉页面布局方面力不从心。以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下。
在web 页面中一般有 table 和 css+div 两种布局方式。
其中css+div 又分为原生css 和css 框架 两种。
现在一般网站已经不再使用table布局,但是一些简单对齐的页面也可以使用一下,因此在此处做一个简单的总结。
一、table 布局
html 标签中 跟table 布局相关的标签 有 <table> <th> <tr> <td>,另有两个比较重要的属性 是 rowspan,colspan。
table 布局也非常强大,在css 出现之前,所有的网页几乎都是用table 布局的。但是现在几乎不再使用了。以前看过的一话转载在此处:
为什么我们不建议用Table布局
Table要比其它html标记占更多的字节。
(延迟下载时间,占用服务器更多的流量资源。)
Tablle会阻挡浏览器渲染引擎的渲染顺序。
(会延迟页面的生成速度,让用户等待更久的时间。)
Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。
(增加设计的复杂度,增加页面加载时间,增加HTTP会话数。)
在某些浏览器中Table里的文字的拷贝会出现问题。
(这会让用户不悦。)
Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)
(这会限制你页面设计的自由性。)
一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。
(先花时间学一些CSS知识,会省去你以后大量的时间。)
table对对于页面布局来说,从语义上看是不正确的。
(它描述的是表现,而不是内容。)
table代码会让阅读者抓狂。
(不但无法利用CSS,而且会你不知所云)
table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。
(你看过CSS Zen Garden吗?) Tables的好处 在某些场合,使用Table是100%的适合、恰当和正确。比如,用table做表格是完全正确的。 如果你无法判断是否应该使用table,参考一下上面的几条,相信你能找到答案。 英文:Why Tables Are Bad.
译文:webhek
table 布局需要使用table 标签把一块区域圈起来 ,化为布局区域,可以指定大小等,页面的内容应该放在<td> 标签内。
代码1:
<table width="500" height="500" border="1">
<tr>
<td>
这是一个table 布局
</td>
</tr>
</table>
代码1就在页面上布置了一个单元格,显示在了页面左上角。
如果我想把页面居中显示怎么办呢?方法就是在外层嵌套一个table ,然后把这个table 放在外层table 的td 单元格中,设置单元格对齐样式为居中。
代码2:
<table width="100%" border="1">
<tr>
<td align="center" valign="middle">
<table width="500" height="500" border="1">
<tr>
<td>
这是使用table 布局。
</td>
</tr>
</table>
</td>
</tr>
</table>
另外一个常用的就是合并单元格:包括横着合并和竖着合并。使用colspan 和rowspan 实现。
代码3:
<table width="100%" border="1">
<tr>
<td align="center" valign="middle" >
<table width="300" height="300" border="1">
<tr>
<td colspan="2">
这是使用table 布局。
</td>
<td>
这是使用table 布局。
</td>
</tr>
<tr>
<td>
这是使用table 布局。
</td>
<td rowspan="2">
这是使用table 布局。
</td>
<td>
这是使用table 布局。
</td>
</tr>
<tr>
<td>
这是使用table 布局。
</td>
<td>
这是使用table 布局。
</td>
</tr>
</table>
</td>
</tr>
</table>
colspan="2"指定了该单元格占两列位置。
rowspan="2" 指定了该单元格占两行位置。
经过上面代码扩展,现在的表格布局效果如下图所示:
基本上复杂布局就靠表格之间的嵌套来实现,最复杂的布局甚至要几十个table 来嵌套完成。
另外表格还有很多属性和标签,设置不同的属性就能达到想要的效果。
下一篇介绍css 布局。
CSS 布局的更多相关文章
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- CSS篇之DIV+CSS布局
<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...
- CSS 布局口诀
body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...
- CSS布局基础——BFC
what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
随机推荐
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- C#之索引器
实际中不使用这个东西,只做了解 using System; using System.Collections.Generic; using System.Linq; using System.Text ...
- C#客户端的异步操作
上篇博客[用Asp.net写自己的服务框架] 我讲述了如何实现自己的服务框架,但我想很多人应该用过WebService这类服务框架,相比起来,似乎还缺少什么东西, 是的,我也感觉到了.比如:我可以很容 ...
- 【先定一个小目标】在Windows下的安装Elasticsearch
ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apach ...
- 源码包---linux软件安装与管理
源代码推荐保存位置: /usr/local/src 软件安装位置: /usr/local 如何确定安装过程报错: 安装过程停止 并出现error / warning / no 的提示 ./config ...
- HTML插入FLASH
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" code ...
- 常用linux 命令 -网络相关
此文参考: 1.网络文章,但最后发现源头是在<鸟哥私房菜>,再次感谢原作者: 2.工作中跟同事讨论,自己尝试. 本人水平有限,如有错误,请大家指正,谢谢. 一 网络参数设置命令 1.ifc ...
- mysql 优化
1.存储过程造数据 CREATE DEFINER=`root`@`localhost` PROCEDURE `generate_test_data`(`n` int) begin declare i ...
- 由表单验证说起,关于在C#中尝试链式编程的实践
在web开发中必不可少的会遇到表单验证的问题,为避免数据在写入到数据库时出现异常,一般比较安全的做法是前端会先做一次验证,通过后把数据提交到后端再验证一次,因为仅仅靠前端验证是不安全的,有太多的htt ...
- http://www.microsoft.com/en-pk/download/details.aspx?id=40762
http://www.microsoft.com/en-pk/download/details.aspx?id=40762