master

分支 (2)

管理

管理

master

dev_test

web-test
/
CSS三列布局.html

<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<title>三列布局</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box {
				height: 500px;
				background-color: bisque;
				position: relative;
				overflow: hidden;
			}

			.box .box-content {
				position: relative;
				height: 100%;
				margin-left: 210px;
				margin-right: 210px;
				background-color: blue;
			}

			.box .box-left {
				width: 200px;
				position: absolute;
				height: 300px;
				left: 0;
				top: 0;
				background-color: green;
			}

			.box .box-right {
				width: 200px;
				position: absolute;
				min-height: 100%;
				right: 0px;
				top: 0;
				background-color: pink;
			}

			header,
			footer {
				height: 75px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<header> </header>
		<div class="box">
			<div class="box-content">
				<div class="child">
					中间主题内容
				</div>
			</div>
			<div class="box-left">
				左边内容
			</div>
			<div class="box-right">
				右边内容
			</div>
		</div>
		<footer>

		</footer>
	</body>
</html>