创建浮动定位2列式布局网页HTML教程

"任务创建浮动定位列式布局的网页html(共11张PPT).ppt" 本资源是一个关于创建浮动定位列式布局的网页HTML的教程，包含11张PPT，主要讲解如何构建一个两列式的网页布局，其中包括左侧的图文混排和右侧的上下两个部分。这个任务主要涉及以下几个核心知识点： 1. **HTML 结构**：创建网页文档0802.html，并链接外部样式文件base.css、layout.css和main.css。这表明HTML文档会包含基础样式、布局样式以及可能的特定页面样式。 2. **CSS 文件**：需要创建三个CSS文件，即base.css、layout.css和main.css。base.css可能用于设置通用的全局样式，layout.css用于定义页面布局，而main.css可能是针对特定页面内容的样式。 3. **浮动定位**：浮动定位是CSS中一种常见的布局方式，常用于创建多列布局。在本任务中，左侧和右侧的列将通过浮动定位来实现并排显示。 4. **HTML 标签**：在0802.html中添加必要的HTML标签以构建网页主体布局结构。这可能包括`<div>`、`<header>`、`<nav>`、`<section>`、`<article>`、`<aside>`、`<footer>`等元素，以实现语义化的结构。 5. **类选择符**：在CSS文件中定义类选择符，以应用特定的样式到HTML元素上，实现图文混排和分块布局。 6. **外部样式表链接**：在HTML文件中使用`<link>`标签链接外部CSS文件，使样式生效。例如： ```html <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/layout.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> ``` 7. **任务实施步骤**： - 创建站点与文件夹结构，包括“单元8”文件夹内的“8-2”文件夹和“CSS”子文件夹。 - 将已有的样式文件复制到相应位置。 - 在CSS文件夹中创建新的layout.css文件，并编写布局样式。 - 在0802.html中编写HTML结构，插入已有的代码片断。 - 浏览并检查网页0802.html的效果，确保布局符合预期。 这个任务旨在教授学生如何使用HTML和CSS进行网页设计，特别是浮动定位布局技术，这对于初学者理解网页布局原理至关重要。完成这个任务后，学生应该能够独立创建具有复杂布局的静态网页。