zoukankan      html  css  js  c++  java

  • 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>

    　　

    柳志军：13418977808（手机微信），QQ:93684042
  • 相关阅读:
    【leetcode】319. 灯泡开关
    【leetcode】313. 超级丑数
    【leetcode】316. 去除重复字母
    kpw3 kindle越狱过程总结
    SpringBoot工程application.properties文件不识别问题
    mybatis初始配置及错误说明
    运维相关知识
    面试常见
    Bean method 'jdbcTemplate' not loaded because @ConditionalOnSingleCandidate
    mysql5.7.21安装要点记录
  • 原文地址：https://www.cnblogs.com/liu-zhijun/p/10630241.html
Copyright © 2011-2022 走看看