### DIV+CSS基础教程知识点详解
#### 一、基础知识概览
- **CSS** (Cascading Style Sheets): 层叠样式表，一种用来描述HTML文档外观和格式的语言。
- **HTML** (HyperText Markup Language): 超文本标记语言，用于创建网页的标准标记语言。
- **DHTML** (Dynamic HTML): 动态HTML，结合HTML、CSS和JavaScript的技术，实现动态网页效果。
- **XHTML** (Extensible HyperText Markup Language): 可扩展超文本标记语言，是对HTML的改进。
#### 二、DIV+CSS布局设计流程
##### 2.1 构思与规划
- **步骤一**：构思界面布局，可以使用Photoshop或Fireworks等工具绘制草图。
- **步骤二**：根据构思图分析页面组成部分，如顶部、内容区、底部等，并进一步细分各部分。
##### 2.2 页面布局设计
- **顶部**：通常包含LOGO、菜单和横幅图片。
- **内容区**：可细分为侧边栏和主要内容区。
- **底部**：一般包含版权信息。
##### 2.3 层的嵌套关系
- 使用DIV标签来构建层次结构：
- `body`：整个HTML文档的容器。
- `#Container`：页面的主要容器。
- `#Header`：页面头部。
- `#PageBody`：页面主体。
- `#Sidebar`：侧边栏。
- `#MainBody`：主要内容区。
- `#Footer`：页面底部。
#### 三、编写HTML和CSS代码
##### 3.1 创建基本文件结构
- 新建文件夹，命名为“DIV+CSS布局练习”。
- 在文件夹内创建两个文件：`index.htm` 和 `css.css`。
- `index.htm` 文件包含了XHTML的基本结构。
- `css.css` 文件用于存放CSS样式。
##### 3.2 编写HTML结构
- 在 `<body>` 标签中写入DIV的基本结构。
- 例如：
```html
<div id="Container">
<div id="Header"></div>
<div id="PageBody">
<div id="Sidebar"></div>
<div id="MainBody"></div>
</div>
<div id="Footer"></div>
</div>
```
##### 3.3 编写CSS样式
- 在 `css.css` 文件中编写CSS代码。
- 示例：
```css
body {
font: 12px Tahoma; /* 字体大小和字体 */
margin: 0; /* 边距 */
text-align: center; /* 文本对齐方式 */
background: #FFF; /* 背景颜色 */
}
```
- **注释**: 添加适当的注释以便于后续维护和理解。
#### 四、CSS样式详解
- **`font`**: 设置字体属性，支持缩写。
- 示例：`font: 12px Tahoma;`
- **`margin`**: 设置外边距，支持缩写。
- 示例：`margin: 0;` 或 `margin: 0 auto;`
- **`padding`**: 设置内边距，类似于`margin`。
- **`text-align`**: 设置文本对齐方式。
- 示例：`text-align: center;`
- **`background`**: 设置背景颜色或背景图片。
- 示例：`background: #FFF;`
- 复杂示例：`background: #ccc url('bg.gif') top left no-repeat;`
#### 五、综合实践
- 完成上述步骤后，保存文件并用浏览器打开 `index.htm` 文件。
- 这时可以看到页面的基本框架，即页面的骨架结构。
#### 六、总结
通过上述步骤的学习，我们了解了DIV+CSS的基本原理以及如何使用它们来构建网页布局。从构思设计到具体的HTML和CSS编码实践，每一个环节都至关重要。掌握这些基础后，可以进一步探索更高级的CSS技巧和响应式设计，以适应不同设备的屏幕尺寸。此外，保持良好的代码注释习惯对于后期维护和团队协作非常重要。
