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

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

来源：自学PHP网时间：2015-04-14 14:51 作者：阅读:次

[导读] 以下代码复制粘贴即可使用：示例一：!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 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>

修改数据-设置一个元素的HTML内容 - html/css语言栏

CSS+DIV实现圆角 - html/css语言栏目：html.css - 自学

子栏目

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

最新评论

添加评论

更多文章推荐

添加评论