CSS网页布局参考.docx

详谈CSS网页布局中容易发生的错误编码随着CSS网页布局越来越普及，国内大部分网站已经采用CSS网页布局的制作方法。在应用DIV+CSS编码时很容易犯一些错误，这里列举一些常见的错误，帮助新手朋友更好的学习与进步。一、检查HTML元素是否有拼写错误 是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用Dreamweaver的验证功能检查一下有无错误。 二、检查CSS是否正确: 检查一下有无拼写错误、是否忘记结尾的 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 三、确定错误发生的位置: 如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 四、利用border属性确定出错元素的布局特性: 使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 五、float元素的父元素不能指定clear属性: MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。 六、float元素务必指定width属性: 很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。 七、float元素不能指定margin和padding等属性: IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。 八、float元素的宽度之和要小于100%: 如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 九、是否重设了默认的样式? 某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。 十、是否忘记了写DTD: 如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头。CSS布局:让页底内容永远固定在底部我们在设计一些页面内容甚少的网页时（典型应用就是登陆页面），由于显示器的分辨率大，在正常情况下，假如页面内容高度小于浏览器高度时，页面底部以下会留下很大的空间，不管浏览器的高度怎么变化，我们要想让页底内容始终固定在底部, 本文提供了一个CSS解决方案:XHTML 主体 这里是页底footer内容 CSS*margin:0;padding:0;html,bodyheight:100%;#wrapmin-height:100%;#mainoverflow:auto;padding-bottom:60px;/*必须使用和footer相同的高度*/#footerposition:relative;margin-top:-60px;height:60px;clear:both;background:#369/*OperaFix*/body:beforecontent:;height:100%;float:left;width:0;margin-top:-32767px;注意，以上代码在IE6上根本不起作用，必须使用以下代码来解决IE6下的BUG。#wrapdisplay:table;height:100%Fancybox丰富的弹出层效果Fancybox是一款优秀的jquery插件，它能够展示丰富的弹出层效果。前面我们有文章介绍了facybox弹出层效果，相比facybox，fancybox显得功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。Demo fancybox.rarFancybox具有以下特性：l 可以加载DIV、图片、图片集、Ajax数据、SWF影片，iframe页面等。l 支持键盘方向键和ESC键。l 丰富的参数设置和方法调用。l 可扩展性强。使用方法：1、 添加javascript引用和css文件的引用 2、 HTML图片集，支持键盘方向键 3、 调用fancybox $(function() $(arel=group).fancybox( titlePosition : over, cyclic : true, titleFormat : function(title, currentArray, currentIndex, currentOpts) return + (currentIndex + 1) + / + currentArray.length + (title.length ? + title : ) + ; ); ); 注意，fancybox的参数设置格式为：key:value。titlePosition:设置图片标题的显示位置为图片上。cyclic：设置图片浏览方式为循环浏览。titleFormat：设置图片标题的格式，可以显示图片总数和当前图片顺序。Fancybox插件主要参数和方法一览表参数/方法描述默认值基本width设置弹出串口的宽度，当内容为swf,iframe或者单行文字时，应该将autoDimensions 设置为false560height设置弹出串口的高度，当内容为swf,iframe或者单行文字时，应该将autoDimensions 设置为false340cyclic是否循环显示，当内容为图片集时。falsecenterOnScroll弹出窗口始终浏览器居中。falsemodal是否使用模式窗口。当设置为true时，应该同时将：hideOnOverlayClick，hideOnContentClick，enableEscapeButton，showCloseButton 设置为false，并将overlayShow 设置为truefalsetitlePosition标题的位置,可以设置为outside, inside or overoutsidetransitionIn, transitionOut窗口显示的方式，可以设置为elastic, fade or nonefadesend方法，向服务端发送裁剪图片的数据，以便服务端接收参数进行处理，e.g: cropzoom.send(process.php,POST,id=1,function(r) alert(r); );方法$.fancybox.showActivity显示加载动画$.fancybox.hideActivity隐藏加载动画$.fancybox.close关闭窗口$.fancybox.resize自动调整窗口的高度使之与内容相适应Centered是否将选区居中，即显示在容器的中心。更多参数和方法请参照/api/view-blog-65.html另有/view-blog-56.html参考图片放大镜-Cloud ZoomCloud Zoom是一个图像放大jQuery插件，效果堪比Magic Zoom。相对于流行jQZoom插件，Cloud Zoom体积小，有更多的功能和更强大的跨浏览器兼容性。特点l 兼容大多数浏览器，（已经测试通过的浏览器有：IE6+, Firefox, Chrome, Opera, Safari）l 易于集成的基本有效的HTML。l （精缩）脚本小，只有6Kb。l 平滑变焦运动。l 画廊模式。l 着色，软聚焦和内变焦功能。l 它是完全免费的。使用方法1、加载CSS： 2、加载Javascript： 3、HTML代码： /view-blog-38.html/mainsite/cloud-zoom.htm插件参数一览表参数描述 (from V1.0.0)默认值zoomWidth设置缩放窗口的宽度，如果设置为auto则窗口宽度与小图片宽度相等。autozoomHeight设置缩放窗口的高度，如果设置为auto则窗口高度与小图片高度相等。autoposition指定缩放窗口相对于小图片的位置。允许的值是 left, right, top, bottom, inside ，也可以是专门一个HTML元素的ID放置例如窗口的缩放位置：element1rightadjustX允许你微调像素的缩放窗口的X位置。0adjustY允许你微调像素的缩放窗口的Y位置。0tint指定覆盖的小图片的颜色。颜色应指定十六进制格式，例如aa00aa。falsetintOpacity指定色彩的透明度，其中0是完全透明的，1是完全不透明。0.5lensOpacity设置镜头鼠标指针的透明度，其中0是完全透明的，1是完全不透明。在色彩和软对焦模式，它将始终是透明的。0.5softFocus适用于一种微妙的模糊效果来的小图片。设置为true或false。falsesmoothMove形象的漂移缩放，数字越高，就越顺畅/更轻松进行漂移运动。 1 =不平滑。3showTitle是否显示图片的标题.true/cloud-zoom/FacyBox弹出层效果FacyBox是一款基于jquery的lightbox控件，它可以让你在你的网站上展示图片（可以浏览多张图片，支持键盘方向键）、Div或通过Ajax加载的内容，而且使用非常简单。一起来看看如何使用。1、添加javascript引用和css文件的引用2、HTML图片：多张图片浏览：点击这里当要浏览多张图片时，只需给链接指定一个ID（如上：id=open），通过JS单击事件来加载图片源。DIV：点击这里展示DIV时，需要在页面对应一个DIV，并设置id=info，隐藏style=display:none，如下：点击这里AjQuery-based,whichcandisplayimages,divs,orentireremotepages.ajax加载内容点击这里3、调用插件$(function()$(arel*=facybox).facybox();$(#open).click(function()/展示多张图片$.facybox(images:images/3s.jpg,images/4s.jpg,images/5s.jpg);););Demo/demo/facybox//使用AD Gallery制作强大的相册画廊AD Gallery是一个带缩略图导航浏览，可设置照片标题和备注说明信息的jQuery相册插件。该插件提供了许多可配置的参数和方法，具有很强的定制功能, 参考 /view-blog-61.htmljQuery实现无刷新切换主题皮肤功能主题皮肤切换功能在很多网站和系统中应用，用户可以根据此功能设置自己喜欢的主题颜色风格，增强了用户体验。本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。/view-blog-92.htmljQuery实现切换页面布局在很多网站尤其在一些购物网站上，展示商品的列表页提供了许多商品，用户可以选择商