DIV网页布局入门

点击下面的运行，可预览代码效果:
<style>div{margin:5px; padding:5px; border:1px solid #000; font-size:12px;}</style> <div id="wrapper">wrapper <div id="header">header</div> <div id="search">search</div> <div id="content">content <div id="main">main</div> <div id="sidebar">sidebar</div> </div> <div id="footer">footer</div> </div>
        
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

这样布局，各部分位置基本都可以变，而且可以设计二栏的布局，二栏的左右位置都可以互换，无论是全屏、1024宽度、950宽度、800宽度都可以轻松实现。

命名说明：
1、wrapper: 整个内容外边包一个div,这样可以控制整站的宽度，而且可以兼容不同浏览器居中等操作；
2、header: 这部分主要是想放网页的头部（非网页重要内容），一般是LOGO，导航条等；
3、search: 搜索表单，这里给他加上边框，如果页面没有搜索功能，可以作为分隔头部和中间部分的水平线；
4、content: 网页的主体内容；
5、main:  如果分栏，这个将是其中一栏；
6、sidebar: 如果分栏，这个将是其中一栏；通常他是窄的一栏；
7、footer: 页面的尾部；