- 浏览: 155917 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 356<meta name="viewport&qu ... -
web前端页面性能优化
2014-05-05 14:23 602web前端页面性能优化 ... -
在CSS中定义a:link、a:visited、a:hover、a:active顺序
2014-05-05 14:00 709http://blog.snsgou.com/post-2.h ... -
提高网站打开速度的7大秘籍
2014-04-25 11:11 557提高网站打开速度的7大秘籍 http://lusongs ... -
PNG8和PNG24的区别
2014-04-25 10:35 1061PNG8和PNG24的区别 内容图片的大小的优化,告诉大 ... -
web前端页面性能优化小结
2014-04-25 10:21 643web前端页面性能优化小 ... -
LABjs、RequireJS、SeaJS 哪个最好用?为什么?
2014-03-14 11:15 596LABjs、RequireJS、SeaJS 哪 ... -
CSS Sticky Footer: 完美的CSS绝对底部
2013-09-04 17:42 658CSS Sticky Footer: 完美的CSS绝对底部 ... -
《弹性+固宽布局》
2013-09-04 11:32 730《弹性+固宽布局》 在 ... -
前端布局
2013-03-20 11:59 686网页布局; http://www.subcide.com ... -
Web前端
2012-11-06 15:57 670HTML5迟来的API:Page Visibility ... -
腾讯Web前端
2012-11-06 15:55 0日期格式化:System.out.println(new ...
相关推荐
接下来是流体布局(Fluid Layout),它通过百分比单位来定义元素的尺寸,使得页面可以随着浏览器窗口大小的变化而自适应调整。例如,设置一个宽度为100%的容器,无论屏幕大小如何,该容器都会占据整个视口。流体布局...
"基于Swift3.0的水平横向排布流体布局"是一个这样的自定义布局,它允许视图在屏幕上以水平方向流动,同时保持一定的弹性,即流体布局。这种布局在展示一系列元素,如卡片、图片或按钮时非常有用,特别是在响应式设计...
流体布局mooc网项目演示
最近做的一个分享话题,很短,pdf一共也就几页,讲的时候大概用了15分钟。有些个人理解可能存在偏差,暂做分享,有问题可留言~
流体布局使页面元素根据浏览器窗口大小自动调整,固定布局则元素尺寸固定,不随窗口变化,而响应式布局是当前的主流,能够适应不同设备和屏幕尺寸。 2. 布局模型:CSS布局模型有盒模型(Box Model)、Flexbox(弹性...
一个响应式网格框架,支持自动调整大小和混合固定/流体布局。 华夫饼从根本上是基于测量单位的概念,它将每个流体和固定元素缩放到“世界空间值”。 如果测量不是通过 natre、fluid 进行的,那么它可能会缩放到这...
流体布局使页面能适应不同屏幕尺寸,网格布局则提供了一种更灵活的多列布局方式,而响应式布局则解决了多设备适配的问题,确保网站在手机、平板和桌面电脑上都能良好显示。 4. **浮动与定位**:浮动(float)和定位...
布局通常涉及到流体布局、网格布局、定位布局等。流体布局使页面元素随着浏览器窗口大小的变化而自适应调整;网格布局则将页面分割成多个单元格,便于内容的对齐和分布;定位布局利用CSS的position属性(如static、...
SmartCSSGrid是一个强大的布局工具,它是基于现代CSS规范中的CSS Grid布局系统构建的。...开发者应当通过阅读提供的文档和实践示例来深入学习SmartCSSGrid的使用,以便在实际项目中充分利用其响应式和流体布局的优势。
本主题将深入探讨CSS布局的相关知识点,包括盒模型、定位机制、流体布局以及响应式设计等方面。 首先,我们需要理解CSS盒模型。这是CSS布局的基础,它定义了元素的尺寸是如何计算的。盒模型主要包括元素的content...
1. 流体布局:流体布局是一种基于百分比而非固定像素的布局方式。通过使用百分比单位,元素的宽度可以根据父容器的大小动态变化,确保在任何屏幕尺寸下都能保持相对的比例,实现自适应性。 2. 媒体查询:媒体查询是...
2. 布局模型:CSS布局模型包括盒模型、流体布局和响应式布局。盒模型是理解CSS布局的基础,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。流体布局则利用百分比实现元素的自适应宽度,适合...
固定布局适用于屏幕尺寸相对固定的场景,而流体布局则能让页面随浏览器窗口大小变化而自适应。随着移动设备的普及,响应式布局变得尤为重要,它能确保网页在不同设备上都能呈现出良好的用户体验。 此外,书中的实例...
这主要是因为CSS布局涉及的概念众多,包括盒模型、流体布局、网格系统、Flexbox和Grid布局等。 首先,盒模型是CSS布局的基础,它定义了元素的尺寸如何计算,包括内容区域、内边距、边框和外边距。理解这个模型对于...
3. **固定布局、流体布局与混合布局**:固定布局是指元素尺寸固定,不随浏览器窗口大小变化而变化;流体布局则相反,元素尺寸随浏览器窗口大小变化而动态调整。混合布局是两者的结合,通常结合JavaScript来实现,...
2. **流体布局**:流体布局是基于百分比的布局方式,使得页面能适应不同分辨率和屏幕尺寸,实现响应式设计。 3. **网格布局**:CSS Grid是一种二维布局系统,适用于创建复杂的、有弹性的网格结构,非常适合用于网站...
3. 布局基础:CSS布局主要包括流体布局、网格布局、定位布局等。流体布局使页面元素随浏览器窗口大小变化而自适应;网格布局利用grid属性创建二维网格系统;定位布局则通过position属性(如static、relative、...
3. 流体布局:流体布局是基于百分比的宽度,使得页面能适应不同屏幕尺寸。`width: 百分比;`和`max-width`属性常用于实现流体布局。 接下来,我们讨论一些常见的布局模式: 4. 居中布局:可以使用负margin、`...
4. **布局模式**:`DIV+CSS`布局主要有三种主要模式:流体布局、固定布局和响应式布局。流体布局使用百分比定义宽度,能自适应不同屏幕尺寸;固定布局则使用像素单位,适用于固定大小的屏幕;响应式布局则根据设备...