- 浏览: 148977 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (137)
- JavaScript (23)
- get post (0)
- SSH (4)
- Hibernate (1)
- cmd (2)
- 火狐 IE (1)
- 中英文环境模板下载 (1)
- 日期 (0)
- 其他总结 (5)
- 正则校验 (3)
- Sql Server (0)
- FreeMarker (1)
- 继承 (1)
- SQL (2)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (1)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (0)
- 解决int和Integer不能互转 (0)
- 原子类 (1)
- Final,finally,finalize的区别 (1)
- Web前端 (12)
- Reader InputStream (1)
- 线程 (1)
- JDBC (1)
- AJAX (3)
- Linux (2)
- 素数 (1)
- 接口-----继承 (1)
- 数据库查询性能优化 (1)
- Spring MVC3 深入了解 (1)
- JS (18)
- log4j简介 (1)
- Java序列化的机制和原理 (0)
- allowTransparency属性 (1)
- 测试类 (1)
- CSS (14)
- JQuery (10)
- 多线程 (1)
- 数据库 (2)
- Spring 注解 (1)
- JSTL标签库 (1)
- HTML (8)
- 界面设计 (4)
- 测试 (4)
- 职业生涯 (1)
- 数据可视化 (1)
- UI设计 (3)
- eclipse怎样生成javadoc (2)
- redis memcache 比较 (1)
- Windows 8系统IE10无法安装Flash Player插件的解决办法 (1)
- IE7 问题 (1)
- 常用JS验证 (1)
- Hadoop,MapReduce学习步骤 (1)
- 开始-运行-命令大全 (1)
- jQuery与ExtJS优缺点比较 (1)
- Oracle (1)
- 文档转换 (1)
- Maven与Ant比较 (1)
最新评论
-
谁说我不是会员:
很给力的文章,通俗易懂
Get请求和Post请求的区别 -
Spirit_eye:
请问一个图片按钮怎么置灰
按钮置灰跟按钮不显示
流体布局
在我的另一篇文章《弹性+固宽布局》http://linhui-dragon.iteye.com/admin/blogs/1936267中,我介绍了弹性加最小固定宽度的一种布局方案,现在介绍另一种布局方案---弹性流体布局。
那种方案其实就是这种布局的变通应用。弹性布局最大的优点就是能充分利用屏幕空间。无论客户端分辩率多大,都能自动适应宽度的变化。
看看上面这幅图片,这是国外的一个网站,它本身是固定宽度布局的,我们的布局就以这幅图为基础来讲解的。当然,我不会全面介绍如何制作这个完整页面,我只针对重点做一下讲解。
其实做一个弹性布局,相对来说是比较简单的,但是这种布局虽简单,可是对于细节上的把握才是这种布局的精髓。弹性布局虽说有这么好的优点,可是却有比较致命的缺陷:
1. 如果不对这种布局设置一个最小宽度,当用户缩小窗口到足够小时,会对布局产生致命的影响。造成严重影响布局错位。
2. 当一个页面弹性布局时,对于里面的图片会产生巨大的影响。因为到目前为至,还没有解决图片随百分比缩放的问题。所以这篇文章对于布局的讲解可能还相对少些,而更多的是解决上面的两个问题,我相信只要解决了上面的两个问题,这种布局相对来说就容易多了。
一、解决最小宽度
一般弹性布局都是利用百分比来设置一个容器的宽度。这样就能自动适应屏幕的宽度了。但是宽度值不能完全由用户自由缩放,我们必须在这个百分比宽度限制其最小宽度,当用户缩小窗口到一定值,就不让窗口再缩放了。
熟悉CSS的朋友都知道,有这样四个属性:
Min-width:最小宽度
Max-width:最大宽度
Min-height:最小高度
Max-height:最大高度
这四个属性刚好能解决这个问题,是不是比较欣喜,可是,别忙,虽说它们能解决这个问题,可是却有一个严重的问题,用户使用最多的浏览器IE6却不支持这几个属性,这是一件非常糟糕的事情。我们总不能丢弃用户最多的浏览器吧!
目前网上比较流行的有四种方法来解决让IE6支持这四种属性:
1. 在CSS中expression来设置最小宽度,比较费内存。
2. 用嵌套DIV,然后用margin偏移模仿实现,多冗余结构。
3. 用JQ框架实现,为一个属性加一个JS框架,有点不划算。
4. 用纯JS代码实现。
前面三种都有劣势,请各自选择最合适的方法,我偏重于最后一种,这是国外的一个牛人实现的,相关例子可以看这儿:
http://www.doxdesk.com/software/js/minmax.html
有了这个JS文件,你只需要在头部调用这个JS文件就可以了。
PS:在演示模型中为了方便,我将这个JS作为内部引用的方式调用,你们在实际应用中将这个JS文件新建为一个JS外部文件,如下方式调用:
<script type="text/javascript" src="minmax.js"></script>
我们在样式表中将min-width应用到#wrapper和#footer这两个容器就行了,并分别设置它们宽度为100%,OK,现在我们解决了最小宽度的问题。[/size]
二、解决弹性图片
我们看看上面哪张图片,要做成弹性布局,就要解决页头图片的动态缩放。而这是一张图片,我们都知道图片是没有办法随比例缩放的,该怎么办呢?
我们可以换一个思维方式,将这张图片在PS中做一点改动,我们可以将这张图片分割成左右两部分,并将它们合并成一张图片。如下图所示:
第一图片在容器中以背景定位的方式左上定位,而第二张片则右下定位,用两个容器分装两张图片,内层的图片级别比外层图片级别高,它会浮动到第一张图片上盖住它,当然这第二张要做成透明底色的png或gif图片,因为png-24位透明图片在IE6下不受支持,所以我们改成PNG-8位的透明图片,这样虽说图片质量上有点影响,但可以保证在IE6中畅通无阻。
所以页头的结构层应该是如下的样子:
<div id="header"> <div id="inhead"> <p>页头内容</p> </div> </div>
针对这样的结构我们可以写出如下的样式:
外层样式:
#header{ height:150px; width:100%; background:#000 url(image/header-bg.png) no-repeat left top; }
内层样式:
#inhead{ height:150px; width:100%; background:url(image/header-bg.png) no-repeat right bottom; text-align:center; color:#fff; }
经过这样的改进后,我们的页头就做成弹性的图片,它在浏览器中显示就应该如下:
这样,一个弹性布局就算基本完成了。最终的效果如下图所示:
后记
最后不得不提的是,这种布局是有局限性的,并不是每个网页都能适合用这种方式来布局。因为流体弹性布局本身存在的缺陷。它不能用于设计得太过华丽、图片丰富的页面,因为有些图片是没有办法做到象上图哪样伸缩的。我想正是因为这个原因,它限制了这种布局的广泛流传。
演示:
运行代码框
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹性布局设计(冰极峰原创)</title> <script type="text/javascript"> // JavaScript Document // minmax.js: make IE5+/Win support CSS min/max-width/height // version 1.0, 08-Aug-2003 // written by Andrew Clover <and@doxdesk.com>, use freely /*@cc_on @if (@_win32 && @_jscript_version>4) var minmax_elements; minmax_props= new Array( new Array('min-width', 'minWidth'), new Array('max-width', 'maxWidth'), new Array('min-height','minHeight'), new Array('max-height','maxHeight') ); // Binding. Called on all new elements. If <body>, initialise; check all // elements for minmax properties function minmax_bind(el) { var i, em, ms; var st= el.style, cs= el.currentStyle; if (minmax_elements==window.undefined) { // initialise when body element has turned up, but only on IE if (!document.body || !document.body.currentStyle) return; minmax_elements= new Array(); window.attachEvent('onresize', minmax_delayout); // make font size listener em= document.createElement('div'); em.setAttribute('id', 'minmax_em'); em.style.position= 'absolute'; em.style.visibility= 'hidden'; em.style.fontSize= 'xx-large'; em.style.height= '5em'; em.style.top='-5em'; em.style.left= '0'; if (em.style.setExpression) { em.style.setExpression('width', 'minmax_checkFont()'); document.body.insertBefore(em, document.body.firstChild); } } // transform hyphenated properties the browser has not caught to camelCase for (i= minmax_props.length; i-->0;) if (cs[minmax_props[i][0]]) st[minmax_props[i][1]]= cs[minmax_props[i][0]]; // add element with properties to list, store optimal size values for (i= minmax_props.length; i-->0;) { ms= cs[minmax_props[i][1]]; if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') { st.minmaxWidth= cs.width; st.minmaxHeight= cs.height; minmax_elements[minmax_elements.length]= el; // will need a layout later minmax_delayout(); break; } } } // check for font size changes var minmax_fontsize= 0; function minmax_checkFont() { var fs= document.getElementById('minmax_em').offsetHeight; if (minmax_fontsize!=fs && minmax_fontsize!=0) minmax_delayout(); minmax_fontsize= fs; return '5em'; } // Layout. Called after window and font size-change. Go through elements we // picked out earlier and set their size to the minimum, maximum and optimum, // choosing whichever is appropriate // Request re-layout at next available moment var minmax_delaying= false; function minmax_delayout() { if (minmax_delaying) return; minmax_delaying= true; window.setTimeout(minmax_layout, 0); } function minmax_stopdelaying() { minmax_delaying= false; } function minmax_layout() { window.setTimeout(minmax_stopdelaying, 100); var i, el, st, cs, optimal, inrange; for (i= minmax_elements.length; i-->0;) { el= minmax_elements[i]; st= el.style; cs= el.currentStyle; // horizontal size bounding st.width= st.minmaxWidth; optimal= el.offsetWidth; inrange= true; if (inrange && cs.minWidth && cs.minWidth!='0' && cs.minWidth!='auto' && cs.minWidth!='') { st.width= cs.minWidth; inrange= (el.offsetWidth<optimal); } if (inrange && cs.maxWidth && cs.maxWidth!='none' && cs.maxWidth!='auto' && cs.maxWidth!='') { st.width= cs.maxWidth; inrange= (el.offsetWidth>optimal); } if (inrange) st.width= st.minmaxWidth; // vertical size bounding st.height= st.minmaxHeight; optimal= el.offsetHeight; inrange= true; if (inrange && cs.minHeight && cs.minHeight!='0' && cs.minHeight!='auto' && cs.minHeight!='') { st.height= cs.minHeight; inrange= (el.offsetHeight<optimal); } if (inrange && cs.maxHeight && cs.maxHeight!='none' && cs.maxHeight!='auto' && cs.maxHeight!='') { st.height= cs.maxHeight; inrange= (el.offsetHeight>optimal); } if (inrange) st.height= st.minmaxHeight; } } // Scanning. Check document every so often until it has finished loading. Do // nothing until <body> arrives, then call main init. Pass any new elements // found on each scan to be bound var minmax_SCANDELAY= 500; function minmax_scan() { var el; for (var i= 0; i<document.all.length; i++) { el= document.all[i]; if (!el.minmax_bound) { el.minmax_bound= true; minmax_bind(el); } } } var minmax_scanner; function minmax_stop() { window.clearInterval(minmax_scanner); minmax_scan(); } minmax_scan(); minmax_scanner= window.setInterval(minmax_scan, minmax_SCANDELAY); window.attachEvent('onload', minmax_stop); @end @*/ </script> <style type="text/css"> /*本例中运用到一个永远固定到页脚的footer容器,这个层是独立于主内容区的.*/ *{margin:0;padding:0;} a:link,a:visited{color:orange;font-weight:bold;} html, body, #wrapper {height: 100%;font-size:12px;} #wrapper{width:100%;background:#777;min-width:960px;} body > #wrapper {height:auto; min-height:100%;} #main {padding-bottom: 54px;}/* 必须使用和footer相同的高度,最小宽度ie6中加JS解决 */ #header{height:148px;width:100%;text-align:center;color:#fff;background:#000 url(http://images.cnblogs.com/cnblogs_com/binyong/tanxin/header-bg.png) no-repeat left top;} #inhead{height:148px;width:100%;text-align:center;color:#fff;background:url(http://www.blueidea.com/articleimg/2009/05/6692/header-bg.png) no-repeat right bottom;} h3{font-size:14px;line-height:90px;} #header p{font-size:12px;line-height:30px;} #footer { position: relative; margin-top: -54px; /* footer高度的负值 */ height: 54px;/* footer高度*/ width:100%; clear:both; background:#000; text-align:center; color:#fff; min-width:960px; } #footer p{line-height:26px;} #content{background:#999;width:80%;margin:0 auto;height:654px;} #content p{line-height:30px;padding:0 30px;color:#fff;} /*说明: 需要注意的就是#main的padding值、footer的高度和负margin值,需要保持一致。下面是著名的万能float闭合Clearfix Hack*/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ </style> </head> <body> <div id="wrapper"> <div id="main" class="clearfix"> <div id="header"> <div id="inhead"> <h3>弹性流体布局</h3> <p>页头背景可平铺整个浏览器宽度,而正文内容则始终居中显示,不管分辩率是多大。</p> </div> </div> <div id="content"> <p>本页面演示了两个比较重要的技巧:最小宽度值和弹性图片.</p> <p>弹性布局是用到min-width这个属性,但这个属性在IE6下不受支持,因此加入了老外的一个JS脚本,这个脚本让IE6也能支持最小,最大宽度(高度)四个属性.</p> <p> </p> <p>弹性布局其实最难的还不是布局,而是里面的图片如何做到自适应,也就是说让图片也变得弹性起来。这是这种布局时要最优先考虑的事情。</p> <p>页头图片就是一个弹性图片的典型应用,你可以缩小一下窗口看看。</p> <p>相关文章链接:《<a href="http://www.cnblogs.com/binyong/archive/2009/05/07/1451319.html">弹性+固宽布局</a>》</p> </div> </div> </div> <div id="footer"> <p>我是浮动的始终固定在底部的DIV,无论中间的文字内容高度是否不够一屏,我还是能居底显示,</p> <p>当中间内容超过一屏时,我又可以向下浮动哟</p> </div> </body> </html>
来自:http://www.blueidea.com/tech/web/2009/6692.asp
发表评论
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2014-05-06 11:07 314<meta name="viewport&qu ... -
web前端页面性能优化
2014-05-05 14:23 574web前端页面性能优化 ... -
在CSS中定义a:link、a:visited、a:hover、a:active顺序
2014-05-05 14:00 658http://blog.snsgou.com/post-2.h ... -
提高网站打开速度的7大秘籍
2014-04-25 11:11 510提高网站打开速度的7大秘籍 http://lusongs ... -
PNG8和PNG24的区别
2014-04-25 10:35 1028PNG8和PNG24的区别 内容图片的大小的优化,告诉大 ... -
web前端页面性能优化小结
2014-04-25 10:21 581web前端页面性能优化小 ... -
LABjs、RequireJS、SeaJS 哪个最好用?为什么?
2014-03-14 11:15 553LABjs、RequireJS、SeaJS 哪 ... -
CSS Sticky Footer: 完美的CSS绝对底部
2013-09-04 17:42 615CSS Sticky Footer: 完美的CSS绝对底部 ... -
《弹性+固宽布局》
2013-09-04 11:32 689《弹性+固宽布局》 在 ... -
前端布局
2013-03-20 11:59 604网页布局; http://www.subcide.com ... -
Web前端
2012-11-06 15:57 583HTML5迟来的API:Page Visibility ... -
腾讯Web前端
2012-11-06 15:55 0日期格式化:System.out.println(new ...
相关推荐
基于swft3.0的 水平横向排布流体布局
NULL 博文链接:https://maoting.iteye.com/blog/1667254
最近做的一个分享话题,很短,pdf一共也就几页,讲的时候大概用了15分钟。有些个人理解可能存在偏差,暂做分享,有问题可留言~
一个响应式网格框架,支持自动调整大小和混合固定/流体布局。 华夫饼从根本上是基于测量单位的概念,它将每个流体和固定元素缩放到“世界空间值”。 如果测量不是通过 natre、fluid 进行的,那么它可能会缩放到这...
合理使用负边距技术,可以帮助我们创建很多有意思的布局,比如自适应浏览器宽度的流体布局。
介绍流体布局的实现原理和方法 自适应css布局
流体布局 响应设计 看起来伟大在台式机上 平板电脑和手机 两列 多工作站系统Themer 功能定制这个模板的外观和感觉来匹配你的网站 引导组件集成 按钮 按钮组 工具提示 泡芙烤盘再放 插入 崩溃 标签和徽章 吨的字体和...
流体布局:使用“堆叠”,即使主题具有可变宽度,也可以生成将文本流动到主题维度的页面。您可以构建流动的列,灵活的行和图像的图块。 嵌套对象:在列内的行内建立列。或者将一堆对象放在一个盒子里。Stacks几乎...
第二部分主要讨论了基于CSS 来实现网页基本布局的相关概念与技术,包括浮动、流体布局等。本书最后还给出了一个真实的案例,将本书的所有内容进行了综合讨论。 本书适合于各层次Web 开发人员、设计人员和测试人员...
第二部分主要讨论了基于CSS 来实现网页基本布局的相关概念与技术,包括浮动、流体布局等。本书最后还给出了一个真实的案例,将本书的所有内容进行了综合讨论。本书适合于各层次Web 开发人员、设计人员和测试人员...
是基于flexbox的下一代网页布局框架: 。 它使用与相同的响应式和CSS类名称。 版本的用于检测对flexbox的支持。 Chrome,所有版本的iOS,Safari 3 +, +, +和 +的所有版本均支持flexbox布局。 除了使用固定布局的...
jQuery瀑布流布局带分页效果,实现瀑布流布局主要分为两个部分,实现流体布局,这里我们采用绝对定位的方式实现,而是滚动触发的 Ajax 分页,这里采用 jQuery 的 Ajax 实现。
2.9 爱之空气——流体布局 2.10 谷香——食品主题设计 2.11 城市——建筑主题设计 2.12 “卡通版”禅意花园——特色效果 2.13 收音机——特色效果 2.14 杀手风格——特色效果 2.15...
2.9 爱之空气——流体布局 2.10 谷香——食品主题设计 2.11 城市——建筑主题设计 2.12 “卡通版”禅意花园——特色效果 2.13 收音机——特色效果 2.14 杀手风格——特色效果 2.15 海底世界——特色...
2.9 爱之空气——流体布局 2.10 谷香——食品主题设计 2.11 城市——建筑主题设计 2.12 “卡通版”禅意花园——特色效果 2.13 收音机——特色效果 2.14 杀手风格——特色效果 2.15 海底世界——特色...
流体正方形可在流体布局中保留单元的正方形比例。 使用 CSS 媒体查询,列数也会减少以适应浏览器或设备宽度。 它适用于所有现代桌面浏览器。 媒体查询被写入移动优先。 IE8 不支持媒体查询,所以临时包含了 css3-...
合理使用负边距技术,可以帮助我们创建很多有意思的布局,比如自适应浏览器宽度的流体布局。国外关于使用负边距创建这类布局的技术文档,我看到的最早是04年 Ryan Brill 发表在 A List Apart 上的 《Creating Liquid...