DIV+CSS布局

优点

1. 符合W3C标准
2. 使页面载入得更快
3. 保持视觉的一致性
4. 修改设计时更有效率
5. 搜索引擎友好

布局时常用的属性

布局-上中下结构

xxxxxxxxxx
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

​x
<style>
.header {
    height: 100px;
    background-color: #fcc;
}

.content {
    height: 400px;
    background-color: #ff9;
}

.footer {
    height: 100px;
    background-color: #ccf;
}
</style>

布局-上中下-左右

xxxxxxxxxx
<div class="container">
    <div class="header"></div>
    <div class="nav"></div>
    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</div>

xxxxxxxxxx
<style>
.header {
    width: 100%;
    height: 100px;
    background-color: red;
}
.nav {
    width: 100%;
    height: 50px;
    background-color: pink;
}
.content {
    width:100%;
    height: 300px;
    background-color: yellow;
}
.footer {
    width: 100%;
    height: 150px;
    background-color: deepskyblue;
}
.left {
    width: 33.33%;
    height: 300px;
    background-color: palegoldenrod;
    float: left;
}
.center {
    width: 33.33%;
    height: 300px;
    background-color: palegreen;
    float: left;
}
.right {
    width: 33.33%;
    height: 300px;
    background-color: palevioletred;
    float: left;
}
</style>

实时效果反馈

1.以下哪个不是DIV+CSS布局的优点：

A 对搜索引擎不友好

B 搜索引擎友好

C 保持视觉的一致性

D 符合W3C标准

答案

1=>A