一 圣杯布局

1 html结构

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<div class="header">头部</div>
<div class="container">
<div class="middle">中间</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">底部</div>
</body>
</html>

2 css

*{padding: 0;margin: 0;list-style: none;}
body{min-height: 700px;}
.header,.footer{background: #ff9999;text-align: center;height: 50px;line-height: 50px;}
.left,.middle,.right{
position: relative;
float: left;
min-height: 530px;
line-height: 530px;
text-align: center;
}
.container{
padding: 0 220px 0 200px;
overflow: hidden;
}
.left{
margin-left: -100%;left: -200px;
width: 200px;
background-color: #99ffff;
}
.right{
margin-left: -220px;
right: -220px;
width: 220px;
background: #ccff99;
}
.middle{
width: 100%;
background: #ccffff;
word-break: break-all;
}
.footer{
clear: both;
}

 

二 双飞翼布局

1 html结构

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/sb.css">
</head>
<body>
<div class="header">header</div>
<div class="middle">
<div class="middle-inner">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer">footer</div>
</body>
</html>

2 css

*{padding: 0px;margin: 0px;}
.header,.footer{
height: 50px;
line-height: 50px;
background: #cf9999;
border: 1px solid #333;
text-align: center;
} .left,.middle,.right{
float: left;
min-height: 500px;
line-height: 500px;
text-align: center;
}
.left{
margin-left: -100%;
width: 200px;
background: #9999ff;
}
.right{
margin-left: -220px;
width: 220px;
background: #ccffff;
}
.middle{
width: 100%; }
.middle-inner{
margin-left: 200px;
margin-right: 220px;
min-height: 500px;
background-color: #ccff99;
word-break: break-all;
}
.footer{clear: both;}

  

三 以上两种 经典布局以双飞翼为最佳,在此基础上进行各种变种,主要体现了浮动和margin负值的巧妙使用

最新文章

  1. SSH项目里面 忘记密码的邮件发送功能
  2. C语言 独木舟问题
  3. Longest Substring Without Repeating Characters (c#)
  4. 代理模式(Proxy Pattern)
  5. Mysql存储引擎之TokuDB以及它的数据结构Fractal tree(分形树)
  6. 一次更愚蠢的NOIP模拟赛
  7. 记一次小团队Git实践(下)
  8. 如何在 Ubuntu 14.04 里面配置 chroot 环境
  9. Android——android相对布局(RelativeLayout)及属性
  10. &lt;解说linux下proc文件系统&gt;
  11. Android开发之消息机制
  12. appcompat_v7/res/values-v21/themes_base.xml No resource found that matches the given name
  13. c语言学习之基础知识点介绍(三):scanf函数
  14. oracle 常用博客网址
  15. Java-UrlRewrite中文api文档
  16. 变化App.config其中值,并保存
  17. Python argparse模块实现模拟 linux 的ls命令
  18. 1. 两数之和 LeetCode
  19. Vue与React的异同
  20. ExtJs写本地ArrayStore,ComboBox调用

热门文章

  1. Git命令中日常不注意又很重要的坑
  2. php 批量去除项目文件bom头
  3. hive常见的几种优化手段
  4. python之变量的命名规则
  5. gem install ruby-odbc失败
  6. POJ-3436:ACM Computer Factory (Dinic最大流)
  7. JavaWeb——升级赛-学生成绩管理系统(2).java---19.01.03
  8. java的编码格式
  9. 网络相关知识点:nginx相关概念
  10. 版本控制工具——Git的拓展使用