CSS布局-有头有尾左中右三分
要实现一个类似框架结构，有头有尾，中间部分要分菜单、分隔条和内容三部分。
写好的效果图如下：
要实现一个类似框架结构，有头有尾，中间部分要分菜单、分隔条和内容三部分。
写好的效果图如下：
下面是实现代码：（CSS和HTML放一个文件了）
Code
<!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>Untitled</title> <script src="jquery.js" type="text/javascript"></script><!--STYLE--><style>
div
{}{ margin: 0px;
}.divWrap{}{height:100%;background:#ccc;margin-left:205px;}.divWrap .divleft{}{ float:left; background:#FF7400; height:100%; width:205px; margin-left:-205px; display:inline; /**//*下面这两行解决IE6双倍Margin的问题*/ position:relative;}.divWrap .divright{}{ float:right; background:#fefefe; height:100%; width:100%;}.divWrap .divright .divInnerWrap{}{ height:100%; margin-left:10px;}.divWrap .divright .divInnerWrap .divInnerLeft{}{ position:relative; float:left; background:red; height:100%; width:10px; margin-left:-10px; border:solid 1px red;}.divWrap .divright .divInnerWrap .divInnerRight{}{ float:right; background:white; height:100%; width:100%;}.divWrap .divright .divInnerWrap .divInnerRight .divContainer{}{ margin 0px; /**//*color:blue;*/}.dheader{}{background:#eee;height:50px;}.dfooter{}{background:#eee;height:50px;}body{}{ margin: 0px;}a.line{}{ color:blue; cursor:hand;}
</style></head><body><!--HTML--> <div id="all" > <div class="dheader">header </div> <div class="divWrap"> <div class="divleft">我是左边<br><br><br><br><br></div> <div class="divright"> <div class="divInnerWrap"> <div class="divInnerLeft"><a href="#" class="line">></a></div> <div class="divInnerright"> <div class="divContainer"> 这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀 </div> </div> <div style="clear:both"></div> </div> </div> <div style="clear:both"></div> </div> <div class="dfooter">footer </div></div> <!--JS--><script stype="text/javascript"> var height = Math.max(document.body.clientHeight, document.documentElement.clientHeight); height = height - 100; $("#all").css("height",height + 'px');</script></body></html>
QQ：273352165
evlon#126.com
转载请注明出处。
浙公网安备 33010602011771号