CSS 经典三列布局
2024-09-04 14:37: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负值的巧妙使用
最新文章
- windows phpstudy 本地添加自定义域名
- ios cocos2d 画线出现闪烁问题
- 在Ubuntu6.06 在搭建SVN服务器及在windows建立svn+ssh客户端
- [转]Jquery中AJAX错误信息调试参考
- 【JAVA编码专题】UNICODE,GBK,UTF-8区别
- 【leetcode】Single Number II
- cafee编译错误几个总结
- 微信小程序中如何获取for循环的item相关值到JS页面的问题
- Dapper-小型ORM之王(C#.NET)
- rediret 加/与不加/的区别
- C# 如何使用长度来切分字符串
- Oracle入门《Oracle介绍》第一章1-2 Oracle 实例
- 【洛谷】【计数原理+Floyed】P1037 产生数
- Django ORM相关
- Laravel常用命令行中文版
- linux命令(41):文件和文件夹的颜色
- [LeetCode]94, 144, 145 Binary Tree InOrder, PreOrder, PostOrder Traversal_Medium
- sql 判断 数据库 表 字段 是否存在
- 自然语言处理--中文文本向量化counterVectorizer()
- 在vc++上简单搭建环境(包括文件引用)