DIV和CSS基本布局实例

2017-06-13 10:33:00
admin
原创
347
<!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> 
		<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
		<title>DIV+CSS practice
		</title> 
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				background-color:gray;
			}
			.clear{
				clear:both;
			}
			/*head*/ 
			#head{
				background-color:blue;
				height:150px;
			}
			/*container*/ 
			#container{
				background-color:red;
				width:960px;
				height:800px;
				margin:20px auto;
			}
			/*content*/ 
			#content{
				background-color:yellow;
				float:left;
				width:685px;
				height:100%;
			}
			/*side*/ 
			#side{
				background-color:green;
				float:right;
				width:255px;
				height:100%;
			}
			/*foot*/ 
			#foot{
				background-color:white;
				height:150px;
				width:960px;
				margin:20px auto;
			}
		</style>
	</head> 
	<body> 
		<!-- 头部 --> 
		<div id="head"> 
		</div> 
		<!--END 头部 --> 
		<!-- 主容器 --> 
		<div id="container"> 
			<!-- 左侧主显区 --> 
			<div id="content"> 
			</div> 
			<!-- END 左侧主显区 --> 
			<!-- 右侧边栏 --> 
			<div id="side"> 
			</div> 
			<!-- END 右侧边栏 --> 
		</div> 
		<!-- END 主容器 --> 
		<div class="clear">
		</div> 
		<!-- 底部 --> 
		<div id="foot"> 
		</div> 
		<!-- END 底部 --> 
	</body> 
</html> 
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227