CSS布局一
2016-03-12 20:47
791 查看
CSS布局一
实例一(居中)
优化:使用我们的max-width:960px; 就不会出现滚动条了滴呀;
所有主流浏览器,包括IE7+在内都支持
实例二(宽度自适应)
在三列布局中,实现宽度自适应,
原理:左右连个div float left 和right 中间的不浮动
css:
效果:
实例二:(高度自适应)
高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,
下面一栏高度自适应用于显示内容
css(这样方法,不兼容ie6,啊~ie6 不兼容算了!不过这里又解决方案:http://www.cnblogs.com/2050/archive/2012/07/30/2615260.html)
实例三(多列等高)
修复前的效果
修复后的效果
固定布局:
流体布局:
实例一(居中)
div#container{ width:960px; height:650px; margin:0 auto; border:1px solid #ccc; /*就是说上下边距为0 左右自动,当浏览的大小大于600时,左右两边的margin平分大于出来的宽度*/ /*但是,如果小于的话,就会出现滚动条*/ }
优化:使用我们的max-width:960px; 就不会出现滚动条了滴呀;
所有主流浏览器,包括IE7+在内都支持
max-width属性;
实例二(宽度自适应)
在三列布局中,实现宽度自适应,
原理:左右连个div float left 和right 中间的不浮动
css:
body,div{ margin:0; paddding:0; } div{ height:200px; } .left{ float:left; width:100px; background:green; _margin-right:-3px; /*为了兼容我们ie的quirk模式*/ } .right{ float:right; width:100px; background:red; _margin-left:-3px; /*为了兼容我们ie的quirk模式*/ } .center{ background:black; margin:0 100px; _margin:0 97px; /*为了兼容我们ie的quirk模式*/ }
效果:
实例二:(高度自适应)
高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,
下面一栏高度自适应用于显示内容
css(这样方法,不兼容ie6,啊~ie6 不兼容算了!不过这里又解决方案:http://www.cnblogs.com/2050/archive/2012/07/30/2615260.html)
body,div{ margin:0; padding:0; } .top{ background:blue; height:100px; } .main{ background:green; width:100%; position:absolute; top:100px; bottom:0; }
实例三(多列等高)
body{ padding:0; margin:0; } .container{ margin:0 auto; width:600px; border:3px solid #ccc; overflow:hidden; } .left{ float:left; width:150px; background:blue; padding-bottom:2000px; margin-bottom:-2000px; } .right{ float:left; width:450px; background:green; padding-bottom:2000px; margin-bottom:-2000px; }
修复前的效果
修复后的效果
固定布局:
流体布局:
相关文章推荐
- 【牛腩】HTML+CSS基础了解
- CSS——relative
- CSS居中问题终极解决方案
- CSS——隐性改变display类型
- CSS--浏览器CSS Hack 收集
- CSS--填坑常用代码分享
- css中的display
- css中的content的使用
- 多个块标签float:left之后水平居中解决办法
- HTML, CSS学习笔记(完整版)
- [DIV/CSS] CSS3的content属性详解
- [DIV/CSS] CSS3的content属性详解
- CSS——字体缩写
- #001 CSS快速入门讲解
- CSS——元素分类
- CSS段落排版——缩进
- css技巧篇
- CSS文字排版——删除线
- CSS——权值
- 探究HTML与CSS:!important 和 @import 规则