标题

XHTML下CSS+DIV布局总结 超强推荐

简介

CSS+DIV布局能够很好地将页面结构和样式分离。说白了，相比较于以前使用 HTML 表格或是居中结构来排版，使用CSS+DIV布局就可以在排版时减少很多不必要的 HTML 标签和代码，使得代码更加简洁。下面为大家总结一下在 XHTML 下 CSS+DIV 布局的过程与事项。

思路

1. XHTML 语法规则

• XHTML 语法非常严格，XHTML 文档必须正确嵌套自闭合标签，并且所有标签必须小写。
• 标签必须有关闭标签或是自闭合标签。
• 所有属性必须用双引号，如果属性值中有双引号需要使用"转义字符。
• 为避免语法错误，在 XHTML 文件的开头处需要声明文档类型为 XHTML。

2. 布局模型

DIV 布局就是利用 DIV 和样式 CSS 开发的布局模型。

3. 栅格系统

基于 DIV 布局的栅格系统能够让开发者更快、更便捷地编写布局，依托于 CSS3 的栅格系统与扩展样式（LESS、SASS），大大地简化了布局的效果展示与修改。

4. 排版原则

• 将页面布局分成头部、主体和底部三个区域，用 div 标签来进行结构划分。
• 让主体部分尽可能占据整个页面的区域，使用 CSS 实现自适应布局。
• 确定整个页面的宽度，对于宽度需要有明确的设定。
• 根据网站的特点和需要选择具体的排版和样式。

示例

示例1：两栏布局

<div class="wrapper">
    <div class="sidebar">这里是左边栏</div>
    <div class="content">这里是内容区域</div>
</div>

<style>
.wrapper {
    width: 960px;
    margin: 0 auto;
}

.sidebar {
    width: 200px;
    float: left;
}

.content {
    width: 760px;
    float: right;
}
</style>

示例2：三栏布局

<div class="wrapper">
    <div class="left">这里是左边栏</div>
    <div class="content">这里是内容区域</div>
    <div class="right">这里是右边栏</div>
</div>

<style>
.wrapper {
    width: 960px;
    margin: 0 auto;
}

.left {
    width: 200px;
    float: left;
}

.content {
    width: 560px;
    float: left;
}

.right {
    width: 200px;
    float: right;
}
</style>

以上两个示例分别为两栏布局和三栏布局，其中主要使用的是 float 属性进行实现，同时使用 margin 属性控制布局间距和位置。

总而言之，XHTML 下 CSS+DIV 布局是现代网站开发中必须的一步，学习掌握它不仅能够提高个人的编码水平，更能够使得开发效率和页面的可维护性都有大大提升。