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

当前位置 : 首页 > 网页制作 > CSS > css页面左中右分栏布局两种方式示例代码

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

来源: 作者: 时间:2016-01-28 09:27
以下代码复制粘贴即可使用:示例一:!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 or
以下代码复制粘贴即可使用:
示例一:
 
<!DOCTYPE  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 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>  
<div id="nav" class="page_center">上边</div>  
<div id="main" class="page_center">  
  <div id="left">左边</div>  
  <div id="middle"> 中间部分</div>  
  <div id="right">右边</div>  
</div>  
<div id="foot" class="page_center">底边</div>  
</body>  
</html>  
示例2:
[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=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>  
<div id="left" >左边</div>  
<div id="right" >右边</div>  
<div id="center" style="">中间</div>  
</body>  
</html>  
 

 

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

 


Tag:
网友评论

<