DIV+CSS布局初学者实战教程：结构与样式设置

"本篇教程是关于DIV+CSS布局的入门示例，旨在帮助初学者理解并掌握基本的网页布局技术。我们将通过实例操作，一步步构建一个简单的网页结构，并应用CSS样式来控制元素的布局和外观。 首先，我们创建了一个名为“DIV+CSS布局练习”的文件夹，并在这个文件夹下创建了两个文件：index.htm和css.css。index.htm文件是HTML文档的基础框架，包含了doctype声明、XML命名空间、meta标签设置字符集和文档标题，以及指向外部CSS文件的链接。 HTML结构部分，`<div id="container">...</div>`定义了页面的容器，用于包含所有其他元素。其中，`<div id="header">...</div>`代表页面头部，`<div id="PageBody">...</div>`是主体部分，包含侧边栏（`<div id="Sidebar">...</div>`)和主体内容（`<div id="MainBody">...</div>`）。最后，`<div id="Footer">...</div>`表示页面底部。 在css.css文件中，我们首先设置了全局样式，如字体大小、边距和文本居中等。`body`选择器定义了页面的整体样式，包括字体大小12px，Tahoma字体，边距为0，文本水平居中，背景色为白色。接着，我们针对`#container`设置了宽度为100%，使其占据整个浏览器窗口。 `#header`至`#Footer`的id选择器分别对应各个页面部分，可以通过CSS进一步定义这些部分的样式，如颜色、宽度、高度、位置等，以实现不同区域的差异化布局。这部分是初学者理解和实践CSS布局的关键，因为CSS通过定位（position）、浮动（float）和盒模型（box model）等属性，可以灵活地控制元素在页面中的排列。 总结来说，这个示例展示了如何使用DIV+CSS进行基础的网页布局，通过组合HTML的结构和CSS的选择器及其属性，可以创建出具有响应式设计和良好可读性的网页布局。对于想要入门网页开发的初学者，这是一个极好的实践平台，可以帮助他们建立起对布局和样式控制的基本概念。"