《web标准教材》PPT课件

《《web标准教材》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、web标准主讲：袁晓维计算机科学系div+css一列固定宽度一列固定宽度居中一列自适应宽度一列自适应宽度居中一列二至多块布局一、一列固定宽度在页面中插入一个div标签，我们可以点击工具栏的“插入DIV标签”按钮，在打开的对话框中ID项给这个div命一下名，我们给它起个名叫layout（名称根据自己需要命名）。插入div后，在右侧的css样式面板中，定义id为layout的样式，确定后在打开的css编辑对话框的方框选项中设计宽度500，高度300。为了看清楚起见，我们把这个div设置个背景色，这样就能预览出大小和位置了。预览一下，看看在IE中的显示效果，一列固定宽度就这样

2、做成了二、一列固定宽度居中一列固定宽度居中和一列固定宽度相比，我们要解决的问题就是居中。这里我们用到css的外边距属性：margin。在IE6及以上版本和标准的浏览器当中，当设置一个盒模型的的margin:auto;时，可以让这个盒模型居中。我们下边在css样式表中加上这个属性看看效果：三、一列自适应宽度自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时，它默认是相对于浏览器显示的。我们把刚才的固定宽度例子中的宽度去掉看看：#layout{height:300px;background:#99FFcc;

3、}如果我们需要按浏览器的80%显示，那么设置宽度为80%，当改变浏览器窗口大小时，盒模型的宽度也会跟着改变。四、一列自适应宽度居中同样和固定宽度居中一样，我们只需要设置div的外边距为auto即可实现居中了。body{margin:0px;}#layout{margin:auto;height:300px;background:#99FFcc;width:80%;}五、一列二至多块布局一般的网站整体可以分为上中下结构，即：头部、中间主体、底部。那么我们可以用三个div块来划分，分别给它们起名为：头部（header）、主体（maincontent）、底部（footer）

4、。采用固定宽度居中的方式，代码如下：body{margin:0;padding:0;}#header{margin:5pxauto;width:500px;height:80px;background:#9F9;}#main{margin:5pxauto;width:500px;height:400px;background:#9FF;}#footer{margin:5pxauto;width:500px;height:80px;background:#9f9;}Header：maincontent：Footer：二列和三列布局二列自适应宽度二列固定宽度二列固定宽

5、度居中xhtml的块级元素(div)和内联元素(span)float属性三列自适应宽度三列固定宽度三列固定宽度居中IE6的3像素bug一、两列自适应宽度下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。首先创建html代码如下：此处显示id"side"的内容