## 17.2.1.布局思想
表格布局思想：
使用表格，将页面分割为若干区域：
纵向：就用表格的tr。
横向：就用表格的td实现。
层层分割：每个区块只考虑是“横向”还是“纵向”。
表格布局思想，被抛弃的原因是：网页展示速度慢！非常慢！
div+浮动布局思想：
纵向：使用div，自然上下排列出来。
横向：使用浮动div，并做好清除浮动工作（使浮动元素不影响后续元素）。
层层分割：每个区块只考虑是“横向”还是“纵向”。
典型布局效果：
课堂练习：
实现如下所示经典固定宽度布局，要求如下：
1，总宽度960px。
2，边框线1px；
3，所有线跟线之间的间隙都是5px
4，主体区域左右两个盒子的间隙是10px。
5，使用到h5中的新语义标签（header，nav，footer，aside，main等）。
6，扩展练习：加一个导航条在头部区域下面，加几个链接。
## 17.2.2.纵向布局的实现
若干div自然就实现的纵向布局（自然从上到下排列出来）
## 17.2.3.横向布局的实现
若干div使用浮动，就横过来了。
注意清除浮动以使外层盒子有正常的高度（包住内层浮动盒子，并避免影响后续内容）。
## 17.2.4.整体布局的实现
非常简单，就是“层层分割”：
1，确定当下要进行布局设计的区域范围（毫无疑问是矩形盒子，而且最初肯定是整个网页区域）；
2，确定该区域按纵向布局还是横向布局，依此进行盒子样式设计；
3，对第2步中分割出来的“小区域”，继续用第2步的思路进行布局设计，以此类推，层层细分。
## 17.2.5.经典圣杯布局
所谓经典圣杯布局（不知道谁取的这个名字），就是一个网页最常见的布局需求，大致如下所示：
其中主要的布局实现其实是中间部分。中间部分也可能是2栏（或左或右）。两边的宽度是固定的，中间主体部分的宽度可以是固定的，也可以是可变的（根据需要而定）。
案例1：
实现网页两栏典型布局效果。其中左边侧栏宽度固定（200px），右边主体栏宽度可变（最小600px）。
方法1：
代码如下：
```
<div class="box">
<aside>边栏</aside>
<main>
<div class="main">
主体主体主体主体</div>
</div>
</main>
</div>
<style>
.mainpage{
border:1px solid red;
margin:0 auto;
width:90%;
min-width: 800px;
}
.box{
border:1px solid red;
margin:5px;
}
.box::after{
content:"";
display:block;
clear:both;
}
.box>aside{
background: yellow;
width:200px;
float:left;
}
.box>main{
margin-left:210px;
}
.box>main>.main{
border:solid 1px blue;
background: pink;
}
</style>
```
方法2；
```
<style>
.mainpage{
border:1px solid red;
margin:0 auto;
width:90%;
min-width: 800px;
}
.box{
border:1px solid red;
margin:5px;
}
.box::after{
content:"";
display:block;
clear:both;
}
.box>aside{
background: yellow;
width:200px;
float:left;
margin-left:-100%;
}
.box>main{
float:left;
width:100%;
height:40px;
background: orange;
}
.box>main>.main{
margin-left:210px;
border:solid 4px blue;
background: pink;
}
</style>
</head>
<body>
<div class="mainpage">
<header>头部</header>
<div class="box">
<main>
<div class="main">
主体主体主体主体主体主体主体
</div>
</main>
<aside>边栏<br><br></aside>
</div>
<footer>底部</footer>
</div>
```
案例2：
实现网页三栏典型布局效果。其中左边和右边侧栏宽度固定（均为200px），中间主体栏宽度可变（最小400px）。
方法1：
代码如下：
```
<style>
.mainpage{
border:1px solid red;
margin:0 auto;
width:90%;
min-width: 800px;
}
.box{
border:solid 1px blue;
}
.box:after{
content:"";
display: block;
clear:both;
}
.box>.side_left{
width:200px;
background: yellow;
float:left;
}
.box>.side_right{
width:200px;
background: yellow;
float:right;
}
.box>main{
margin-left:210px;
margin-right:210px;
background: gray;
}
</style>
</head>
<body>
<div class="mainpage">
<header>头部</header>
<div class="box">
<aside class="side_left">左边栏<br><br></aside>
<aside class="side_right">右边栏<br><br></aside>
<main>
<div class="main">
主体主体主体主体主体主体主体
</div>
</main>
</div>
<footer>底部</footer>
```
方法1：
```
<style>
.mainpage{
border:1px solid red;
margin:0 auto;
width:90%;
min-width: 800px;
}
.box{
border:solid 1px blue;
}
.box:after{
content:"";
display: block;
clear:both;
}
.box>main{
float:left;
width:100%;
}
.box>main>.main{
background: gray;
margin-left:210px;
margin-right:210px;
}
.box>.side_left{
width:200px;
background: yellow;
float:left;
margin-left:-100%;
}
.box>.side_right{
width:200px;
background: yellow;
float:right;
margin-left:-10px;
}
</style>
</head>
<body>
<div class="mainpage">
<header>头部</header>
<div class="box">
<main>
<div class="main">
主体主体主体主体主体主体主体
</div>
</main>
<aside class="side_left">左边栏<br><br></aside>
<aside class="side_right">右边栏<br><br></aside>
</div>
<footer>底部</footer>
</div>
```
- 1、相关介绍
- 1.1.关于全栈学科
- 1.2.全栈工程师与全栈开发
- 1.3.基本技能
- 1.4.学习方法
- 2、html初步
- 2.1.什么是网页和网站
- 2.2.网页浏览原理
- 2.3.什么是html
- 2.4.html基本知识
- 2.5.综合案例
- 3、html结构标签
- 3.1.文档级结构标签
- 3.2.内容级结构标签
- 3.3.块标签和行内标签
- 4、html文本标签
- 5、html列表标签
- 5.1.无序列表ul>li
- 5.2.有序列表ol>li
- 5.3.定义列表dl>dt，dd
- 6、html图像标签
- 6.1.网页路径问题
- 7、html链接标签
- 7.1.超链接
- 7.2.锚链接
- 7.3.link标签
- 8、html表格标签
- 8.1.表格初步
- 8.2.表格高级
- 8.3.表格案例
- 9、html表单标签
- 9.1.表单初步
- 9.2.表单标签详解
- 9.3.表单和表格综合案例
- 10、html5新增标签与属性
- 10.1.一些新增标签
- 10.2.一些新增input类型
- 10.3.一些新增属性
- 11、其他零碎及相关知识
- 11.1.meta标签（元信息标签）
- 11.2.网页的字符编码问题
- 11.3.特殊字符——字符实体
- 11.4.文档类型（了解）
- 11.5.内嵌框架标签iframe（了解）
- 12、CSS的引入
- 12.1.CSS引入
- 12.2.什么是css？
- 12.3.为什么需要css？
- 13、css入门
- 13.1.css样式分类（根据css代码位置分）
- 13.2.css基本语法
- 13.3.css简单的选择器
- 13.4.css属性
- 13.5.css入门综合案例
- 14、选择器详解
- 14.1.选择器综述
- 14.2.基础选择器
- 14.3.关系选择器
- 14.4.属性选择器
- 14.5.伪类选择器
- 14.6.伪元素选择器
- 14.7.常见选择器的组合
- 14.8.css样式的特性
- 15、有关文字的属性
- 15.1.字体属性
- 15.2.文本属性
- 16、有关盒子的属性
- 16.1.盒子概述
- 16.2.盒子的宽高属性width和height
- 16.3.边框属性border
- 16.4.内边距属性padding
- 16.5.外边距属性margin
- 16.6.背景属性background
- 16.7.轮廓属性outline
- 16.8.盒子综合案例
- 17、有关布局的属性
- 17.1.布局属性
- 17.2.页面布局应用
- 18、定位属性
- 19、列表与表格样式
- 19.1.列表样式
- 19.2.表格样式
- 20、CSS3高级特性
- 20.1.盒子新特性
- 20.2.多栏布局column
- 20.3.弹性布局flex
- 20.4.2D变换transform（2D）
- 20.5.3D变换transform（3D）
- 20.6.过渡效果transition
- 20.7.动画效果animation
- 21、零碎或补遗或经验
- 21.1.光标形状设置cursor
- 21.2.盒子缩放zoom
- 21.3.文字阴影text-shadow
- 21.4.文字溢出text-overflow
- 21.5.盒子模型box-sizing
- 21.6.css初始化
- 21.7.css精灵技术
- 21.8.自定义字体