【基于HTML5的网页设计及应用】——工字型布局

🎯功能简介

这是一个工字型固定页面布局的HTML代码。它包含了头部（header）、主体内容区域（one）、页脚（footer）三个部分。

- 头部（header）：高度为150px，背景颜色为深灰色（#666）。

- 主体内容区域（one）：宽度为980px，水平居中。包含导航栏（nav）、左侧内容区域（leftside）和右侧内容区域（rightside）。导航栏高度为100px，背景颜色为深灰色（#666）。左侧内容区域宽度为350px，高度为400px，背景颜色为深灰色（#666），左浮动。右侧内容区域宽度为605px，高度为400px，背景颜色为深灰色（#666），左浮动。

- 页脚（footer）：高度为90px，背景颜色为深灰色（#666），清除浮动效果。

这个布局可以用于构建网页，具有固定宽度的主体内容区域和一个固定高度的页脚。

🎯代码解析

部分一：头部（.header）

<div class="header">header</div>

CSS样式：

.header{
    background-color: #666;
    height: 150px;
    margin: 0 0 8px 0;
}

• 背景颜色为深灰色（#666）
• 高度为 150px
• 上外边距为 0，右外边距为 0，下外边距为 8px，左外边距为 0

部分二：主体内容区域（.one内部）

<div class="one">
    <div class="nav">nav</div>
    <div class="leftside">leftside</div>
    <div class="rightside">rightside</div>
</div>

CSS样式：

.one{
    background-color: #fff;
    width: 980px;
    margin: 0 auto;
}
.nav{
    background-color: #666;
    height: 100px;
    margin: 4px 8px 4px 8px;
}
.leftside{
    background-color: #666;
    width: 350px;
    height: 400px;
    float: left;
    margin: 4px 4px 8px 8px;
}
.rightside{
    background-color: #666;
    width: 605px;
    height: 400px;
    float: left;
    margin: 4px 8px 8px 4px;
}

• .one：

• 背景颜色为白色（#fff）
• 宽度为 980px
• 水平居中

• .nav：

• 背景颜色为深灰色（#666）
• 高度为 100px
• 外边距上 4px，右 8px，下 4px，左 8px

• .leftside：

• 背景颜色为深灰色（#666）
• 宽度为 350px
• 高度为 400px
• 左浮动
• 外边距上 4px，右 4px，下 8px，左 8px

• .rightside：

• 背景颜色为深灰色（#666）
• 宽度为 605px
• 高度为 400px
• 左浮动
• 外边距上 4px，右 8px，下 8px，左 4px

• 部分三：页脚（.footer）
  

<div class="footer">footer</div>

CSS样式：

.footer{
    background-color: #666;
    height: 90px;
    margin: 4px 0 0 0;
    clear: both;
}

• 背景颜色为深灰色（#666）
• 高度为 90px
• 外边距上 4px，右 0，下 0，左 0
• 清除浮动效果

🎯核心代码

 <div class="header">header</div>
        <div class="one">
        <div class="nav">nav</div>
        <div class="leftside">leftside</div>
        <div class="rightside">rightside</div>
    </div>
        <div class="footer">footer</div>

🎯效果展示