布局第一步写BODY的CSS
看面看个例子:
body {font:12px Arial,Helvetica,sans-serif;margin:0px auto;background:#000;background-image: url(body_bg1.gif);background-repeat: repeat-x;background-position: top;}
对此作简单说明font字体标签,margin外边距,相应的内边距padding,笔者在学习和同行交流过程中,有很多人对padding存在疑惑，比如一个层DIV定义了height:200PX，padding-top:20px;此时实际能用的高度就只有180px，记住是内边距！这里还有一个background-image的URL，background-repeat: repeat-x;表示横向平铺对应的repeat-y为纵相平铺！
下面定义上，中，下三行的布局，
上部CSS
#top{width:980px;height:132px;background:#ccc;}
#midd{width:980px;background:#2d2d2d;float:left;}
#bottom{width:980px;background:#000;float:left;}
<body>
<div id="main">
<div id="top">df</div>
<div id="midd">ddd</div>
<div id="bottom">ddd</div>
</div>
</body>
这样的布局可以吗？可以，但居中对齐怎么办？而且这样写的话高度不能自动适应，改成下面就可以了，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>义乌立天网络公司</title>
<style type="text/css">
<!--
body {font:12px Arial,Helvetica,sans-serif;margin:0px auto;background:#321231;}
#main{width:980px;margin:0px auto;}
#top{width:980px;float:left;background:#ccc;height:132px;}
#midd{width:980px;float:left;background:#2d2d2d;height:132px;}
#bottom{width:980px;float:left;background:#000;height:132px;}
-->
</style></head>
<body>
<div id="main">
<div id="top">df</div>
<div id="midd">ddd</div>
<div id="bottom">ddd</div>
</div>
</body>
</html>
这个例子虽然很简单但它是DIV+CSS，学会最基本的以不变应万变！笔者在义乌网络公司做了5年的设计，DIV+CSS布局的优点：页面载入得更快,整个站点保持视觉的一致性,浏览者和浏览器更具亲和力等等优点！
