今天翻出来去年带实习生时写的div布局教程，干脆重新撸一遍给你们看。先说明，这法子特别适合跟我一样没美术细胞的程序员——当年我学布局可是被table标签折磨得掉头发，直到发现div+css才是救星！
第一步：抄起记事本先乱炖
新建个txt文档直接改后缀.html，开局就裸奔。先敲个!回车补全框架，body里面开搞。这时候屏幕比我的钱包还干净，但别慌！最关键的就是别碰鼠标，纯键盘敲出这几个玩意：
- <div id="top"></div>
- <div id="mid"></div>
- <div id="bottom"></div>
对，就用小学生都能看懂的top/mid/bottom当ID！保存后用浏览器打开——好家伙，三行字挤得跟地铁早高峰似的。
第二步：拿CSS当杀猪刀
在head里插个<style>标签开剁。逮住top这个倒霉蛋先开刀：
#top{
height: 80px;
background: #ffb6c1;
border: 2px dashed black;
看见没？粉色背景配黑色虚线边框，丑得很有辨识度就对了！重点是这个height必须写死，不然div跟气球似的撑不起来。
第三步：套娃式挖坑
现在轮到mid耍花招。在mid里面再塞俩div：
- <div class="left"></div>
- <div class="right"></div>
注意这里改用class了！然后坑爹操作来了——在mid的CSS里加display:flex;，这玩意能让俩小div并排躺。接着给left和right设置：
.left{
flex:1;
background:#87cefa;
.right{
flex:3;
background:#ffdead;
看见flex后面数字没？这就是左右栏比例。左边天蓝右边奶黄，整个一马卡龙车祸现场，但布局已经成型了！
第四步：给脚底板穿鞋
处理bottom最简单：
#bottom{
height: 60px;
background: #90ee90;
clear:both;
那个clear:both千万不能省！去年实习生没写这个，footer直接骑到mid头上去了，差点把我笑岔气。
第五步：塞垃圾内容测血压
在每个div里狂敲"测试文本测试文本"，字号调成24px加粗。重点检查这三个雷区：
- 粉色顶栏有没有被挤变形？
- 蓝黄分栏比例对不对？
- 绿底footer是不是老实呆在下面？
完事儿！截图发群里被吐槽像90年代网站，但你要的功能全齐活了！ 当年我第一个div项目比这还丑，客户居然验收了——后来才知道他是色盲...
