DIV+CSS 簡單佈局

DIV+CSS 簡單佈局

 

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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="common.css" />
<title></title>
</head>

<body>
	<div id="header">
		<div id="menu"></div>
		<div id="clear"></div>
	</div>
	<div id="main">
		<div id="left"></div>
		<div id="middle"></div>
		<div id="right">hello</div>
	</div>
	<div id="clear" style="clear:both;">
    </div>
</body>
</html>

 

css代碼如下:

/* CSS Document */
*{margin:0;padding:0;font-size:12px;}
#header{
	width:100%;
	height:120px;
	background:#F00;
}
#menu{
	width:100%;
	height:100px;
	background:#6633FF;
}
#main{
	position:relative;
	margin:0 auto;
	width:100%;
}
#left{
	width:15%;
	height:500px;
	background:#00f;
	float:left;
}
#middle{
	float:left;
	width:1%;
	height:500px;
	background:black;
}
#right{
	background:green;
	width:84%;
	height:500px;
	float:right;
}


附圖:


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章