css页面中常见左中右分栏布局的两种实现方式
css页面中常见左中右分栏布局的两种实现方式
发布时间:2016-12-27 来源:查字典编辑
摘要:以下代码复制粘贴即可使用:示例一:.page_center{width:100%;}#nav{background-color:red;he...

以下代码复制粘贴即可使用:

示例一:

<!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">上边</div>

<div id="main">

<div id="left">左边</div>

<div id="middle"> 中间部分</div>

<div id="right">右边</div>

</div>

<div id="foot">底边</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">中间</div>

</body>

</html>

<span><strong></strong></span>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类