css页面左中右分栏布局两种方式示例代码 - 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 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>  

 


返回顶部
跳到底部

Copyright 2011-2024 南京追名网络科技有限公司 苏ICP备2023031119号-6 乌徒帮 All Rights Reserved Powered by Z-BlogPHP Theme By open开发

请先 登录 再评论,若不是会员请先 注册