css页面左中右分栏布局示例_ Div+Css教程-查字典教程网
css页面左中右分栏布局示例
css页面左中右分栏布局示例
发布时间:2017-01-07 来源:查字典编辑
摘要:body{background-color:silver;}.page_center{width:600px;margin:20pxauto...

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

<title></title>

<meta charset="gb2312" />

<style type="text/css">

body{

background-color:silver;

}

.page_center {

width:600px;

margin:20px auto;

}

#nav {

background-color:yellow;

height:120px;

}

#left {

width:120px;

background-color:pink;

position:absolute;

}

#middle {

width:360px;

background-color:gray;

margin-left:120px;

}

#right {

width:120px;

background-color:green;

position:absolute;

top:0;

right:0;

}

#foot {

background-color:blue;

}

#main {

position:relative;

background-color:green;

background-image:url(5.gif);

background-repeat:repeat-y;

background-position:left;

}

</style>

<script type="text/javascript">

</script>

</head>

<body>

<div id="nav" class="page_center">

000</div>

<div id="main" class="page_center">

<div id="left">

111<br /><br /><br /><br /><br /><br />

</div>

<div id="middle">

222<br /><br />主<br /><br />

<br /><br />要<br /><br />内<br /><br /><br /><br /><br />容<br /><br /><br /><br /><br />主<br /><br /><br /><br />要<br /><br />

</div>

<div id="right">

333<br /><br /><br /><br /><br /><br /><br />

</div>

</div>

<div id="foot" class="page_center">

444<br /><br /><br /><br /><br /><br />

</div>

</body>

</html>

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