布局示例

<!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″ />

<STYLE type=text/css>

<!–

#top,#left,#middle,#right,#bottom

{

background:#CCCCCC;

height:120px;

}

#top,#index,#bottom/*页面上、中、下层宽度定义*/

{

clear:both;

width:778px;

margin:4px;

margin-left:auto;/*页面中上、中、下居中*/

margin-right:auto;

}

#left{

float:left;

width:200px;

}

#middle{

float:left;
margin-left: 5px;
width: 150px;

}

#right

{
 float: left;
 margin-left: 5px;
 width:300px;
}

–>

</STYLE>

<title>无标题文档</title>
<body>

 
<div id=top>顶部</div>

<div id=index>

<div id=left>中间左边</div>

<div id=middle>中间</div>

<div id=right>中间右边</div></div>

<div id=bottom>底部</div>

</div>

</body>
</html>



发表评论

您的电子邮箱地址不会被公开。

5 + 2 =