圣杯布局，双飞翼布局，和自己独创的布局
圣杯布局，双飞翼布局，和自己独创的布局
windseek
发布于 2018-06-15 18:02:05
发布于 2018-06-15 18:02:05
代码可运行
运行总次数：0
代码可运行
圣杯布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
min-width: 600px;
}
header,
footer {
text-align: center;
width: 100%;
background-color: #bbbbbb;
}
.text {
text-align: center;
line-height: 200px;
font-size: 40px;
color: #fff;
}
.bd {
overflow: hidden;
padding: 0 200px 0 200px;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: #ddd;
}
.left {
/* opacity: 0.5; */
float: left;
width: 200px;
height: 200px;
background-color: #da4242;
/* 产生布局效果的属性 */
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
/* opacity: 0.5; */
float: left;
width: 200px;
height: 200px;
background-color: #4ddef1;
/* 产生布局效果的属性 */
margin-left: -200px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<header>圣杯布局</header>
<div class="bd">
<div class="main text">
main
</div>
<div class="left text">
left
</div>
<div class="right text">
right
</div>
</div>
<footer>footer</footer>
</body>
</html>其实是利用了，position:relative;和margin属性进行位置移动；结构上也是三栏
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
* {
padding: 0;
margin: 0;
}
header,
footer {
text-align: center;
width: 100%;
background-color: #bbbbbb;
}
.text {
text-align: center;
line-height: 200px;
font-size: 40px;
color: #fff;
}
.bd {
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: #ddd;
}
.main-content {
margin: 0 200px;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #da4242;
/* 产生布局效果的属性 */
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: #4ddef1;
/* 产生布局效果的属性 */
margin-left: -200px;
}
</style>
</head>
<body>
<header>双飞翼布局</header>
<div class="bd">
<div class="main text">
<div class="main-content">main</div>
</div>
<div class="left text">
left
</div>
<div class="right text">
right
</div>
</div>
<footer>footer</footer>
</body>
</html>双飞翼布局，利用了，margin的负边距属性移动，这里要注意由于是浮动所以，margin是负边距时能够移动，当不是浮动时，负边距会吃点元素本身的宽度
他与圣杯最大的区别在于没有用到position属性，html结构上也有区别，主要在main那一块，一个是做padding，一个是做margin
无论哪种布局都利用了一个很重要的属性，内部元素的宽度百分比是相对于外部元素的content宽度的，即不包括内外边距，也不包括边框。
我的布局方式，感觉比之前两种都简单，嘿嘿
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
min-width: 600px;
}
header,
footer {
text-align: center;
width: 100%;
background-color: #bbbbbb;
}
.text {
text-align: center;
line-height: 200px;
font-size: 40px;
color: #fff;
}
.bd {
overflow: hidden;
position:relative;
padding: 0 200px 0 200px;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: #ddd;
}
.left {
/* opacity: 0.5; */
width: 200px;
height: 200px;
background-color: #da4242;
position:absolute;
left:0;
top:0;
}
.right {
/* opacity: 0.5; */
width: 200px;
height: 200px;
background-color: #4ddef1;
position:absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<header>三栏布局</header>
<div class="bd">
<div class="main text">
main
</div>
<div class="left text">
left
</div>
<div class="right text">
right
</div>
</div>
<footer>footer</footer>
</body>
</html>我利用了position:absolute这个属性，外层元素的padding设置一下，其实准确的说，float没哟脱离文档流，只是，float使这个元素快在文档流里能根据float规则流动；absolute才完全脱离了文档流。相对于relative的父元素位置。并且，absolute的原来的位置没有了，relative的原来位置还在。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-02-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
