【div-css布局入门】这篇教程主要讲解了如何利用HTML中的div元素和CSS进行网页布局设计。div元素是HTML中一个非常重要的布局工具，它本质上是一个块级元素，可以用来包裹其他元素，创建网页的结构框架。
学习div-css布局需要具备一定的HTML基础知识。在网页制作中，CSS（层叠样式表）用于控制网页元素的样式，如颜色、字体、布局等，而HTML则负责构建网页的内容结构。DHTML和XHTML是HTML的扩展，引入了动态交互和更严格的语法规则。
在开始布局之前，通常会先用Photoshop或Fireworks等设计软件绘制出页面的构思图，将需要的界面布局大致规划出来。在例子中，页面被划分为顶部（包含LOGO、MENU和Banner）、内容部分（侧边栏和主体内容）以及底部（版权信息）三个主要区域。
接着，使用div进行布局设计。一个典型的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>
```
在这个结构中，`#Container`作为页面层容器，`#Header`、`#PageBody`、`#Sidebar`、`#MainBody`和`#Footer`分别代表页面的头部、主体、侧边栏、主要内容和底部。
然后，我们需要为这些div添加CSS样式，定义它们的宽高、位置和背景色等。例如：
```css
/* 页面层容器 */
#Container {
width: 100%;
}
/* 页面头部 */
#Header {
width: 800px;
margin: 0 auto;
height: 100px;
background: #FFCC99;
}
/* 页面主体 */
#PageBody {
width: 800px;
margin: 0 auto;
height: 400px;
background: #CCFF00;
}
/* 页面底部 */
#Footer {
width: 800px;
margin: 0 auto;
height: 50px;
background: #AAAAAA;
}
```
通过这种方式，我们可以控制每个div的显示效果，实现灵活的网页布局。值得注意的是，使用`margin: 0 auto;`可以使元素水平居中，`width`和`height`决定了元素的大小，而`background-color`则用于设置背景颜色。
将这些HTML和CSS代码保存为相应的文件（如index.htm和css.css），并在浏览器中打开index.htm，就能看到按照预设样式布局的网页了。这种基于div的布局方法不仅有助于提高网页的可维护性和响应式设计，还能有效减少重复的代码，提高页面加载速度。
div-css布局是网页设计的基础，掌握它能让你更好地理解和创建复杂的网页结构。通过不断实践和学习，你可以进一步掌握浮动布局、定位、盒模型等高级技巧，提升网页设计能力。
