zhensolid
/
Python-100-Days


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>经典布局</title>
		<style>
			#page {
				width: 960px;
				margin: 0 auto;
			}
			header, footer, #main {
				margin: 10px 0;
			}
			header {
				height: 150px;
				background-color: lightgoldenrodyellow;
			}
			#main {
				height: 600px;
				background-color: lightpink;
			}
			footer {
				height: 150px;
				background-color: lightsalmon;
			}
			#logo {
				height: 70%;
			}
			nav {
				height: 30%;
				background-color: lightgray;
			}
			#content {
				float: left;
				width: 74%;
				height: 100%;
				margin-right: 1%;
				background-color: lightgreen;
			}
			article {
				height: 33%;
				border: 1px dashed black;
			}
			aside {
				float: left;
				width: 25%;
				height: 100%;
				background-color: lightcyan;
			}
		</style>
	</head>
	<body>
		<div id="page">
			<!-- 页眉（logo+导航） -->
			<header>
				<div id="logo">页眉</div>
				<nav>导航菜单</nav>
			</header>
			<!-- 主体（可以分为多栏）-->
			<div id="main">
				<div id="content">
					<article>文章1</article>
					<article>文章2</article>
					<article>文章3</article>
				</div>
				<aside>侧边栏</aside>
			</div>
			<!-- 页脚（友情链接+版权信息+ICP备案信息） -->
			<footer>页脚</footer>
		</div>
	</body>
</html>