详谈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
<div id="wrap">
    <div id="main">
    主体
    </div>
</div>
<div id="footer">
  这里是页底footer内容
</div>
CSS
<style type="text/css"> 
* {margin:0;padding:0;} 
html, body {height: 100%;} 
#wrap {min-height: 100%;} 
#main {overflow:auto; 
    padding-bottom: 60px;}  /* 必须使用和footer相同的高度 */ 
#footer {position: relative; 
    margin-top: -60px; 
    height: 60px; 
    clear:both; 
    background:#369} 
/*Opera Fix*/ 
body:before { 
content:""; 
height:100%; 
float:left; 
width:0; 
margin-top:-32767px; 
} 
网页float是什么意思</style> 
注意，以上代码在IE6上根本不起作用，必须使用以下代码来解决IE6下的BUG。
<!--[if !IE 7]> 
    <style type="text/css"> 
        #wrap {display:table;height:100%} 
    </style> 
<![endif]--> 

Fancybox丰富的弹出层效果
Fancybox是一款优秀的jquery插件，它能够展示丰富的弹出层效果。前面我们有文章介绍了facybox弹出层效果，相比facybox，fancybox显得功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。Demo  fancybox.rar
Fancybox具有以下特性：
● 可以加载DIV、图片、图片集、Ajax数据、SWF影片，iframe页面等。
● 支持键盘方向键和ESC键。
● 丰富的参数设置和方法调用。
● 可扩展性强。
使用方法：
1、 添加javascript引用和css文件的引用
<link rel="stylesheet" type="text/css" href="fancybox.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fancybox.js"></script>
2、 HTML
<h4>图片集，支持键盘方向键</h4>
<p>
  <a rel="group" href="images/b1.jpg" title="图片标题"><img alt="" src="images/s1.gif" /></a>
  <a rel="group" href="images/b2.jpg" title="图片标题"><img alt="" src="images/s2.gif" /></
a>
<a rel="group" href="images/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/s3.gif" /></a>
</p>
3、 调用fancybox
$(function(){
  $("a[rel=group]").fancybox({
      'titlePosition' : 'over',
      'cyclic'        : true,
      'titleFormat'    : function(title, currentArray, currentIndex, currentOpts) {
                  return '<span id="fancybox-title-over">' + (currentIndex + 1) +
' / ' + currentArray.length + (title.length ? '  ' + title : '') + '</span>';
                }
    });
});
注意，fancybox的参数设置格式为：'key':'value'。titlePosition:设置图片标题的显示位置为图片上。cyclic：设置图片浏览方式为循环浏览。titleFormat：设置图片标题的格式，可以显示图片总数和当前图片顺序。
Fancybox插件主要参数和方法一览表
参数/方法
描述
默认值
基本
width
设置弹出串口的宽度，当内容为swf,iframe或者单行文字时，应该将'autoDimensions' 设置为false
560
height
设置弹出串口的高度，当内容为swf,iframe或者单行文字时，应该将'autoDimensions' 设置为false
340
cyclic
是否循环显示，当内容为图片集时。
false
centerOnScroll
弹出窗口始终浏览器居中。
false
modal
是否使用模式窗口。当设置为true时，应该同时将：'hideOnOverlayClick'，'hideOnContentClick'，'enableEscapeButton'，'showCloseButton' 设置为false，并将'overlayShow' 设置为true
false
titlePosition
标题的位置,可以设置为'outside', 'inside' or 'over'
'outside'
transitionIn, transitionOut
窗口显示的方式，可以设置为'elastic', 'fade' or 'none'
'fade'
send
方法，向服务端发送裁剪图片的数据，以便服务端接收参数进行处理，
e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });
 
方法
$.fancybox.showActivity
显示加载动画
 
$.fancybox.hideActivity
隐藏加载动画
 
$.fancybox.close
关闭窗口
 
$.size
自动调整窗口的高度使之与内容相适应
 
Centered
是否将选区居中，即显示在容器的中心。
更多参数和方法请参照fancybox/api
www.helloweba/view-blog-65.html
另有www.helloweba/view-blog-56.html参考

图片放大镜-Cloud Zoom
Cloud Zoom是一个图像放大jQuery插件，效果堪比Magic Zoom。相对于流行jQZoom插件，Cloud Zoom体积小，有更多的功能和更强大的跨浏览器兼容性。
特点

● 兼容大多数浏览器，（已经测试通过的浏览器有：IE6+, Firefox, Chrome, Opera, Safari）
● 易于集成的基本有效的HTML。
● （精缩）脚本小，只有6Kb。
● 平滑变焦运动。
● 画廊模式。
● 着，软聚焦和内变焦功能。
● 它是完全免费的。

使用方法
1、加载CSS：
<link href="/styles/cloud-zoom.css" type="text/css" rel="stylesheet" />
2、加载Javascript：
<script type="text/JavaScript" src="/js/jquery.1.4.2.min.js"></script>
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.1.min.js"></script>
3、HTML代码：
<a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
        rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
<img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。