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="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="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="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="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="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="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="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="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="image/123.png">
    </div>


    <div id="footer">


    </div>
</body>
<footer>
    
</footer>
</html>
绝对布局的缺陷

猜你喜欢

转载自blog.csdn.net/qq_23143555/article/details/80968153