您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > CSS中最基本的外框架

CSS中最基本的外框架

文章來源：365jz.com 點擊數(shù)：144 更新時間：2009-05-17 23:06 參與評論

以下為引用的內(nèi)容：
<!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>
<style type="text/css">
*
{
font-size:12px;
font-family:verdana;
margin:0px;/*--定義元素周圍的空間*/
padding:0px;/*--定義元素邊框與元素內(nèi)容之間的空白*/
}
#body
{
position:relative;
width:85%;
margin:3px auto;/*上下,左右,這里的左右就是居中*/
height:100%;
}
#sidebar /*左邊*/
{
position:absolute;
left:0;
top:0;
width:200px;
}
#right
{
width:240px;
position:absolute;
right:0;
top:0;
}
#center
{
margin:0 241px 0 201px;/*上右下左*/
}
#header,#footer
{
width:85%;
margin:0 auto;/*由瀏覽器設(shè)置*/
height:50px;
}
#sidebar,#right,#center,#header,#footer{border:solid 1px #000;}
#sidebar,#right,#center{height:780px;}
</style>
</head>
<body>
<div id="header">head</div>
<div id="body">
<div id="sidebar">left<br />left<br /></div>
<div id="center">center</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>