css布局(四)

最新推荐文章于 2024-05-21 19:43:55 发布

「已注销」

最新推荐文章于 2024-05-21 19:43:55 发布

阅读量133

点赞数

分类专栏： css

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

版权

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;
				text-align:center;
				line-height:60px;
				border:1px solid black;
				background-color:#ccc;
				margin:0 auto;
				margin-bottom:10px;
			}
			#header h1
			{
				font-size:16px;
			}
			
			#body
			{
				margin:0 auto;
				width:600px;
				margin-bottom:10px;
			}
			
			#body #nav
			{
				width:200px;
				height:300px;
				background:orange;
				
				
			}
			#body #main
			{
				width:400px;
				height:300px;
				background:pink;
				position:relative;
				/*相对定位div移动后原来的位置还被占用*/
				/*这种布局方式在小型网站可以用一用*/
				top:-300px;
				left:200px;
			}
			
			#footer
			{
				position:relative;
				top:-300px;
				text-align:center;
				width:600px;
				height:30px;
				line-height:30px;
				letter-spacing:2px;
				border:1px solid black;
				background-color:#ccc;
				margin:0 auto;
			}
		</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;
				text-align:center;
				line-height:60px;
				border:1px solid black;
				background-color:#ccc;
				margin:0 auto;
				margin-bottom:10px;
			}
			#header h1
			{
				font-size:16px;
			}
			
			#body
			{
				margin:0 auto;
				width:600px;
				height:300px;
				margin-bottom:10px;
				/*body作为相对点位点*/
				/*相对定位就是该div移动后，原来位置还被占用*/
				position:relative;
			}
			
			#body #nav
			{
				width:200px;
				height:300px;
				background:orange;
				
				position:absolute;
				top:0;
				left:0;
				
			}
			#body #main
			{
				width:400px;
				height:300px;
				background:pink;
				
				position:absolute;
				top:0;
				left:200px;
			}
			
			#footer
			{
				
				text-align:center;
				width:600px;
				height:30px;
				line-height:30px;
				letter-spacing:2px;
				border:1px solid black;
				background-color:#ccc;
				margin:0 auto;
			}
		</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;
				text-align:center;
				line-height:60px;
				border:1px solid black;
				background-color:#ccc;
				margin:0 auto;
				margin-bottom:10px;
			}
			#header h1
			{
				font-size:16px;
			}
			
			#body
			{
				margin:0 auto;
				width:600px;
				height:300px;
				margin-bottom:10px;
				/*body作为相对点位点*/
				/*相对定位就是该div移动后，原来位置还被占用*/
				position:relative;
			}
			
			#body #nav
			{
				width:150px;
				height:300px;
				background:orange;
				
				position:absolute;
				top:0;
				left:0;
				
			}
			
			
			#body #nav2
			{
				width:150px;
				height:300px;
				background:red;
				
				position:absolute;
				top:0;
				left:450px;
				
			}
			
			
			#body #main
			{
				width:300px;
				height:300px;
				background:pink;
				
				position:absolute;
				top:0;
				left:150px;
			}
			
			#footer
			{
				
				text-align:center;
				width:600px;
				height:30px;
				line-height:30px;
				letter-spacing:2px;
				border:1px solid black;
				background-color:#ccc;
				margin:0 auto;
			}
		</style>
	</head>
	
	<body>
		
		<!-- 固定定位布局 -->
		<!-- 固定三列定位布局 -->
		
		<!-- 规格：固定大小，不能随着视窗改变 -->
		<!-- 采用：定位布局 -->
		<!-- 兼容：兼容当前主流浏览器 -->
	
		<div id = "header">
			<h1>这里是标题</h1>
		</div>
		
		<div id = "body">
			<div id = "nav">
				左导航
			</div>
			
			<div id = "nav2">
				右导航
			</div>
			
			<div id = "main">
				中内容
			</div>
			
		</div>
		
		<div id = "footer">
			版权所有 翻版必究
		</div>
	</body>
</html>