css布局 --- 流体布局冻结布局凝胶布局绝对定位

最新推荐文章于 2024-10-01 15:25:46 发布

洛神赋在csdn

最新推荐文章于 2024-10-01 15:25:46 发布

阅读量1.1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_23143555/article/details/80968153

版权

两栏布局之流体布局
两栏布局之冻结布局
两栏布局之凝胶布局
========================================
两栏布局之流体布局
主内容动态拓展，边栏浮动。
边栏动态拓展，主内容浮动。
========================================
主内容动态拓展，边栏浮动。
========================================
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>

======================