27 ,布局

1. 流体浮动布局

2. 流体定位布局

3. 固定浮动布局

4. 固定定位布局

1.  流体浮动布局

规格：当视窗变化时跟着变化

采用：浮动布局

兼容：兼容当前主流浏览器

. 2.  流体定位布局

规格：当视窗变化时跟着变化

采用：定位布局

兼容：兼容当前主流浏览器

. 3.  固定浮动布局

规格：固定大小，不能随着视窗改变

采用：浮动布局

兼容：兼容当前主流浏览器

. 4.  固定定位布局

规格：固定大小，不能随着视窗改变

采用：定位布局

兼容：兼容当前主流浏览器

 

1流体浮动布局1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流体浮动两列布局</title>
<link rel="stylesheet" type="text/css" href="style/style2711.css"/>
<style type="text/css">

</style>
</head>

<body>
<div id="header">
	<h1>这里是标题</h1>
</div>
<div id="nav">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>
<div id="main">
	<p>开幕会上，2000多名全国政协委员将听取和审议政协全国委员会常务委员会工作报告和政协全国委员会常务委员会关于政协十三届一次会议以来提案工作情况的报告。</p>
	<p>中央广播电视总台所属各广播电台、电视台将对开幕会汪洋作全国政协常委会工作报告进行现场直播；中央重点新闻网站将对开幕会作实时报道。</p>
</div>
<div id="footer">
	<p>版权所有，翻版必究</p>
</div>

</body>
</html>

　　1流体浮动布局2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流体浮动三列布局</title>
<link rel="stylesheet" type="text/css" href="style/style2712.css"/>
<style type="text/css">

</style>
</head>

<body>
<div id="header">
	<h1>这里是标题</h1>
</div>
<div id="nav">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>
<div id="main">
	<p>开幕会上，2000多名全国政协委员将听取和审议政协全国委员会常务委员会工作报告和政协全国委员会常务委员会关于政协十三届一次会议以来提案工作情况的报告。</p>
	<p>中央广播电视总台所属各广播电台、电视台将对开幕会汪洋作全国政协常委会工作报告进行现场直播；中央重点新闻网站将对开幕会作实时报道。</p>
</div>
<div id="navr">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>
<div id="footer">
	<p>版权所有，翻版必究</p>
</div>

</body>
</html>

　　2流体定位布局1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流体定位两列布局</title>
<link rel="stylesheet" type="text/css" href="style/style2721.css"/>
<style type="text/css">

</style>
</head>

<body>
<div id="header">
	<h1>这里是标题</h1>
</div>
<div id="main">
	<p>开幕会上，2000多名全国政协委员将听取和审议政协全国委员会常务委员会工作报告和政协全国委员会常务委员会关于政协十三届一次会议以来提案工作情况的报告。</p>
	<p>中央广播电视总台所属各广播电台、电视台将对开幕会汪洋作全国政协常委会工作报告进行现场直播；中央重点新闻网站将对开幕会作实时报道。</p>
</div>
<div id="nav">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>


<div id="footer">
	<p>版权所有，翻版必究</p>
</div>

</body>
</html>

　　2流体定位布局2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流体定位两列布局</title>
<link rel="stylesheet" type="text/css" href="style/style2722.css"/>
<style type="text/css">

</style>
</head>

<body>
<div id="header">
	<h1>这里是标题</h1>
</div>
<div id="main">
	<p>开幕会上，2000多名全国政协委员将听取和审议政协全国委员会常务委员会工作报告和政协全国委员会常务委员会关于政协十三届一次会议以来提案工作情况的报告。</p>
	<p>中央广播电视总台所属各广播电台、电视台将对开幕会汪洋作全国政协常委会工作报告进行现场直播；中央重点新闻网站将对开幕会作实时报道。</p>
</div>
<div id="nav">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>
<div id="nav2">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>

<div id="footer">
	<p>版权所有，翻版必究</p>
</div>

</body>
</html>

　　3固定浮动布局1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定浮动两列布局</title>
<link rel="stylesheet" type="text/css" href="style/style2731.css"/>
<style type="text/css">

</style>
</head>

<body>
<div id="header">
	<h1>这里是标题</h1>
</div>
<div id="body">
<div id="main">
	<p>开幕会上，2000多名全国政协委员将听取和审议政协全国委员会常务委员会工作报告和政协全国委员会常务委员会关于政协十三届一次会议以来提案工作情况的报告。</p>
	<p>中央广播电视总台所属各广播电台、电视台将对开幕会汪洋作全国政协常委会工作报告进行现场直播；中央重点新闻网站将对开幕会作实时报道。</p>
</div>
<div id="nav">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>
</div>
<div id="footer">
	<p>版权所有，翻版必究</p>
</div>

</body>
</html>

　　3固定浮动布局2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定浮动两列布局</title>
<link rel="stylesheet" type="text/css" href="style/style2732.css"/>
<style type="text/css">

</style>
</head>

<body>
<div id="header">
	<h1>这里是标题</h1>
</div>
<div id="body">
<div id="nav">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>
<div id="main">
	<p>开幕会上，2000多名全国政协委员将听取和审议政协全国委员会常务委员会工作报告和政协全国委员会常务委员会关于政协十三届一次会议以来提案工作情况的报告。</p>
	<p>中央广播电视总台所属各广播电台、电视台将对开幕会汪洋作全国政协常委会工作报告进行现场直播；中央重点新闻网站将对开幕会作实时报道。</p>
</div>
<div id="nav2">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>
</div>
<div id="footer">
	<p>版权所有，翻版必究</p>
</div>

</body>
</html>

　　4固定定位布局1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定定位布局两列布局</title>
<link rel="stylesheet" type="text/css" href="style/style2741.css"/>
<style type="text/css">

</style>
</head>

<body>
<div id="header">
	<h1>这里是标题</h1>
</div>
<div id="body">
<div id="main">
	<p>开幕会上，2000多名全国政协委员将听取和审议政协全国委员会常务委员会工作报告和政协全国委员会常务委员会关于政协十三届一次会议以来提案工作情况的报告。</p>
	<p>中央广播电视总台所属各广播电台、电视台将对开幕会汪洋作全国政协常委会工作报告进行现场直播；中央重点新闻网站将对开幕会作实时报道。</p>
</div>
<div id="nav">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>
</div>
<div id="footer">
	<p>版权所有，翻版必究</p>
</div>

</body>
</html>

　　4固定定位布局2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定定位布局两列布局</title>
<link rel="stylesheet" type="text/css" href="style/style2742.css"/>
<style type="text/css">

</style>
</head>

<body>
<div id="header">
	<h1>这里是标题</h1>
</div>
<div id="body">
<div id="main">
	<p>开幕会上，2000多名全国政协委员将听取和审议政协全国委员会常务委员会工作报告和政协全国委员会常务委员会关于政协十三届一次会议以来提案工作情况的报告。</p>
	<p>推荐大家看《CSS禅意花园》《XHTML设计模式》</p>
</div>
<div id="nav">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>
</div>
<div id="footer">
	<p>版权所有，翻版必究</p>
</div>

</body>
</html>

　　4固定定位布局3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定浮动两列布局</title>
<link rel="stylesheet" type="text/css" href="style/style2743.css"/>
<style type="text/css">

</style>
</head>

<body>
<div id="header">
	<h1>这里是标题</h1>
</div>
<div id="body">
<div id="nav">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>
<div id="main">
	<p>开幕会上，2000多名全国政协委员将听取和审议政协全国委员会常务委员会工作报告和政协全国委员会常务委员会关于政协十三届一次会议以来提案工作情况的报告。</p>
	<p>中央广播电视总台所属各广播电台、电视台将对开幕会汪洋作全国政协常委会工作报告进行现场直播；中央重点新闻网站将对开幕会作实时报道。</p>
</div>
<div id="nav2">
	<ul>
		<li>新闻</li>
		<li>杂志</li>
		<li>音乐</li>
		<li>体育</li>
		<li>游戏</li>
	</ul>
</div>
</div>
<div id="footer">
	<p>版权所有，翻版必究</p>
</div>

</body>
</html>

　　

posted @ 2019-03-31 09:24  柳志军  阅读(375)  评论(0)  编辑  收藏  举报