浅谈分析表格布局与Div+CSS布局的区别
表格rand随机函数取整(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" />
position和location的区别<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;
springcloud配置中心报错width:900px;listview是什么
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;
格式工厂formatbackground-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>
代码说明：
vba数据录入窗口编程(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即可。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论