css布局 --- 流体布局 冻结布局 凝胶布局 绝对定位
两栏布局之流体布局
两栏布局之冻结布局
两栏布局之凝胶布局
========================================
两栏布局之流体布局
主内容动态拓展，边栏浮动。
边栏动态拓展，主内容浮动。
========================================
主内容动态拓展，边栏浮动。
========================================
step1：将待浮动的html元素放置到“目标元素”的下面。
step2：为浮动元素设置宽度。
step3: 为浮动元素设置浮动方式。
step4: 为主内容这只外边距。
step5: 设置页脚的clear属性，使其左右没有流动的元素。
<html>
<head>
<style>
#header {
background-color: black;
height: 200px;
}
#side {
border-right: solid 1px black;
padding: 10px;
margin: 10px;
width: 400px;
float: right;
}
#footer {
margin: auto;
background-color: darkblue;
height: 200px;
clear: right; /*清除左右两端的浮动*/
}
#main {
padding: auto;
margin: auto 440px auto auto;
background-color: firebrick;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="side">
<img src="data:image/123.png" width="400" height="300">
</div>
<div id="main">
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
</div>
<div id="footer">
</div>
</body>
<footer>
</footer>
</html>
=======================================================================================
<html>
<head>
<style>
body {
margin: 0px;
}
#header {
background-color: black;
height: 200px;
margin: 10px;
}
#main {
width: 1500px;
padding: 10px 10px 10px 10px;
margin: auto 20px auto 20px;
float: left;
}
#side {
margin-left: 1560px;
}
#footer {
background-color: darkblue;
height: 200px;
margin: 10px;
clear: left;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="main">
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
</div>
<div id="side">
<img src="data:image/123.png" width="400" height="300">
</div>
<div id="footer">
</div>
</body>
<footer>
</footer>
</html>
======================================================================================
冻结布局
最核心的思想就是在body添加一个div元素，而且这个div包裹所有页面中的元素。
设置这个div的宽度，比如800px。之后，无论如何改变浏览器窗口的宽度。
内容区都是800px像素宽。这样这个页面中的内容就冻结了。但是，存在一个缺点。
那就是，如果浏览器设置地过于宽，那么内容区右边就会存在大量的空白。很丑。
<html>
<head>
<style>
body {
margin: 0px;
}
#all {
width: 1400px;
background-color: forestgreen;
padding: 10px;
}
#header {
background-color: black;
height: 200px;
margin: 10px;
}
#main {
width: 800px;
padding: 10px 10px 10px 10px;
margin: auto 20px auto 20px;
float: left;
}
#side {
margin-left: 860px;
}
#footer {
background-color: darkblue;
height: 200px;
margin: 10px;
clear: left;
}
</style>
</head>
<body>
<div id="all">
<div id="header">
</div>
<div id="main">
<img src="data:image/123.png">
</div>
<div id="side">
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
</div>
<div id="footer">
</div>
</div>
</body>
<footer>
</footer>
</html>
=======================================================================================
凝胶布局
<html>
<head>
<style>
body {
margin: 0px;
}
#all {
width: 1400px;
background-color: forestgreen;
padding: 10px;
margin: auto;
}
#header {
background-color: black;
height: 200px;
margin: 10px;
}
#main {
width: 800px;
padding: 10px 10px 10px 10px;
margin: auto 20px auto 20px;
float: left;
}
#side {
margin-left: 860px;
}
#footer {
background-color: darkblue;
height: 200px;
margin: 10px;
clear: left;
}
</style>
</head>
<body>
<div id="all">
<div id="header">
</div>
<div id="main">
<img src="data:image/123.png">
</div>
<div id="side">
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
</div>
<div id="footer">
</div>
</div>
</body>
<footer>
</footer>
</html>
============================================================================
================================绝对定位====================================
两栏布局之流体布局
两栏布局之冻结布局
两栏布局之凝胶布局
========================================
两栏布局之流体布局
主内容动态拓展，边栏浮动。
边栏动态拓展，主内容浮动。
========================================
主内容动态拓展，边栏浮动。
========================================
step1：将待浮动的html元素放置到“目标元素”的下面。
step2：为浮动元素设置宽度。
step3: 为浮动元素设置浮动方式。
step4: 为主内容这只外边距。
step5: 设置页脚的clear属性，使其左右没有流动的元素。
<html>
<head>
<style>
#header {
background-color: black;
height: 200px;
}
#side {
border-right: solid 1px black;
padding: 10px;
margin: 10px;
width: 400px;
float: right;
}
#footer {
margin: auto;
background-color: darkblue;
height: 200px;
clear: right; /*清除左右两端的浮动*/
}
#main {
padding: auto;
margin: auto 440px auto auto;
background-color: firebrick;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="side">
<img src="data:image/123.png" width="400" height="300">
</div>
<div id="main">
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
</div>
<div id="footer">
</div>
</body>
<footer>
</footer>
</html>
=======================================================================================
<html>
<head>
<style>
body {
margin: 0px;
}
#header {
background-color: black;
height: 200px;
margin: 10px;
}
#main {
width: 1500px;
padding: 10px 10px 10px 10px;
margin: auto 20px auto 20px;
float: left;
}
#side {
margin-left: 1560px;
}
#footer {
background-color: darkblue;
height: 200px;
margin: 10px;
clear: left;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="main">
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
</div>
<div id="side">
<img src="data:image/123.png" width="400" height="300">
</div>
<div id="footer">
</div>
</body>
<footer>
</footer>
</html>
======================================================================================
冻结布局
最核心的思想就是在body添加一个div元素，而且这个div包裹所有页面中的元素。
设置这个div的宽度，比如800px。之后，无论如何改变浏览器窗口的宽度。
内容区都是800px像素宽。这样这个页面中的内容就冻结了。但是，存在一个缺点。
那就是，如果浏览器设置地过于宽，那么内容区右边就会存在大量的空白。很丑。
<html>
<head>
<style>
body {
margin: 0px;
}
#all {
width: 1400px;
background-color: forestgreen;
padding: 10px;
}
#header {
background-color: black;
height: 200px;
margin: 10px;
}
#main {
width: 800px;
padding: 10px 10px 10px 10px;
margin: auto 20px auto 20px;
float: left;
}
#side {
margin-left: 860px;
}
#footer {
background-color: darkblue;
height: 200px;
margin: 10px;
clear: left;
}
</style>
</head>
<body>
<div id="all">
<div id="header">
</div>
<div id="main">
<img src="data:image/123.png">
</div>
<div id="side">
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
</div>
<div id="footer">
</div>
</div>
</body>
<footer>
</footer>
</html>
=======================================================================================
凝胶布局
<html>
<head>
<style>
body {
margin: 0px;
}
#all {
width: 1400px;
background-color: forestgreen;
padding: 10px;
margin: auto;
}
#header {
background-color: black;
height: 200px;
margin: 10px;
}
#main {
width: 800px;
padding: 10px 10px 10px 10px;
margin: auto 20px auto 20px;
float: left;
}
#side {
margin-left: 860px;
}
#footer {
background-color: darkblue;
height: 200px;
margin: 10px;
clear: left;
}
</style>
</head>
<body>
<div id="all">
<div id="header">
</div>
<div id="main">
<img src="data:image/123.png">
</div>
<div id="side">
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
</div>
<div id="footer">
</div>
</div>
</body>
<footer>
</footer>
</html>
============================================================================
================================绝对定位====================================
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
}
#header {
background-color: black;
height: 200px;
padding: 0px;
margin: 10px;
}
#side {
position: absolute;
top: 225px;
right: 0px;
width: 400px;
}
#main {
background-color: firebrick;
margin: 10px 400px 10px 10px;
}
#footer {
background-color: black;
height: 200px;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="main">
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
<p>
我心里筹算，终日愁苦，要到几时呢？我的仇敌升高压制我，要到几时呢？
耶和华我的神阿，求你看顾我，应允我，使我眼目光明，免得我沉睡至死。
免得我的仇敌说，我胜了他。免得我的敌人在我摇动的时候喜乐。
但我倚靠你的慈爱。我的心因你的救恩快乐。
我要向耶和华歌唱，因他用厚恩待我。
</p>
<p>
不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。
惟喜爱耶和华的律法，昼夜思想，这人便为有福。
他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所作的，尽都顺利。
恶人并不是这样，乃像糠秕被风吹散。
因此当审判的时候，恶人必站立不住，罪人在义人的会中，也是如此。
因为耶和华知道义人的道路。恶人的道路，却必灭亡。
</p>
<p>
看哪，恶人弯弓，把箭搭在弦上，要在暗中射那心里正直的人。
根基若毁坏，义人还能作什么呢？
耶和华在他的圣殿里，耶和华的宝座在天上。他的慧眼察看世人。
耶和华试验义人。惟有恶人和喜爱强暴的人，他心里恨恶。
他要向恶人密布网罗。有烈火，硫磺，热风，作他们杯中的分。
因为耶和华是公义的。他喜爱公义。正直人必得见他的面。
</p>
</div>
<div id="side">
<img src="data:image/123.png">
</div>
<div id="footer">
</div>
</body>
<footer>
</footer>
</html>
绝对布局的缺陷
css布局 --- 流体布局 冻结布局 凝胶布局 绝对定位相关推荐
- css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局 语音 编辑 锁定 讨论 上传视频 上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
- 用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...
- css经典布局——头尾固定高度中间高度自适应布局
今天说说一个经典布局:头尾固定高度中间高度自适应布局! 转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局. ...
- [css] 你是如何规划响应式布局的？
[css] 你是如何规划响应式布局的? 从项目角度来讲, PC 和 Mobile 是一个项目还是两个项目:从方法流派来讲, 有栅栏布局,固定 viewport,使用 rem/pt/vw 单位,使用定位 ...
- css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言 我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...
- HTML与CSS布局技巧总结,Html和CSS布局技巧总结(偶尔回顾回顾布局也是很有必要的)...
一.单列布局 1.水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,chi ...
- 你不知道的 CSS 文档流技巧，让布局更简单
看文章之前,先来看两个例子.这是我们在项目中最常见的项目布局方式. 案例一:多个容器按照相同间距水平排列. 案例二:常见的菜单导航 看到这两个案例时,你可以先短暂的想想平时都是如何实现的,很多同学的答 ...
- css布局：多列等高布局
多列等高布局是在一个容器里面,并排的多列,如果内容的高度无法在一开始确定(例如内容是动态的),又需要让各列自然地撑开(不出现每列里面的滚动条),这时候需要用css或者js的方法把各列高度设置为最高列的 ...
- CSS实现固定宽高比响应式布局（附实例分析）
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/ 在日常开发过程中,有一些前端业务场景可能需要让元素在尺寸变化的同时,保证宽高比不变,所以在此记录 ...
最新文章
- python---4
- 【RecyclerView】 九、为 RecyclerView 设置不同的布局样式
- 事务457——事务的七个传播行为
- nginx给php做统一入口,Nginx如何来配置隐藏入口文件index.php（代码）
- curses颜色操作
- C++ cin cout
- （JAVA）获取对象
- 作者：单志广（1974-），男，博士，国家信息中心信息化研究部副主任
- Dijkstra模板题——单源最短路径(洛谷 P3371)
- win11菜单怎么添加快捷方式 Windows11开始菜单添加快捷方式的设置方法
- python中用箱线图分析异常值_[宜配屋]听图阁
- garageband for mac下载(含教程+吉他和弦)
- 微信小程序自定义tabbar
- isprime函数python_Python“函数”之我见
- Sass！默认和主题化的设计系统
- OpenCV+Python车牌字符分割和识别入门 （含新能源车牌识别）
- python 在线编译器
- 小白应该如何选择国内服务器？腾讯云、阿里云、小鸟云？
- 多功能计算机使用教程,腾讯tim使用教程计算机应用知识
- linux下解压iso镜像文件方法