您现在的位置:首页 >> 前端 >> 内容

css页面左中右分栏布局两种方式示例代码

时间:2013/11/18 10:55:37 点击:

  核心提示:以下代码复制粘贴即可使用:示例一:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN https://www.w3.org/TR/x...
以下代码复制粘贴即可使用:

示例一:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="https://www.w3.org/1999/xhtml">  
<head>  
<meta charset="gb2312" />  
<style type="text/css">  
.page_center {  
    width:100%;  
}  
#nav {  
    background-color:red;  
    height:20px;  
}  
#left {  
    width:120px;  
    background-color:green;  
    position:absolute;  
}  
#middle {  
    background-color:yellow;  
}  
#right {  
    width:120px;  
    background-color:green;  
    position:absolute;  
    top:0;  
    right:0;  
}  
#foot {  
    background-color:pink;  
}  
#main {  
    position:relative;  
}  
</style>  
</head>  
<body>  
<p id="nav" class="page_center">上边</p>  
<p id="main" class="page_center">  
  <p id="left">左边</p>  
  <p id="middle"> 中间部分</p>  
  <p id="right">右边</p>  
</p>  
<p id="foot" class="page_center">底边</p>  
</body>  
</html>  
示例2:
[html]  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="https://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled Document</title>  
</head>  
<style type="text/css">  
#left{  
    float:left; width:240px; height:500px; background:#0C9;  
}  
#right{  
    float:right;width:240px;height:500px; background:#933;  
}  
#center{  
    height:500px;background:#06C;  
}  
</style>  
<body>  
<p id="left" >左边</p>  
<p id="right" >右边</p>  
<p id="center" style="">中间</p>  
</body>  
</html>  
 

 

 

<span style="font-size: 14px;  font-family: Arial, Helvetica, sans-serif;"><strong></strong></span>  

 


Tags:CS SS S页 页面 
作者:网络 来源:不详