《一个有用的DIV入门实例》
在网页设计中，Div+CSS布局是一种常见的页面构建方式，它能够实现灵活、响应式的网页布局，同时提高网页的可维护性和加载速度。本实例将引导初学者逐步了解并掌握Div+CSS布局的基本原理和实践操作。
设计任何网页之前，都需要进行构思。这个过程通常会借助像Photoshop或FireWorks这样的图形设计工具，将页面布局草图绘制出来。在示例中，设计的界面被划分为三个主要部分：顶部（包括LOGO、MENU和Banner）、内容区域（侧边栏和主体内容）以及底部（包含版权信息）。
接下来是规划页面的布局。在这个例子中，我们使用了Div元素作为页面的基本结构单元。Div是HTML中的一个块级元素，可以容纳其他元素，并通过CSS来定义其样式和位置。我们创建了一个名为"Container"的主Div，作为页面的容器，然后在这个容器内嵌套了其他Div，分别代表"Header"（头部）、"PageBody"（主体）、"Sidebar"（侧边栏）和"Footer"（底部）。
HTML代码的编写是实现布局的关键。在XHTML的基本结构基础上，我们创建了如下的Div结构：
```html
<body>
<div id="container">
<!-- 页面层容器 -->
<div id="Header"> <!-- 页面头部 -->
</div>
<div id="PageBody"> <!-- 页面主体 -->
<div id="Sidebar"> <!-- 侧边栏 -->
</div>
<div id="MainBody"> <!-- 主体内容 -->
</div>
</div>
<div id="Footer"> <!-- 页面底部 -->
</div>
</div>
</body>
```
然后，我们使用CSS来定义这些Div的样式和位置。例如，`#container`设置为100%宽度，确保它占据整个屏幕；`#Header`设置了800px宽度，居中显示，背景色为#FFCC99；`#PageBody`同样800px宽度，居中，背景色为#CCFF00；而`#Footer`则是50px高度，背景色为#00FFFF。
CSS的使用要注意注释的编写，这有助于后期代码的阅读和维护。此外，CSS允许我们控制元素的字体、颜色、大小、位置等属性，实现精确的布局控制。例如，`body`元素的文本默认字体设置为12px的Tahoma，整体居中，背景色为白色。
通过以上步骤，一个基础的Div+CSS布局就完成了。但请注意，这只是基础框架，实际网页设计中还需要考虑响应式设计、交互效果、浏览器兼容性等问题。学习Div+CSS布局不仅需要掌握基本语法，还要不断实践，熟悉各种布局模式，以便应对复杂的设计需求。通过不断的实践和学习，你可以创造出更加精美、功能丰富的网页。
