使用div布局与外部CSS控制网页样式

"本资源主要介绍了如何使用HTML中的`div`元素进行页面布局，并通过外部CSS文件（1.css）来控制`div`块的样式，展示了基本的网页结构，包括头部、内容区域、侧边栏和页脚等部分。" 在网页设计中，`div`元素是一个非常重要的基础构建块，用于对网页内容进行分块和组织。在提供的代码中，我们可以看到`div`被用来创建不同的页面区域，如`header`、`left`、`content`、`right`和`footer`，这些区域通过`id`属性进行标识，以便在CSS中进行选择和样式化。 外部样式表文件（1.css）用于定义这些`div`块的样式。例如，`#container`选择器设置了整个页面容器的样式，包括居中对齐（`margin:0pt auto;`），白色背景（`background-color:rgb(255,255,255);`），文字颜色（`color:rgb(48,48,48);`）以及固定宽度（`width:760px;`）。这样可以确保整个页面内容在浏览器中以预定宽度居中显示。 `#header`选择器则定义了头部区域的样式，`#header h1`进一步细化了头部内`h1`元素的样式，比如设置内边距（`margin`），颜色，浮动（`float:left;`）以及字体大小（`font-size:2em;`）等。`#left`选择器定义了左侧边栏的样式，包括灰色背景，固定宽度和高度，以及向左浮动，使得内容可以在页面左侧排列。 此外，代码还展示了`ul`和`li`元素用于创建导航菜单，`img`元素用于插入图片，以及`a`元素创建链接。`class`属性用于定义元素类，例如`.page`，这样在CSS中就可以针对这类元素设置统一的样式。 这个例子很好地展示了如何利用HTML的`div`元素配合CSS进行布局设计，以及外部样式表如何控制页面的视觉表现。这种布局方式是网页开发中的常见实践，它使得页面结构清晰，样式可复用，便于维护和扩展。