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