Crazy Web http://www.webdeveloping.cn/blog/ 前端开发、页面重构、Web标准、Web疯狂开发、PHP+MySql技术分享、技术手册分享、网站交互设计 Copyright (C) 2004 Security Angel Team [S4T] All Rights Reserved. SaBlog-X Version 1.6 Build 20080806 Mon, 06 Feb 2012 05:16:12 +0000 30 http://www.webdeveloping.cn/blog/?action=show&id=320 JQuery回到顶部制作 anlee 今天在修改漂亮100SA社区时用到了这个效果，实现的方法很多，最传统方法就是使用<a href="#top">回到顶部<a/>。
下面三种效果都是在垂直滚动条距顶部有一定的距离时出现TOP这个按钮，CSS样式使用了部分CSS3。
首先看看一下效果图：
大小: 5.28 K 尺寸: 66 x 281 浏览: 20 次 点击打开新窗口浏览全图

DEMO一：

XML/HTML代码
  1. <div id="goto-top" class="goto-top">  
  2.     <a href="#top"><span class="stopBox"></span>返回顶部</a>  
  3. </div 
CSS代码
  1. .goto-top {  
  2.     position:fixed;  
  3.     bottombottom:80px;  
  4.     rightright:10px;  
  5. }  
  6. .goto-top a {  
  7.     display:block;  
  8.     width:50px;  
  9.     text-decoration:none;  
  10.     text-align:center;  
  11.     color:#d1d1d1;  
  12.     -moz-transition:color 1s;  
  13.     -webkit-transition:color 1s;  
  14.     -o-transition:color 1s;  
  15. }  
  16. a .stopBox {  
  17.     height:50px;  
  18.     width:50px;  
  19.     display:block;  
  20.     background:#CCC;  
  21.     margin-bottom:5px;  
  22.     border-radius:6px;  
  23.     -moz-transition:background 1s;  
  24.     -webkit-transition:background 1s;  
  25.     -o-transition:background 1s;  
  26. }  
  27. a:hover .stopBox {  
  28.     background:#666;  
  29. }  

调用jQuery库，首先在<head></head>中加上jQuery的库：

JavaScript代码
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>  

jQuery代码：

JavaScript代码
  1. <script type ="text/javascript">   
  2. $(document).ready(function() {  
  3.     $("#goto-top").hide();  
  4.   
  5.     $(function() {  
  6.         $(window).scroll(function() {  
  7.             if ($(window).scrollTop() > 100) {  
  8.                 $("#goto-top").fadeIn(1500);  
  9.   
  10.             }  
  11.             else  
  12.             {  
  13.                 $("#goto-top").fadeOut(1500);  
  14.   
  15.             }  
  16.   
  17.         });  
  18.   
  19.   
  20. $("#goto-top").click(function() {  
  21.             $('body,html').animate({  
  22.                 scrollTop: 0  
  23.             },  
  24.             1000);  
  25.             return false;  
  26.   
  27.         });  
  28.   
  29.     });  
  30.   
  31. });  
  32. </script>  

OK，到这里就可以查看效果，因为没有做IE6的bug处理，所以在IE下显示是不正常的，其他主流浏览器均测试通过，如需copy使用，除IE6下都可以放心正常使用。

DEMO二：

基本和DEMO一实现方法一样。

XML/HTML代码
  1. <a id="gotoTop" class="gotoTop" href="#top">  
  2.     <span class="stopBox"></span>返回顶部  
  3. </a>  
CSS代码
  1. a .stopBox {  
  2.     height:50px;  
  3.     width:50px;  
  4.     display:block;  
  5.     background:#CCC;  
  6.     margin-bottom:5px;  
  7.     border-radius:6px;  
  8.     -moz-transition:background 1s;  
  9.     -webkit-transition:background 1s;  
  10.     -o-transition:background 1s;  
  11. }  
  12. a:hover .stopBox {  
  13.     background:#666;  
  14. }  
  15. .gotoTop {  
  16.     display:none;  
  17.     text-decoration:none;  
  18.     cursor:pointer;  
  19.     width:50px;  
  20.     text-align:center;  
  21.     position:fixed;  
  22.     rightright:10px;  
  23.     bottombottom:200px;  
  24.     color:#d1d1d1;  
  25.     -moz-transition:color 1s;  
  26.     -webkit-transition:color 1s;  
  27.     -o-transition:color 1s;  
  28. }  

调用jQuery库，以后的效果基本都是这样调用，这里不多阐述。

JavaScript代码
  1. <script type="text/javascript">  
  2. $(function() {  
  3.     $.fn.scrollToTop = function() {  
  4.         $(this).hide().removeAttr("href");  
  5.         if ($(window).scrollTop() != "0") {  
  6.             $(this).fadeIn("slow")  
  7.   
  8.         }  
  9.         var scrollDiv = $(this);  
  10.         $(window).scroll(function() {  
  11.             if ($(window).scrollTop() == "0") {  
  12.                 $(scrollDiv).fadeOut("slow")  
  13.   
  14.             } else {  
  15.                 $(scrollDiv).fadeIn("slow")  
  16.   
  17.             }  
  18.   
  19.         });  
  20.         $(this).click(function() {  
  21.             $("html, body").animate({  
  22.                 scrollTop: 0  
  23.   
  24.             },  
  25.             "slow")  
  26.   
  27.         })  
  28.   
  29.     }  
  30.   
  31. });  
  32. $(function() {  
  33.     $("#gotoTop").scrollToTop();  
  34.   
  35. });  
  36. </script>  

保存查看效果，（注：IE6中position:fixed存在bug，其他主流浏览器测试完全通过）。

DEMO三：

第三种效果最好实现，这里使用了scrolltopcontrol插件。这里我做了简单修改，可以直接使用。

CSS代码
  1. a.currTop {  
  2.     height:50px;  
  3.     width:50px;  
  4.     display:block;  
  5.     background:url(../images/gtop_h.png) no-repeat;  
  6. }  
  7. a.currTop:hover {  
  8.     background:url(../images/gtop.png) no-repeat;  
  9. } 
JavaScript代码
  1. <script src="javascripts/scrolltopcontrol.js" type="text/javascript"></script>  

（注：IE6下做了测试，有一点闪动问题，不影响使用。悲催的IE6）

以上三种回到顶部效果，如有更好的处理制作方法，可以分享一下，大家也可以一起互相学习的探讨一下。

]]> http://www.webdeveloping.cn/blog/?action=show&id=320 JavaScript 2011-11-01 17:41 http://www.webdeveloping.cn/blog/?action=show&id=319 昔日的漂亮100即将下线，域名下的网站将迁入漂亮100社区导购站 anlee 从起初漂亮100孕育上线到今日的漂亮100即将下线，陪她（风风雨雨）也走了2个多年头，稍有感到惋惜，互联网是需要微创新！昔日的漂亮100即将下线，域名下的网站将迁入漂亮100社区导购站。

大小: 51.51 K 尺寸: 500 x 245 浏览: 6 次 点击打开新窗口浏览全图

浏览漂亮完整页面：请下载

]]> http://www.webdeveloping.cn/blog/?action=show&id=319 站长日记 2011-10-25 14:55 http://www.webdeveloping.cn/blog/?action=show&id=318 jQuery Show / Hide Plugin anlee 分享一个用来显示和隐藏DIV内容的插件!
插件代码：

JavaScript代码
  1. (function ($) {  
  2.     $.fn.showHide = function (options) {  
  3.   
  4.     //default vars for the plugin  
  5.         var defaults = {  
  6.             speed: 1000,  
  7.             easing: '',  
  8.             changeText: 0,  
  9.             showText: 'Show',  
  10.             hideText: 'Hide',  
  11.   
  12.         };  
  13.         var options = $.extend(defaults, options);  
  14.   
  15.         $(this).click(function () {  
  16.              // this var stores which button you've clicked  
  17.              var toggleClick = $(this);  
  18.              // this reads the rel attribute of the button to determine which div id to toggle  
  19.              var toggleDiv = $(this).attr('rel');  
  20.              // here we toggle show/hide the correct div at the right speed and using which easing effect  
  21.              $(toggleDiv).slideToggle(options.speed, options.easing, function() {  
  22.              // this only fires once the animation is completed  
  23.              if(options.changeText==1){  
  24.              $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);  
  25.              }  
  26.               });  
  27.   
  28.           return false;  
  29.   
  30.         });  
  31.   
  32.     };  
  33. })(jQuery);  

用法：
这里可以设置插件的选项，比如切换的速度，也可以改变按钮的文字。

JavaScript代码
  1. $(document).ready(function(){  
  2.   
  3.    $('.show_hide').showHide({  
  4.         speed: 1000,   
  5.         easing: '',   
  6.         changeText: 1,   
  7.         showText: 'View',  
  8.         hideText: 'Close'   
  9.   
  10.     });   
  11.   
  12. });  
HTML代码：
你可以根据自己需求修改代码。
XML/HTML代码
  1. <a href="#" class="show_hide" rel="#slidingDiv">View</a><br />  
  2. <div id="slidingDiv" style="display:none;">  
  3.     hi！我是这里的内容，谢谢你的使用！  
  4. </div>  
  5. <a href="#" class="show_hide" rel="#slidingDiv_2">View</a><br />  
  6. <div id="slidingDiv_2" style="display:none;">  
  7.  hi！我是这里的内容，谢谢你的使用！  
  8. </div>  

 

]]> http://www.webdeveloping.cn/blog/?action=show&id=318 JavaScript 2011-10-20 10:51 http://www.webdeveloping.cn/blog/?action=show&id=317 发几个百度旗下音乐平台Ting邀请码？ anlee 百度旗下音乐平台Ting邀请码：
http://ting.baidu.com/invite/d2a64863d2938d11
http://ting.baidu.com/invite/ae9bfd34571e322b
http://ting.baidu.com/invite/abc20d4b635ec63b
http://ting.baidu.com/invite/7962888f76bde7b6
http://ting.baidu.com/invite/21221255543f0618
http://ting.baidu.com/invite/1974cc07f1a44f5b
http://ting.baidu.com/invite/3aa391d8547acf43
http://ting.baidu.com/invite/268d1e2ac14c2ef1
http://ting.baidu.com/invite/7c64505721bd681a
http://ting.baidu.com/invite/7c64505721bd681a

大小: 19.38 K 尺寸: 500 x 71 浏览: 67 次 点击打开新窗口浏览全图

]]> http://www.webdeveloping.cn/blog/?action=show&id=317 站长日记 2011-05-13 15:41 http://www.webdeveloping.cn/blog/?action=show&id=316 EmEditor 添加右键菜单 无需要手动改注册表 anlee

给Emeditor 添加右键菜单，网上搜索了一下，很多地方都写了用注册表的方法，其实可以简单地在菜单里就设定好的。

我用的是10.0的版本，打开顶部菜单的工具 > 自定义，选择“快捷方式”这个Tab，点“更多快捷方式...”按钮，勾选“添加快捷方式到资源管理器的上下文菜单”，点确定，OK，大功告成。在任一一个文本文件上点击右键，可以看到打开方式上有一个"EmEditor"，点它就可以直接用EmEditor打开了。

大小: 86.85 K 尺寸: 500 x 416 浏览: 19 次 点击打开新窗口浏览全图

]]> http://www.webdeveloping.cn/blog/?action=show&id=316 软件工具 2011-02-22 13:38 http://www.webdeveloping.cn/blog/?action=show&id=315 为你的Apache增加SSI支持（shtml的奥秘） anlee 什么是SSI？
SSI是英文Server Side Includes的缩写，翻译成中文就是服务器端包含的意思。从技术角度上说，SSI就是在HTML文件中，可以通过注释行调用的命令或指针。SSI具有 强大的功能，只要使用一条简单的SSI命令就可以实现整个网站的内容更新，时间和日期的动态显示，以及执行shell和CGI脚本程序等复杂的功能。

如何使你的apache服务器支持SSI？
apache默认是不支持SSI的，需要我们更改httpd.conf来进行配置。我这里以windows平台的Apache 2.0.x为例，打开conf目录下的httpd.conf文件，搜索“AddType text/html .shtml”，搜索结果：

# AddType text/html .shtml
# AddOutputFilter INCLUDES .shtml

把这两行前面的#去掉。

然后搜索“Options Indexes FollowSymLinks”
在搜索到的那一行后面添加“ Includes”
即将该行改变为 Options Indexes FollowSymLinks Includes
保存httpd.conf，重起apache即可。
到此我们就完成了对Apache SSI的设置。

]]> http://www.webdeveloping.cn/blog/?action=show&id=315 (X)HTML 2011-01-14 14:23 http://www.webdeveloping.cn/blog/?action=show&id=314 css样式整理（一） anlee 兼容IE6+,FIREFOX等主流浏览器的透明度代码
CSS代码
  1. .transparent{filter:alpha(opacity=50); -moz-opacity:0.5;/** Firefox 3.5即将原生支持opacity属性，所以本条属性只在Firefox3以下版本有效 ***/   
  2. -khtml-opacity: 0.5; opacity: 0.5; }  

区分IE浏览器主要是利用了css hack
CSS代码
  1. body {       
  2. color: red; /* all browsers, of course */      
  3. color : green\9; /* IE8 and below */      
  4. *color : yellow; /* IE7 and below */      
  5. _color : orange; /* IE6 */      
  6. }   
整个网站变成黑白的代码片段(支持所有IE，firefox)
CSS代码
  1. html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } body{filter:Gray;} img{filter:Gray;}  
清除浮动
CSS代码
  1. .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }.clearfix {display:block;}.clear{ clear:both;} 
]]> http://www.webdeveloping.cn/blog/?action=show&id=314 CSS 2011-01-06 16:07 http://www.webdeveloping.cn/blog/?action=show&id=313 饭否竟然又开放了，不开发注册 anlee 饭否竟然又开放了，现在不开发注册，以前用户可以登录。

测试了一下我的（http://fanfou.com/anlee），还可以访问哟！

]]> http://www.webdeveloping.cn/blog/?action=show&id=313 站长日记 2010-11-26 10:14 http://www.webdeveloping.cn/blog/?action=show&id=312 css的z-index属性与Flash动画层叠问题 anlee 在谷歌浏览器下，发现漂亮100站导航下滑层和Flash层问题叠层在一起，Flash压住下滑div层。如下图：
大小: 45.43 K 尺寸: 500 x 135 浏览: 18 次 点击打开新窗口浏览全图
以下是z-index介绍：
z-index : auto | number
auto: 默认值。
number: 无单位的整数值，可为负数 。
z-index 值较大的元素将叠加在 z-index 值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。

注意：这个属性不会作用于窗口控件，如 select 对象。在IE5.5+中， iframe 对象开始支持此属性。而在之前的浏览器版本中， iframe 对象是窗口控件，会忽略此属性。

z-index 属性适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z 轴）上的层叠顺序（stack order）。

每一个定位元素都归属于一个stacking context。根元素形成 root stacking context，而其他的 stacking context 则由定位元素产生（此定位元素的 z-index 被定义一个非 auto 的 z-index 值），定位子元素会以这个 local stacking context 为参考，用相同的规则来决定层叠顺序。并且 stacking context 和 containing block 之间并没有必然联系。

当 stacking context 一样的时候，就用 z-index 的值来决定怎样显示，如果 z-index 也相同（即 stack level 相同），则按照档中后来者居上的原则（back-to-front ）的顺序来层叠。

当任何一个元素层叠另一个包含在不同 stacking context 元素时，则会以 stacking context 的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的 stacking context 下才会用 z-index 来决定先后，不同时则由 stacking context 的 z-index 来决定。例如：

定位元素 A（z-index:100）里面有定位元素 A1（z-index:300），而定位元素 B 和元素 A 兄弟关系（z-index:200）。你会发现无论 A1 的 z-index 是多大，也会被 z-index 是 200 的 B 所覆盖，因为 A 的 z-index 只有 100。
简单的来讲此属性就是设置网页中一旦出现元素层叠,用此属性来设定出我们想要的效果。

但是当遇到Flash动画与页面中div层叠时,仅仅用z-index属性是不够的,我们还需要对其flash进行透明化的设置,即引用下面代码即可，
修改你的flash代码：

XML/HTML代码
  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" style="z-index:-1px;" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="150" height="156">  
  2.      <param name="movie" value="<flash文件>" />  
  3.      <param name="quality" value="high" />  
  4.      <param name="wmode" value="transparent" />  
  5.      <embed src="<flash文件>" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" width="150" height="156"></embed>  
  6. </object>   

注意下面这段代码：
<param name="wmode" value="transparent" />
<embed src="<flash文件>" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" width="150" height="156">
最后修改效果：
大小: 38.2 K 尺寸: 500 x 126 浏览: 19 次 点击打开新窗口浏览全图

]]> http://www.webdeveloping.cn/blog/?action=show&id=312 CSS 2010-11-17 13:10 http://www.webdeveloping.cn/blog/?action=show&id=311 100团上线啦！百分百精品团 anlee 100团上线啦！让你购买最优惠的

大小: 26.32 K 尺寸: 500 x 144 浏览: 25 次 点击打开新窗口浏览全图

]]> http://www.webdeveloping.cn/blog/?action=show&id=311 网页设计 2010-10-25 10:13 http://www.webdeveloping.cn/blog/?action=show&id=310 漂亮壹佰“漂亮仔”QQ表情、RTX表情提供下载啦 anlee 漂亮壹佰“漂亮仔” ，简称“亮仔”或者“靓仔”QQ表情、RTX表情提供下载啦！

大小: 86.82 K 尺寸: 500 x 140 浏览: 23 次 点击打开新窗口浏览全图

下载安装包：漂亮100表情-qq.7z    漂亮100表情-rtx.7z

]]> http://www.webdeveloping.cn/blog/?action=show&id=310 网页设计 2010-10-18 10:06 http://www.webdeveloping.cn/blog/?action=show&id=309 漂亮100新版网站上线了 anlee 大小: 78.21 K 尺寸: 500 x 309 浏览: 20 次 点击打开新窗口浏览全图

漂亮100是国内领先的、以女性消费者为主导的，集合信息数据、购物、多样化服务为一体的新型网络时尚生活平台，是专注于美容护肤产品的一站式导购型B2C电子商务平台。

漂亮100作为全媒体整合互动营销专家，通过全新的电子商务模式，致力于构建国内最具影响力的立体化、全媒体资源服务平台，为用户提供完善的、一站式的宣传服务解决方案。

漂亮100通过时尚妆品信息分享、网上化妆品购买、活动互动、口碑推荐等方式，为追求生活品质的都市时尚人群打造一个精致的时尚生活互动空间，引领时尚人群的流行消费导向。

]]> http://www.webdeveloping.cn/blog/?action=show&id=309 我的作品 2010-09-29 12:21 http://www.webdeveloping.cn/blog/?action=show&id=308 打败 IE 的葵花宝典：CSS Bug Table anlee 原文发表于：Alipay UED Blog – 打败 IE 的葵花宝典：CSS Bug Table
英文链接：HasLayout.net

作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不 过，今 天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列 /Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于 占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的



阅读全文

]]> http://www.webdeveloping.cn/blog/?action=show&id=308 CSS 2010-07-29 09:30 http://www.webdeveloping.cn/blog/?action=show&id=307 分享两个psd、ai、cdr、eps 图片缩略图补丁包 anlee 1、设计的朋友都熟悉，在XP系统系列 [我的电脑]与[资源管理器]中有好几种格式的文件是无法浏览缩略图的，只有在安装相应的软件以后，才可以在查看它们的缩略图，photoshop- CS2系列都没有了这个文件。

补丁支持ai、psd、cdr、eps图片缩略图浏览功能。这个小补丁很实用，安装也很简单，依次点击，然后把注册表导入即可，我测试了一下，运行正常。

安装方法：如果只需要支持某种格式，请点击相应的REG文件即可安装，如果全部安装请直接用增加缩略图补丁.EXE即可。

安装包：psd[1].ai缩略图补丁.rar

2、在windows XP的文件管理显示方式中的缩略图，对于photoshop产生的PSD文件是不起作用的，不过装了这个补丁PSD格式的图就能和JPG.PNG等图片一 样显示缩略图了。

使用方法：把psicon.inf和psicon.dll拷贝到：C:\Program Files\Common Files\Adobe\Shell文件夹下，然后鼠标右击psicon.inf文件，选“安装”命令即可
安装包：xp下psd缩略图显示补丁补丁.rar

我机器没有cdr、eps文件，测试了一下ai、psd：

大小: 10.11 K 尺寸: 240 x 128 浏览: 12 次 点击打开新窗口浏览全图

]]> http://www.webdeveloping.cn/blog/?action=show&id=307 软件工具 2010-07-14 15:15 http://www.webdeveloping.cn/blog/?action=show&id=305 世界上最伟大的云存储服务之一——Dropbox被封杀屏蔽 anlee 即twitter、facebook、youtube、blogger被封杀后，世界上最伟大的云存储服务之一——Dropbox被证实无法从中国地区访问，客户端和网站均无法正常连接和登录，我先前曾经多次推荐过这个伟大的服务，没想到这么快Dropbox就惨遭毒手。目前，中国用户已经无法通过Dropbox客户端和Web网页访问Dropbox，已经连接上Dropbox服务器的客户端一经退出就会无法再登 录，显示的现象是Connecting一直在持续却连接不上，从客户端点“Launch Dropbox Website”也无法打开网页登录。封锁Dropbox的方式是关键字封锁和IP封锁，关键字为“.dropbox.com”，IP为Dropbox官方网站的IP，可谓是全方面 地定点封锁。

用户可以修改hosts可以继续访问Dropbox。(不便公开传播请自行搜索），不要直接公布地址，越多人直接见到教加IP的方法，这个IP就越容易被封。说说用什么方法找到那个IP更好。 我是启动dropbox后用smartsniff抓包得到IP的。

我疼恨这些封杀屏蔽!希望谷歌一直能走下去...

]]> http://www.webdeveloping.cn/blog/?action=show&id=305 软件工具 2010-05-11 09:18 http://www.webdeveloping.cn/blog/?action=show&id=304 CSS盒模型3D示意图演示 anlee CSS中的盒模型是关系到设计中排版定位的关键，任何一个选择符都遵循盒模型规范。
下图是CSS盒模型的3D示意图：
你可以拖动查看效果!

]]> http://www.webdeveloping.cn/blog/?action=show&id=304 CSS 2010-03-03 15:27 http://www.webdeveloping.cn/blog/?action=show&id=303 jQuery & CSS实现流体导航 anlee 大小: 9 K 尺寸: 459 x 229 浏览: 43 次 点击打开新窗口浏览全图
JS代码：

JavaScript代码
  1. <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>  
  2. <script type="text/javascript">  
  3.   
  4. $(document).ready(function()  
  5. {  
  6.   
  7. $('#menuBar li').click(function()  
  8. {  
  9.   var url = $(this).find('a').attr('href');  
  10.   document.location.href = url;  
  11.   
  12. });  
  13.   
  14. $('#menuBar li').hover(function()  
  15. {  
  16.      
  17.    $(this).find('.menuInfo').slideDown();  
  18. },  
  19. function()  
  20. {  
  21.     
  22.   $(this).find('.menuInfo').slideUp();  
  23.   
  24. });  
  25.   
  26. });  
  27.   
  28.   
  29. </script> 

(X)HTML代码：

XML/HTML代码
  1. <div id="menuBarHolder">  
  2.    
  3. <ul id="menuBar">  
  4.    
  5. <li class="firstchild"><a href="javascript:#">Home</a>  
  6.    
  7. <div class="menuInfo">I am some text about the home section</div></li>  
  8. <li><a href="javascript:#">Services</a>  
  9.    
  10. <div class="menuInfo">I am some text about the services section</div></li>  
  11. <li><a href="javascript:#">Clients</a>  
  12.    
  13. <div class="menuInfo">I am some text about the clients section</div></li>  
  14. <li><a href="javascript:#">Portfolio</a>  
  15.    
  16. <div class="menuInfo">I am some text about the portfolio section</div></li>  
  17. <li><a href="javascript:#">About</a>  
  18.    
  19. <div class="menuInfo">I am some text about the about section</div></li>  
  20. <li><a href="javascript:#">Blog</a>  
  21.    
  22. <div class="menuInfo">I am some text about the blog section</div></li>  
  23. <li><a href="javascript:#">Follow</a>  
  24.    
  25. <div class="menuInfo">I am some text about the follow section</div></li>  
  26. <li><a href="javascript:#">Contact</a>  
  27.    
  28. <div class="menuInfo">I am some text about the contact section</div></li>  
  29.    
  30. </ul>  
  31.    
  32. </div>  
  33. </div>  

 CSS代码

CSS代码
  1. #menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;}  
  2. #menuBarHolder ul{ list-style-type:none; display:block;}  
  3. #container { margin-top:100px;}  
  4. #menuBar li{  float:left;  padding:15px; height:16px; width:50px; border-right:1px solid #ccc; }  
  5. #menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;}  
  6. .menuHover { background-color:#999;}  
  7. .firstchild { border-left:1px solid #ccc;}  
  8. .menuInfo { cursor:hand; background-color:#000; color:#fff;  
  9. width:74px; font-size:11px;height:100px; padding:3px; display:none;  
  10. position:absolute; margin-left:-15px; margin-top:-15px;  
  11. -moz-border-radius-bottomright: 5px;  
  12. -moz-border-radius-bottomleft: 5px;  
  13. -webkit-border-bottom-left-radius: 5px;  
  14. -webkit-border-bottom-rightright-radius: 5px;  
  15. -khtml-border-radius-bottomright: 5px;  
  16. -khtml-border-radius-bottomleft: 5px;  
  17.  border-radius-bottomright: 5px;  
  18. border-radius-bottomleft: 5px;  
  19. }  

Demo 

Download

]]> http://www.webdeveloping.cn/blog/?action=show&id=303 CSS 2010-03-02 14:30 http://www.webdeveloping.cn/blog/?action=show&id=302 最新PHP，HTML&CSS帮助Sheets anlee 这些手册是最新更新的，方便开发者查阅，可以打印或下载电脑
1. PHP Help Sheet
大小: 106.34 K 尺寸: 500 x 127 浏览: 24 次 点击打开新窗口浏览全图

下载地址：获取PDF[1.9MB]

2. HTML Help Sheet
大小: 94 K 尺寸: 500 x 127 浏览: 18 次 点击打开新窗口浏览全图
下载地址：获取PDF[1.9MB]

3. CSS Help Sheet
大小: 102 K 尺寸: 500 x 127 浏览: 17 次 点击打开新窗口浏览全图
下载地址：获取PDF[1.9MB]

]]> http://www.webdeveloping.cn/blog/?action=show&id=302 开发手册 2010-02-21 15:35 http://www.webdeveloping.cn/blog/?action=show&id=301 HTML5 Reset Stylesheet anlee 前端开发有不少人使用模板，boilerplates，和HTML 5样式。Remy 介绍了一些 basic boilerplates for HTML 5, 为了保持这样，国外人修改Eric Meyer’s CSS reset 你可以用在你的HTML 5 页面中。
The code：
XML/HTML代码
  1. /*   
  2. html5doctor.com Reset Stylesheet  
  3. v1.4   
  4. 2009-07-27  
  5. Author: Richard Clark - http://richclarkdesign.com  
  6. */  
  7.   
  8. html, body, div, span, object, iframe,  
  9. h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
  10. abbr, address, cite, code,  
  11. del, dfn, em, img, ins, kbd, q, samp,  
  12. small, strong, sub, sup, var,  
  13. b, i,  
  14. dl, dt, dd, ol, ul, li,  
  15. fieldset, form, label, legend,  
  16. table, caption, tbody, tfoot, thead, tr, th, td,  
  17. article, aside, dialog, figure, footer, header,   
  18. hgroup, menu, nav, section,  
  19. time, mark, audio, video {  
  20.     margin:0;  
  21.     padding:0;  
  22.     border:0;  
  23.     outline:0;  
  24.     font-size:100%;  
  25.     vertical-align:baseline;  
  26.     background:transparent;  
  27. }  
  28.   
  29. body {  
  30.     line-height:1;  
  31. }  
  32.   
  33. article, aside, dialog, figure, footer, header,   
  34. hgroup, nav, section {   
  35.     display:block;  
  36. }  
  37.   
  38. nav ul {  
  39.     list-style:none;  
  40. }  
  41.   
  42. blockquote, q {  
  43.     quotes:none;  
  44. }  
  45.   
  46. blockquote:before, blockquote:after,  
  47. q:before, q:after {  
  48.     content:'';  
  49.     content:none;  
  50. }  
  51.   
  52. a {  
  53.     margin:0;  
  54.     padding:0;  
  55.     border:0;  
  56.     font-size:100%;  
  57.     vertical-align:baseline;  
  58.     background:transparent;  
  59. }  
  60.   
  61. ins {  
  62.     background-color:#ff9;  
  63.     color:#000;  
  64.     text-decoration:none;  
  65. }  
  66.   
  67. mark {  
  68.     background-color:#ff9;  
  69.     color:#000;   
  70.     font-style:italic;  
  71.     font-weight:bold;  
  72. }  
  73.   
  74. del {  
  75.     text-decoration: line-through;  
  76. }  
  77.   
  78. abbr[title], dfn[title] {  
  79.     border-bottom:1px dotted #000;  
  80.     cursor:help;  
  81. }  
  82.   
  83. table {  
  84.     border-collapse:collapse;  
  85.     border-spacing:0;  
  86. }  
  87.   
  88. hr {  
  89.     display:block;  
  90.     height:1px;  
  91.     border:0;     
  92.     border-top:1px solid #cccccc;  
  93.     margin:1em 0;  
  94.     padding:0;  
  95. }  
  96.   
  97. input, select {  
  98.     vertical-align:middle;  
  99. }  
这里你可以下载：http://code.google.com/p/html5resetcss/downloads/list
文章来自：http://html5doctor.com/html-5-reset-stylesheet/

]]> http://www.webdeveloping.cn/blog/?action=show&id=301 (X)HTML 2010-02-09 11:34 http://www.webdeveloping.cn/blog/?action=show&id=300 css3.0参考手册+w3c标准html5手册+jQuery 1.4.1参考手册 anlee css3.0参考手册+w3c标准html5手册+jQuery 1.4.1参考手册分享前端开发朋友
大小: 4.16 K 尺寸: 500 x 42 浏览: 28 次 点击打开新窗口浏览全图
下载地址：http://www.webdeveloping.cn/bbs/viewthread.php?tid=2635&extra=page%3D1

]]> http://www.webdeveloping.cn/blog/?action=show&id=300 开发手册 2010-02-09 11:08