03章:从一列布局入门 - DIV-CSS实战

需积分: 0 17 下载量 154 浏览量 更新于2024-09-15 收藏 1.37MB DOCX 举报
本资源专注于03DIV-CSS学习中的基础章节,主要讲解如何通过一列布局来理解和实践Web标准。课程从实际操作开始,首先介绍了五种常见的列布局方法: 1. 一列固定宽度:步骤包括创建新页面、插入div标签、设置div ID(如layout)、在CSS中定义其宽度(如480px)和高度(如360px),并添加背景颜色以辅助视觉预览。通过ID选择器编写CSS样式,并查看在不同浏览器(如IE)中的显示效果。 2. 一列固定宽度居中:在此基础上,为了实现居中效果,课程介绍了使用`margin`属性,特别是`margin: auto;`。学生需要将前例文件保存为divcss002.html,并在CSS中应用这一技巧。这一步旨在让学生掌握如何通过调整外边距使元素在页面中水平居中。 3. 其他布局:后续内容可能涉及一列自适应宽度,即根据浏览器窗口大小动态调整宽度,以及一列二至多块布局,用于灵活组织内容。这些布局技术是响应式设计的核心组成部分,对现代网页设计至关重要。 课程强调虽然课程初期使用Dreamweaver的可视化生成CSS,但鼓励学生逐渐转向手写CSS,以提升编码技能和效率。通过实践这些基础布局,学员可以建立起坚实的CSS基础,为进一步学习复杂的网页布局和响应式设计打下坚实的基础。