🎯功能简介
这段代码实现了一个固定宽度的页面布局，包括头部、导航栏、左侧内容区、右侧内容区和页脚，各部分样式如下：
- **头部（.header）**：
- 高度为 100px
- 背景颜色为深灰色（#666）
- 上外边距为 0，右外边距为 10px，下外边距为 5px，左外边距为 10px
- **导航栏（.nav）**：
- 高度为 100px
- 背景颜色为深灰色（#666）
- 上外边距为 10px，右外边距为 10px，下外边距为 5px，左外边距为 10px
- **左侧内容区（.leftside）**：
- 宽度为 280px
- 高度为 400px
- 背景颜色为天蓝色（skyblue）
- 左浮动
- 上外边距为 5px，右外边距为 5px，下外边距为 10px，左外边距为 10px
- **右侧内容区（.rightside）**：
- 宽度为 490px
- 高度为 400px
- 背景颜色为天蓝色（skyblue）
- 左浮动
- 上外边距为 5px，右外边距为 10px，下外边距为 10px，左外边距为 5px
- **页脚（.footer）**：
- 高度为 78px
- 背景颜色为深灰色（#666）
- 上外边距为 10px，右外边距为 10px，下外边距为 10px，左外边距为 10px
- 清除浮动
整体容器 `.one` 的宽度为 800px，水平居中显示，背景颜色为白色（#fff）。
这样的布局会将页面分为上中下三部分，左右两边留白，适合固定宽度展示内容的网页设计。
🎯代码解析
1. 文档结构及基本样式重置部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固定宽度的页面布局</title>
这部分定义了文档的基本结构和元信息，包括字符集设置、浏览器兼容性设置、视口宽度设置以及页面标题。
<style> *{ margin: 0; padding: 0; }
这部分对所有元素应用了通用的样式重置，将内边距和外边距都设置为 0，以确保不会出现默认的间距。
2. 容器及头部部分：
.one{ background-color: #fff; width: 800px; margin: 0 auto; } .header{ background-color: #666; height: 100px; margin: 0 10px 5px 10px; }
这部分定义了整体容器
.one和头部.header的样式。.one宽度固定为 800px，水平居中显示，背景颜色为白色；.header高度为 100px，背景颜色为深灰色，上右下左的外边距分别为 0、10px、5px、10px。
🎯核心代码
<div class="one"> <div class="header">header</div> <div class="nav">nav</div> <div class="leftside">leftside</div> <div class="rightside">rightside</div> <div class="footer">footer</div> </div>
🎯效果展示
