web标准教材.pptVIP

web标准 主讲：袁晓维 计算机科学系 div+css 一列固定宽度 一列固定宽度居中 一列自适应宽度 一列自适应宽度居中 一列二至多块布局 一、一列固定宽度 在页面中插入一个div标签，我们可以点击工具栏的“插入DIV标签”按钮，在打开的对话框中ID项给这个div命一下名，我们给它起个名叫layout（名称根据自己需要命名）。 插入div后，在右侧的css样式面板中，定义id为layout的样式，确定后在打开的css编辑对话框的方框选项中设计宽度500，高度300。为了看清楚起见，我们把这个div设置个背景色，这样就能预览出大小和位置了。 二、一列固定宽度居中 一列固定宽度居中和一列固定宽度相比，我们要解决的问题就是居中。这里我们用到css的外边距属性：margin。在IE6及以上版本和标准的浏览 器当中，当设置一个盒模型的的margin:auto;时，可以让这个盒模型居中。我们下边在css样式表中加上这个属性看看效果： 三、一列自适应宽度 自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时，它默认是相对于浏览器显示的。我们把刚才的固定宽度例子中的宽度去掉看看： #layout { height: 300px; background: #99FFcc;} 如果我们需要按浏览器的80%显示，那么设置宽度为80%，当改变浏览器窗口大小时，盒模型的宽度也会跟着改变。 四、一列自适应宽度居中 同样和固定宽度居中一样，我们只需要设置div的外边距为auto即可实现居中了。 body { margin: 0px; }#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; } 五、一列二至多块布局 一般的网站整体可以分为上中下结构，即：头部、中间主体、底部。那么我们可以用三个div块来划分，分别给它们起名为：头部（header）、主体（maincontent）、底部（footer）。 采用固定宽度居中的方式，代码如下： body { margin:0; padding:0;}#header { margin:5px auto; width:500px; height:80px; background:#9F9;}#main { margin:5px auto; width:500px; height:400px; background:#9FF;}#footer { margin:5px auto; width:500px; height:80px; background:#9f9;} Header： maincontent： Footer： 二列和三列布局 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6的3像素bug 一、两列自适应宽度 下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。首先创建html代码如下： div id=side此处显示 id side 的内容/divdiv id=main此处显示 id main 的内容/div 按照如图所示的创建方法，把两个div都创建出来，或手工写出代码。div创建完成后，开始创建css样式表，代码如下： #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; } 先创建#side的样式，为了便于查看，设置了背景色。注意，side的浮动设置为向左浮动； 然后创建#main样式，注意这里设置#main的左边距为120px。 预览结果如下： 当我们拖动浏览器窗口变大变小时，#main的宽度也会跟着改变。这里设置margin-left:120px;正好让出#side占去的120px宽度，如果这里设置为122px的话，中间将出现2px的空隙，大家可以试一下。 二、两列固定宽度 有了前面的基础，两列固定宽度就容易多了，只需要把#main的宽度由百分比改为固定值，如下图： 三、两列固定宽度居中 两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个di