css布局(三)

最新推荐文章于 2024-05-14 18:25:49 发布

「已注销」

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量142

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yuanjin1988/article/details/42913645

版权

css 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!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>
		<title>CSS布局</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			*
			{
				margin:0;
				padding:0;
			}
			
			body
			{
				margin:10px;
			}
			#header
			{
				width:600px;
				height:60px;
				background:#ccc;
				border:1px solid black;
				/* 居中div */
				/*margin-left:auto;*/
				/*margin-right:auto;*/
				margin:0 auto;
				margin-bottom:10px;
			}
			
			#body
			{
				
				width:600px;
				margin:0 auto;
				/*加在这里也无效*/
				/*必须要加在浮动本身的下面*/
				/*margin-bottom:10px;*/
			}
			
			
			#header h1
			{
				text-align:center;
				line-height:60px;
				font-size:16px;
				
			}
			
			#nav
			{
				width:200px;
				height:300px;
				
				float:left;
				margin-bottom:10px;
				background:red;
			}
			
			#main
			{
				width:400px;
				height:300px;
				
				float:right;
				margin-bottom:10px;
				background:green;
			}
			
			
			#footer
			{
				/*清除浮动*/
				clear:both;
				margin:0 auto;
				background:#ccc;
				border:1px solid black;
				width:600px;
				height:30px;
				text-align:center;
				line-height:30px;
				/**/
				margin-top:10px;
				
			}
		</style>
	</head>
	
	<body>
		
		<!-- 固定浮动布局 -->
		
		
		<!-- 规格：固定大小，不能随着视窗改变 -->
		<!-- 采用：浮动布局 -->
		<!-- 兼容：兼容当前主流浏览器 -->
		<!-- 固定两列浮动布局 -->
	
		<div id = "header">
			<h1>这里是标题</h1>
		</div>
		
		<div id = "body">
			<div id = "nav">
				左导航
			</div>
			<div id = "main">
				右内容
			</div>
		</div>
		
		<div id = "footer">
			版权所有 翻版必究
		</div>
	</body>
</html>

<!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>
		<title>CSS布局</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			*
			{
				margin:0;
				padding:0;
			}
			
			body
			{
				margin:10px;
			}
			#header
			{
				width:600px;
				height:60px;
				background:#ccc;
				border:1px solid black;
				/* 居中div */
				/*margin-left:auto;*/
				/*margin-right:auto;*/
				margin:0 auto;
				margin-bottom:10px;
			}
			
			#body
			{
				
				width:600px;
				margin:0 auto;
				/*加在这里也无效*/
				/*必须要加在浮动本身的下面*/
				/*margin-bottom:10px;*/
			}
			
			
			#header h1
			{
				text-align:center;
				line-height:60px;
				font-size:16px;
				
			}
			
			#nav
			{
				width:150px;
				height:300px;
				
				
				margin-bottom:10px;
				background:red;
				float:right;
			}
			
			#main
			{
				width:300px;
				height:300px;
				
				
				margin-bottom:10px;
				background:blue;
				float:left;
			}
			
			#nav2
			{
				width:150px;
				height:300px;
				float:right;
				
				margin-bottom:10px;
				background:green;
				
			}
			
			
			#footer
			{
				/*清除浮动*/
				clear:both;
				margin:0 auto;
				background:#ccc;
				border:1px solid black;
				width:600px;
				height:30px;
				text-align:center;
				line-height:30px;
				/**/
				margin-top:10px;
				
			}
		</style>
	</head>
	
	<body>
		
		<!-- 固定浮动布局 -->
		
		
		<!-- 规格：固定大小，不能随着视窗改变 -->
		<!-- 采用：浮动布局 -->
		<!-- 兼容：兼容当前主流浏览器 -->
		<!-- 固定三列浮动布局 -->
	
		<div id = "header">
			<h1>这里是标题</h1>
		</div>
		
		<div id = "body">
			<div id = "nav">
				左导航
			</div>
			
			<div id = "main">
				中内容
			</div>
			
			<div id = "nav2">
				右导航
			</div>
		</div>
		
		<div id = "footer">
			版权所有 翻版必究
		</div>
	</body>
</html>