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

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客

🐳Java基础：Java基础_IT闫的博客-CSDN博客

🐋c语言：c语言_IT闫的博客-CSDN博客

🐟MySQL：数据结构_IT闫的博客-CSDN博客

🐠数据结构：​​​​​​数据结构_IT闫的博客-CSDN博客

💎C++：C++_IT闫的博客-CSDN博客

🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客

💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客​​​​​​

🥏python：python_IT闫的博客-CSDN博客

🐠离散数学：离散数学_IT闫的博客-CSDN博客

​​​​​​🥽Linux：​​​​Linux_Y小夜的博客-CSDN博客

🚝Rust：Rust_Y小夜的博客-CSDN博客

欢迎收看，希望对大家有用！

目录

🎯功能简介

🎯代码解析

🎯核心代码

🎯效果展示

🎯功能简介

这是一个工字型固定页面布局的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>

🎯效果展示