HTML+CSS：创建绝对定位的2列布局网页教程

本资源是一份关于创建绝对定位列式布局网页的详细教学资料，包含11张PPT，主要围绕HTML和CSS技术进行指导。教学步骤分为以下几个部分： 1. 创建样式文件：首先，学生需要在站点的"单元8"中的"8-3"文件夹下创建三个样式文件：base.css、layout.css和main.css。这些文件用于定义HTML标签的属性和类选择器，以及设置网页布局样式。 2. 编写HTML结构：在网页文档0803.html中，学生需链接这三个外部样式文件，并构建网页主体布局结构。这涉及到使用HTML标签来组织页面，如可能包括导航栏、主要内容区域和侧边栏等元素。 3. 绝对定位和视觉效果：网页设计采用左、右布局，左侧版块通过绝对定位技术实现，这意味着左侧元素相对于其父元素定位，可以实现如图片悬挂在侧边的视觉效果。 4. CSS代码编写：在CSS文件layout.css中，学生需要编写具体的样式规则，如设置容器的宽度、高度、浮动属性，以及元素的定位、背景图片等，以实现预期的布局。 5. 网页文档创建与样式应用：在"8-3"文件夹下的网页文档0803.html中，学生需要编写HTML结构代码，并确保正确引用样式文件，同时插入适当的代码片段以完成页面内容的填充。 6. 浏览与检查：最后一步是预览网页效果，确保布局符合设计要求，图片和内容显示无误。学生可以通过浏览器查看网页0803.html，如图8-23所示，进行必要的调整。 这份教程旨在帮助学习者掌握HTML与CSS结合使用的基本技巧，特别是如何运用绝对定位创建美观的列式布局网页。整个过程强调了实践操作和理论知识的结合，对于提升网页设计技能非常有帮助。