浅谈分析表格布局与Div+CSS布局的区别
2018-06-24 01:42:11来源：未知 阅读 ()
(1)表格布局
表格布局容易掌握，布局方便。但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距，这样布局的网页中表格会生成大量难以阅读和维护的代码；而且表格布局的网页要等整个表格下载完毕后才能显示所有内容，所有表格布局浏览速度较慢[2]。
(2)CSS+DIV布局
通常要实现比较精确和自适应的层布局需要设置层的样式，即用CSS控制层的位置。CSS+DIV布局采用Div来定位，通过Div的border(边框)、padding(填充)、margin(边界)和Float（浮动）等属性来控制板块的间距，具体实施是通过创建Div标签并对其应用CSS
[3]定位及浮动属性来实现。
CSS+DIV布局需要编写大量CSS样式代码来控制各布局DIV层，因此要掌握它相对表格布局会困难一些。但CSS+DIV布局较表格布局更加灵活实用，网站布局后很容易就能调整网站的布局结构；而且CSS+DIV布局的各布局DIV层可以依次下载显示，因此其访问速度较表
[4]格布局要快。
表格布局网页实例
以下为用表格布局的一个网页的代码[5]。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格布局</title> </head> <body>
<table width="900" height="280" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="82" colspan="2"><img src="header.jpg" width="900" height="82" /></td> </tr>
<tr>
<td height="32" colspan="2"><img src="links.jpg" width="900" height="32" /></td> </tr>
<tr>
<td width="190" height="618"><img src="left.jpg" width="190" height="618" /></td> <td width="710"><img src="main.jpg" width="710" height="618" /></td>
</tr>
<tr>
<td height="64" colspan="2"><img src="footer.jpg" width="900" height="64" /></td> </tr> </table></body></html>
CSS+DIV布局网页实例
<style type="text/css"> <!-- body{
text-align:center; } #container{
position:relative;
background-color:#00FF00;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
height:765px;
width:900px;
text-align:left; } #header{
position:relative;
background-color:#FF0000;
height:82px;
width:900px;
text-align:left; } #links{
position:relative;
background-color:#FF9900;
height:32px;
width:900px;
text-align:left; } #left{
position:relative;
background-color:#FFFF66;
height:618px;
width:190px;
text-align:left;
float:right; } #main{
position:relative;
background-color:#00FFFF;
height:618px;
width:710px;
text-align:left;
float:left; } #footer{
position:relative;
background-color:#FF00FF;
height:64px;
width:900px;
text-align:left;
float:left; } --> </style> </head> <body> <div id="container">
<div id="header"><img src="header.jpg" /></div>
<div id="links"><img src="links.jpg" /></div>
<div id="left"><img src="left.jpg" /></div>
<div id="main"><img src="main.jpg" /></div>
<div id="footer"><img src="footer.jpg" /></div> </div> </body> </html>
代码说明：
(1)代码中共包含6个div标签，分别代表6个层。其中最外层的id为container的div
[7]起到一个容器的作用，用于容纳其它5个层。
(2)选择器body和#container的样式用于将最外层id为container的div（容器层）水平居中显示。
(3)其它几个选择器样式如#header，#links，#left，#main和#footer分别用来控制容器内5个层的显示。
(4)选择器#left和#main中有一个重要CSS属性float。其中在选择器#left中设置为float:left；而选择器#main中设置为float:right。该属性设定了id为left的层居左显示，id为main的层则居右显示。
(5)如果想将id为left和main的层交换位置，只需要在选择器#left中设置float:right；同时在选择器#main中设置float:left即可。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-02
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
