《xhtml入门系列》之四

1、在一个页面中的基本布局元素为：
<div id=container>
 <div id=header ></div>
 <div id=content>
  <div id=slidebar></div>
  <div id=pagecontent></div>
 </div>
 <div id=footer></div>
</div>
2、如果用css将一个页面分为上中下，而中又分为左右；
<div id=container>
 <div id=header style="position:relative; width:100%; height:100px; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#00FF00 "></div>
 <div id=content style="clear:both">
  <div id=slidebar  style=" float:left;width:20%; height:400px; border-right-color:#00FF00; border-right-style:solid; border-right-width:1px"></div>
  <div id=pagecontent style="float:left">
 </div>
 <div id=footer style=" float:left; height:100px; width:100%; border-top-color:#00FF00; border-top-style:solid; border-top-width:1px"></div>
</div>
3、如何将多个小控件排成一排？
 其实很简单，比如现在有5个按钮，要将这些按钮排成一排，只要作如下处理就可以了；
   <div class=button style=" float:left"><input  type="button"  value="button1"/></div>
   <div class=button style=" float:left"><input  type="button"  value="button1"/></div>
   <div class=button style=" float:left"><input  type="button"  value="button1"/></div>
   <div class=button style=" float:left"><input  type="button"  value="button1"/></div>
   <div class=button style=" float:left"><input  type="button"  value="button1"/></div>
其实就是将每个控件的float都设置为left就可以了；
4、如果不想让这些东西都排成一排，怎么办？
 那也很简单，只要设置他们的clear:both就可以了；

总的来说，就是要充分利用float和clear；还有就是widht,height这几个属性，就能够很好的对界面元素进行定位；