1、网页制作小课 一列布局 一列固定宽度一列固定宽度居中一列自适应宽度一列自适应宽度居中一列二至多块布局 常见的网页布局 一 一列固定宽度接下来在页面中插入一个div标签 我们可以点击工具栏的 插入DIV标签 按钮 在打开的对话框中ID项给这个div命一下名 我们给它起个名叫layout插入div后 在右侧的css样式面板中 定义id为layout的样式 确定后在打开的css编辑对话框的方框选项中设计宽度500 高度300 为了看清楚起见 我们把这个div设置个背景色 这样就能预览出大小和位置了 常见的网页布局 二 一列固定宽度居中一列固定宽度居中和一列固定宽度相比 我们要解决的问题就是居中 这里
2、我们用到css的外边距属性 margin 在IE6及以上版本和标准的浏览器当中 当设置一个盒模型的的margin auto 时 可以让这个盒模型居中 常见的网页布局 三 一列自适应宽度自适应宽度是相对于浏览器而言 盒模型的宽度随着浏览器宽度的改变而改变 这时要用到宽度的百分比 当一个盒模型不设置宽度时 它默认是相对于浏览器显示的 我们把刚才的固定宽度例子中的宽度去掉看看 常见的网页布局 四 一列自适应宽度居中同样和固定宽度居中一样 我们只需要设置div的外边距为auto即可实现居中了 常见的网页布局 五 一列二至多块布局一般的网站整体可以分为上中下结构 即 头部 中间主体 底部 那么我们可以用三个div块来划分 分别给它们起名为 头部 header 主体 maincontent 询问 footer 谢谢观看
