css页面中常见左中右分栏布局的两种实现方式
导读：收集整理的这篇文章主要介绍了css页面中常见左中右分栏布局的两种实现方式，觉得挺不错的，现在分享给大家，也给大家做个参考。 以下代码复制粘贴即可使用： 示例一： 复制代码代码如下: <!DOCTYPE htML PubLIC...
收集整理的这篇文章主要介绍了css页面中常见左中右分栏布局的两种实现方式，觉得挺不错的，现在分享给大家，也给大家做个参考。 以下代码复制粘贴即可使用： 示例一：
复制代码代码如下:
!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：
复制代码代码如下:
!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>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css页面中常见左中右分栏布局的两种实现方式
本文地址： https://pptw.com/jishu/584907.html