布局基础：两列布局
发布时间：2010年4月6日 文章分类：xhtml+css 文章作者：Hitomi 浏览次数：次
从这节课开始正式讲解网页布局，边学习布局的思路边记忆xhtml代码和css代码，真是一举两得啊！
首先声明，xhtml第一节课初始代码结构以后就不再重复说明，每一节课都会用，具体如何书写初始代码，请查阅xhtml第一节课：建立第一个XHTML页
以后出现的xhtml代码都是写在<body></body>中，而css代码用<style type="text/css"></style>的内联方式写或者<link />的外联方式写都可以，以后不再重复说明。
下面就讲解今天的两列布局，请先看下图
这就是我们今天要做到的最终效果，图中三种色块就是我们要做的布局，文字部分是描述每个色块的样式制作的时候可以忽略。这个布局很简单，要用到的xhtml标签只有，xhtml属性只有id，要用到的css属性有float(漂动)、margin(外边距)、padding(内边距)、background(背景)、width(宽度)、height(高度)。
下面先看xhtml部分代码，按照图中的id描述应该写成这样：
XML/HTML代码
- <div id="wrap">
- <div id="side">div>
- <div id="main">div>
- </div>
很简单吧，就是#wrap中间包含着#side和#main
接下来是重点css部分，这里只写 外联的css文档代码，直接复制就可以用。
CSS代码
- #wrap{
- width:400px; /*宽度400px*/
- height:300px; /*高度300px*/
- padding:5px; /*上下左右内间距都为5px*/
- margin:0 auto; /*上下外间距为0，左右外间距自适应，最终效果#wrap水平居中*/
- background:#CCCCCC; /*背景颜色#CCCCCC*/
- }
- #side{
- width:150px; /*宽度150px*/
- height:260px; /*高度260px*/
- margin-top:35px; /*上外边距35px*/
- float:left; /*向左漂动*/
- background:#006699; /*背景颜色#006699*/
- }
- #main{
- width:245px; /*宽度245px*/
- height:260px; /*高度260px*/
- margin-top:35px; /*上外边距35px*/
- float:right; /*向右漂动*/
- background:#993300; /*背景颜色#993300*/
- }
这段css代码中 /* ??? */ 这样的文字叫做注释，用于解释前面的代码作用的，本身不对css有影响。按照我给的代码写好了以后浏览网页看看效果，是不是和图上的一样？然后把#side的float:left;和#main的float:right;调换一下看看效果，有什么不一样？
本节课就讲到这里，有什么不懂的请留言，本节课代码在dreamweaver 8中的截图如下：
