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

写好的效果图如下:

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

 

 

下面是实现代码:(CSS和HTML放一个文件了)

 

 

CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分Code
CSS布局-有头有尾左中右三分<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS布局-有头有尾左中右三分
CSS布局-有头有尾左中右三分
<html xmlns="http://www.w3.org/1999/xhtml" >
CSS布局-有头有尾左中右三分
<head>
CSS布局-有头有尾左中右三分    
<title>Untitled</title>
CSS布局-有头有尾左中右三分    
<script src="jquery.js" type="text/javascript"></script>
CSS布局-有头有尾左中右三分
<!--STYLE-->
CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分
<style>CSS布局-有头有尾左中右三分
CSS布局-有头有尾左中右三分div
CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分
{CSS布局-有头有尾左中右三分}{
CSS布局-有头有尾左中右三分    margin
: 0px;
CSS布局-有头有尾左中右三分
}

CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分.divWrap
{CSS布局-有头有尾左中右三分}{
CSS布局-有头有尾左中右三分height
:100%;
CSS布局-有头有尾左中右三分background
:#ccc;
CSS布局-有头有尾左中右三分margin-left
:205px;
CSS布局-有头有尾左中右三分
}

CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分.divWrap .divleft
{CSS布局-有头有尾左中右三分}{
CSS布局-有头有尾左中右三分    float
:left;
CSS布局-有头有尾左中右三分    background
:#FF7400;
CSS布局-有头有尾左中右三分    height
:100%;
CSS布局-有头有尾左中右三分    width
:205px;
CSS布局-有头有尾左中右三分    margin-left
:-205px;
CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分    display
:inline;    /**//*下面这两行解决IE6双倍Margin的问题*/
CSS布局-有头有尾左中右三分    position
:relative;
CSS布局-有头有尾左中右三分
}

CSS布局-有头有尾左中右三分
CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分.divWrap .divright
{CSS布局-有头有尾左中右三分}{
CSS布局-有头有尾左中右三分    float
:right;
CSS布局-有头有尾左中右三分    background
:#fefefe;
CSS布局-有头有尾左中右三分    height
:100%;
CSS布局-有头有尾左中右三分    width
:100%;
CSS布局-有头有尾左中右三分
}

CSS布局-有头有尾左中右三分
CSS布局-有头有尾左中右三分.divWrap .divright .divInnerWrap
CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分
{CSS布局-有头有尾左中右三分}{
CSS布局-有头有尾左中右三分    height
:100%;
CSS布局-有头有尾左中右三分    margin-left
:10px;
CSS布局-有头有尾左中右三分
}

CSS布局-有头有尾左中右三分.divWrap .divright .divInnerWrap .divInnerLeft
CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分
{CSS布局-有头有尾左中右三分}{
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布局-有头有尾左中右三分
}

CSS布局-有头有尾左中右三分.divWrap .divright .divInnerWrap .divInnerRight
CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分
{CSS布局-有头有尾左中右三分}{
CSS布局-有头有尾左中右三分    float
:right;
CSS布局-有头有尾左中右三分    background
:white;
CSS布局-有头有尾左中右三分    height
:100%;
CSS布局-有头有尾左中右三分    width
:100%;
CSS布局-有头有尾左中右三分
}

CSS布局-有头有尾左中右三分.divWrap .divright .divInnerWrap .divInnerRight .divContainer
CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分
{CSS布局-有头有尾左中右三分}{
CSS布局-有头有尾左中右三分    margin 0px;
CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分    
/**//*color:blue;*/
CSS布局-有头有尾左中右三分
}

CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分.dheader
{CSS布局-有头有尾左中右三分}{
CSS布局-有头有尾左中右三分background
:#eee;
CSS布局-有头有尾左中右三分height
:50px;
CSS布局-有头有尾左中右三分
}

CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分.dfooter
{CSS布局-有头有尾左中右三分}{
CSS布局-有头有尾左中右三分background
:#eee;
CSS布局-有头有尾左中右三分height
:50px;
CSS布局-有头有尾左中右三分
}

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

CSS布局-有头有尾左中右三分
CSS布局-有头有尾左中右三分a.line
CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分
{CSS布局-有头有尾左中右三分}{
CSS布局-有头有尾左中右三分    color
:blue;
CSS布局-有头有尾左中右三分    cursor
:hand;
CSS布局-有头有尾左中右三分
}

CSS布局-有头有尾左中右三分
CSS布局-有头有尾左中右三分
</style>
CSS布局-有头有尾左中右三分
CSS布局-有头有尾左中右三分
</head>
CSS布局-有头有尾左中右三分
CSS布局-有头有尾左中右三分
<body>
CSS布局-有头有尾左中右三分
<!--HTML--> 
CSS布局-有头有尾左中右三分
<div id="all" >
CSS布局-有头有尾左中右三分    
<div class="dheader">header
CSS布局-有头有尾左中右三分    
</div>
CSS布局-有头有尾左中右三分    
<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"><href="#" class="line">&gt;</a></div>
CSS布局-有头有尾左中右三分                
<div class="divInnerright">
CSS布局-有头有尾左中右三分                    
<div class="divContainer">
CSS布局-有头有尾左中右三分                        这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀
CSS布局-有头有尾左中右三分                    
</div>
CSS布局-有头有尾左中右三分                
</div>
CSS布局-有头有尾左中右三分                
<div style="clear:both"></div>
CSS布局-有头有尾左中右三分            
</div>
CSS布局-有头有尾左中右三分        
</div>
CSS布局-有头有尾左中右三分        
<div style="clear:both"></div>
CSS布局-有头有尾左中右三分    
</div>
CSS布局-有头有尾左中右三分    
<div class="dfooter">footer
CSS布局-有头有尾左中右三分    
</div>
CSS布局-有头有尾左中右三分
</div>
CSS布局-有头有尾左中右三分 
CSS布局-有头有尾左中右三分
<!--JS-->
CSS布局-有头有尾左中右三分CSS布局-有头有尾左中右三分
<script stype="text/javascript">CSS布局-有头有尾左中右三分
CSS布局-有头有尾左中右三分    
var height = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
CSS布局-有头有尾左中右三分    height 
= height - 100;
CSS布局-有头有尾左中右三分    $(
"#all").css("height",height + 'px');
CSS布局-有头有尾左中右三分
</script>
CSS布局-有头有尾左中右三分
CSS布局-有头有尾左中右三分
CSS布局-有头有尾左中右三分
</body>
CSS布局-有头有尾左中右三分
</html>
CSS布局-有头有尾左中右三分

 

 

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

相关文章: