css中的流体与冻结设计

最新推荐文章于 2022-09-16 21:05:29 发布

转载最新推荐文章于 2022-09-16 21:05:29 发布 · 249 阅读

文章标签：

#css 流体与冻结设计

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

html

28 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>流体与冻结设计</title>
		<!-- 1.布局锁定,当用户调整屏幕代大小的时候,设计仍然可以保持原样,称之为冻结布局 -->
		<!-- 2.凝胶布局,会锁定页面中的内容区的宽度,将其在浏览器中居中显示 -->
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
			}

			div {
				height: 100%;
			}
			#allcontent{
				width: 800px;
				padding-top: 5px;
				padding-bottom: 5px;
				background-color: #675c47;
				margin-left: auto;
				margin-right: auto;
			}

			#first {
				background-color: yellow;
				height: 10%;
			}

			#content {
				background-color: red;
				margin: 10px 200px 0px 0px;
				height: 80%;
			}

			#ad {
				background-color: blue;
				height: 600px;
				width: 200px;
				float: right;
			}

			#footer {
				background-color: #FFC0CB;
				clear: right;
				/* 效果的话,可以注释 清除浮动 以及 添加浮动查看 */
			}
		</style>
	</head>
	<body>
		<div id="allcontent">
			<div style="background-color: #00FFFF;">
				<!-- 页眉 -->
				<div id="first">
					我是页眉
				</div>
				<!-- 广告区 -->
				<div id="ad">
					我是广告,一直浮动在右边
				</div>
				<!-- 主内容 -->
				<div id="content">
					我是内容

				</div>

				<!-- 页脚 -->
				<div id="footer">
					我是页脚我是页脚我是页脚我是页脚我是页脚我是页脚
					我是页脚我是页脚我是页脚我是页脚我是页脚我是页脚

				</div>
			</div>
		</div>
	</body>
</html>