master

分支 (2)

管理

管理

master

dev_test

web-test
/
上中下页面布局.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		body,
		ul,
		li {
			/* position: relative; */
			margin: 0;
			padding: 0;
			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
			list-style: none;
		}

		header,
		footer {
			position: fixed;
			z-index: 9;
			width: 100%;
			height: 60px;
			font-size: 24px;
			color: #333;
			font-weight: bold;
			text-align: center;
			line-height: 60px;
			background: #77d677;
		}

		footer {
			bottom: 0;
		}

		section {
			padding: 60px 0;
		}

		nav {
			background: #93f393;
			color: #333;
		}

		nav li {
			padding: 10px 20px;
		}

		nav li.active {
			background: #77d677;
		}

		article {
			padding: 20px;
			font-size: 24px;
			/* text-align: center; */
			background: #d9ffd9;
			height: 2500px;
		}

		/* default */
		section.default nav {
			position: absolute;
			top: 60px;
			bottom: 60px;
			/* float: left;
  height: 100%; */
			width: 200px;
		}

		section.default nav li {
			padding: 10px 20px;
		}

		section.default nav li.active {
			background: #77d677;
		}

		section.default article {
			padding-left: 220px;
		}

		/* flexModal */
		section.flexModal {
			display: flex;
		}

		section.flexModal nav {
			width: 200px;
		}

		section.flexModal article {
			flex: 1;
		}

		/* fixedLeft */
		section.fixedLeft nav {
			position: fixed;
			top: 60px;
			bottom: 60px;
		}

		section.fixedLeft article {
			margin-left: 200px;
		}

		.right {
			position: fixed;
			top: 60px;
			bottom: 60px;
			background: red;
			right: 0px;
			height: 100%;
			width: 200px;
		}
	</style>
	<body>
		<header>我是头部position: fixed;z-index: 9;</header>
		<section class="flexModal fixedLeft">
			<nav>
				<ul>
					<li>section.flexModal nav ul>li*5</li>
					<li>栏目一</li>
					<li>栏目二</li>
					<li class="active">栏目三</li>
					<li>栏目四</li>
					<li>栏目五</li>
				</ul>
			</nav>
			<article>
				<h3>
					内容区域 section.flexModal articel
				</h3>
				<p>
					宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试
				</p>
				<p>
					section{
					padding: 60px 0;
					}
				</p>
				<p>
					section.flexModal{
					display: flex;
					}
				</p>
				<p>
					section.flexModal nav{
					width: 200px;
					}
				</p>
				<p>
					section.flexModal article{
					flex: 1;
					}
				</p>
			</article>
			<div class="right"></div>
		</section>
		<footer>底部版权同头部 position: fixed;z-index: 9;</footer>
	</body>
</html>