Css布局系列-综合应用

浏览数：28 / 时间：2015年06月09日

年前的最后一篇，也不知道明年该何去何从。我从事信息化系统研发，已有四余载干了这么长时间，感觉什么都会一点，你让我去干我也干了出来，但是，有时候要感觉自已什么都不会，唉。我准备明年想去好好做做前端，希望有人愿意收留吧！如果你们招人也可M我哦。

废话不说了进入正题结合前面几篇所讲的，今天给介绍信息化管理系统的布局，其实我见过信息化管理系统大多都是这种布局。请看效果图：

技术分享

先对效果图进行分析：

先从上往下看，可以分成上中下三个部份，再从左往右看分成左右二个部份；
从上往下看的三个部份的高度加起来正好等于可视化面高度，没有用脚本去计算其高度，所以说样式的写得好，会少写很多脚本代码。上下两个部份的高度是固定，中间部份的高度是自适应；
从左往右看，左边宽度是固定，右边宽度是自适应；

技术分享

综合上面的分析，其实都是前几篇介绍过了，只不过我在这里进行综合应用一下，让大家有一个更直观的感觉，在这里就不讲怎么去实现。下面贴出实现代码：

 *{margin: 0;padding: 0; box-sizing: border-box;}
  html, body{height: 100%;font-size: 14px;}
        
 .container{height: 100%;}
 .top, .bottom{width: 100%;height: 60px;background-color: rgb(152,210,250);}
 .bottom{position: absolute;bottom: 0;height: 30px;line-height: 30px;}
 .middle{width: 100%;top: 60px;background-color: rgb(250,250,250);position: absolute;bottom: 30px;overflow: auto;border: solid 1px red;}
        
 .left{width: 150px;position: absolute;top: 0;left: 0px;height: 100%;}
 .center{margin-left: 150px;height: 100%;overflow: hidden;}
        
 .menu{line-height: 40px;list-style: none;}
 .menu li{padding-left: 10px;border-bottom: solid 1px #ccc;cursor: pointer;}
 .menu li:hover{background-color: #f60;}

 <div class="container">
        <div class="top">
            XXX信息管理系统 原来CSS写得好，会少写很多js代码。
        </div>
        <div class="middle">
            <div class="left">
                <ul class="menu" id="menu">
                    <li src=‘http://www.cnblogs.com‘>cnblogs</li>
                    <li src=‘http://www.baidu.com‘>baidu</li>
                    <li src=‘http://www.163.com‘>163</li>
                    <li src=‘http://www.sina.com‘>sina</li>
                    <li src=‘http://www.mop.com‘>mop</li>
                </ul>
            </div>
            <div class="center">
                <iframe src="http://www.cnblogs.com" style="width: 100%; height: 100%;" id="ifrmContent"
                    frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">
            XXX版权归XXX所有。
        </div>
    </div>

综合应用示例源码

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Css布局系列-综合应用