CSS布局-有头有尾左中右三分

要实现一个类似框架结构，有头有尾，中间部分要分菜单、分隔条和内容三部分。

写好的效果图如下：

CSS布局-有头有尾左中右三分

下面是实现代码：（CSS和HTML放一个文件了）

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS布局-有头有尾左中右三分

<html xmlns="http://www.w3.org/1999/xhtml" >
CSS布局-有头有尾左中右三分

<head>

<title>Untitled</title>
CSS布局-有头有尾左中右三分

CSS布局-有头有尾左中右三分

<style>

div

{

}{

margin: 0px;
CSS布局-有头有尾左中右三分

}

.divWrap{

}{

height:100%;
CSS布局-有头有尾左中右三分

background:#ccc;
CSS布局-有头有尾左中右三分

margin-left:205px;
CSS布局-有头有尾左中右三分

}

.divWrap .divleft{ CSS布局-有头有尾左中右三分

}{

float:left;
CSS布局-有头有尾左中右三分

background:#FF7400;
CSS布局-有头有尾左中右三分

height:100%;
CSS布局-有头有尾左中右三分

width:205px;
CSS布局-有头有尾左中右三分

margin-left:-205px;
CSS布局-有头有尾左中右三分

display:inline; /**//*下面这两行解决IE6双倍Margin的问题*/
CSS布局-有头有尾左中右三分

position:relative;
CSS布局-有头有尾左中右三分

}

.divWrap .divright{ CSS布局-有头有尾左中右三分

}{

float:right;
CSS布局-有头有尾左中右三分

background:#fefefe;
CSS布局-有头有尾左中右三分

height:100%;
CSS布局-有头有尾左中右三分

width:100%;
CSS布局-有头有尾左中右三分

}

.divWrap .divright .divInnerWrap
CSS布局-有头有尾左中右三分

{

}{

height:100%;
CSS布局-有头有尾左中右三分

margin-left:10px;
CSS布局-有头有尾左中右三分

}

.divWrap .divright .divInnerWrap .divInnerLeft
CSS布局-有头有尾左中右三分

{

}{

position:relative;
CSS布局-有头有尾左中右三分

float:left;
CSS布局-有头有尾左中右三分

background:red;
CSS布局-有头有尾左中右三分

height:100%;
CSS布局-有头有尾左中右三分

width:10px;
CSS布局-有头有尾左中右三分

margin-left:-10px;
CSS布局-有头有尾左中右三分

border:solid 1px red;
CSS布局-有头有尾左中右三分

}

.divWrap .divright .divInnerWrap .divInnerRight
CSS布局-有头有尾左中右三分

{

}{

float:right;
CSS布局-有头有尾左中右三分

background:white;
CSS布局-有头有尾左中右三分

height:100%;
CSS布局-有头有尾左中右三分

width:100%;
CSS布局-有头有尾左中右三分

}

.divWrap .divright .divInnerWrap .divInnerRight .divContainer
CSS布局-有头有尾左中右三分

{

}{

margin 0px;
CSS布局-有头有尾左中右三分

/**//*color:blue;*/
CSS布局-有头有尾左中右三分

}

.dheader{

}{

background:#eee;
CSS布局-有头有尾左中右三分

height:50px;
CSS布局-有头有尾左中右三分

}

.dfooter{

}{

background:#eee;
CSS布局-有头有尾左中右三分

height:50px;
CSS布局-有头有尾左中右三分

}

body

{

}{

margin: 0px;
CSS布局-有头有尾左中右三分

}

a.line

{

}{

color:blue;
CSS布局-有头有尾左中右三分

cursor:hand;
CSS布局-有头有尾左中右三分

}

</style>

</head>

<body>

CSS布局-有头有尾左中右三分

<div id="all" >
CSS布局-有头有尾左中右三分

<div class="dheader">header
CSS布局-有头有尾左中右三分

</div>

<div class="divWrap">
CSS布局-有头有尾左中右三分

<div class="divleft">我是左边<br><br><br><br><br></div>
CSS布局-有头有尾左中右三分

<div class="divright">
CSS布局-有头有尾左中右三分

<div class="divInnerWrap">
CSS布局-有头有尾左中右三分

<div class="divInnerLeft"><a href="#" class="line">></a></div>
CSS布局-有头有尾左中右三分

<div class="divInnerright">
CSS布局-有头有尾左中右三分

<div class="divContainer">
CSS布局-有头有尾左中右三分

这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀
CSS布局-有头有尾左中右三分

</div>

<div style="clear:both"></div>
CSS布局-有头有尾左中右三分

</div>

<div style="clear:both"></div>
CSS布局-有头有尾左中右三分

</div>

<div class="dfooter">footer
CSS布局-有头有尾左中右三分

</div>

var height = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
CSS布局-有头有尾左中右三分

height = height - 100;
CSS布局-有头有尾左中右三分

$("#all").css("height",height + 'px');
CSS布局-有头有尾左中右三分

</script>

</body>

</html>

转载于:https://www.cnblogs.com/evlon/archive/2008/11/22/1338914.html