你所在位置:首页html+css → css页面左中右分栏布局两种方式示例代码

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

发布时间:2019-07-03 以下代码复制粘贴即可使用:

示例一:

 

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

 



上一篇:CSS+DIV实现圆角
下一篇:修改数据