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 Tue, 07 Sep 2010 13:58:20 +0000 30 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 浏览: 0 次 点击打开新窗口浏览全图

]]> 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 浏览: 20 次 点击打开新窗口浏览全图
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 浏览: 16 次 点击打开新窗口浏览全图

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

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

3. CSS Help Sheet
大小: 102 K 尺寸: 500 x 127 浏览: 7 次 点击打开新窗口浏览全图
下载地址：获取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 浏览: 11 次 点击打开新窗口浏览全图
下载地址：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 http://www.webdeveloping.cn/blog/?action=show&id=299 网页设计师配色方案和调色板 anlee Colr

Colr has been around since March 2005.  It’s a tool to let people fiddle around with colors and it’s a jungle gym for software ideas. It has a pretty neat function: you can load colors from a random image or your own image.

ColorJack

ColorJack is one of the best websites to go to for a little inspiration on what is the best combination of color pallets to use on your website. It also has a few variations of it via sphere and galaxy.

Redalt

Redalt is a unique wordpress site that has a color analyzer. You submit your website and the analyzer picks up which colors are used in your template and then groups it based on hues , shades of a certain color as well as showing you where the colors come from via css stylesheet.

DaGraeve

DaGraeve has a pallets generator that gives you colors based on the pictures you upload. It is excelent to find color pallets for projects where you get some content images from your clients. I used it for my projects a few times and it worked like a charm.

Colour Lovers

Colour Lovers is the best community out there for color pallets and schemes. It is insane at how dedicated this website is towards website color scheme that it makes you feel like you can do SO much more ! You can register for free and contribute with your own color pallets or patterns.



阅读全文

]]> http://www.webdeveloping.cn/blog/?action=show&id=299 网页设计 2010-01-13 09:26 http://www.webdeveloping.cn/blog/?action=show&id=298 漂亮100招聘啦... anlee 漂亮100是国内领先的、以女性消费者为主导的，集合信息数据、购物、多样化服务为一体的新型网络时尚生活平台，是专注于美容护肤产品的一站式导购型B2C电子商务平台。
漂亮100作为全媒体整合互动营销专家，通过全新的电子商务模式，致力于构建国内最具影响力的立体化、全媒体资源服务平台，为用户提供完善的、一站式的宣传服务解决方案。
漂亮100通过时尚妆品信息分享、网上化妆品购买、活动互动、口碑推荐等方式，为追求生活品质的都市时尚人群打造一个精致的时尚生活互动空间，引领时尚人群的流行消费导向。
漂亮100将为您提供舒心、专业、体贴和信赖的网上购物新体验。以多种个性化的、贴心周到的服务，让您感受漂亮100无微不至的贴心关怀。从而能在不同层面帮助用户更好地进行消费决策，让您足不出户，却走在美丽的前沿！品味时尚生活，尽享购物乐趣，就在漂亮100！

技术部：
初中级运维工程师（1人）

岗位职责：
1、负责公司服务器的运维工作；
2、负责公司设备的日常维护及管理；技术档案维护；
3、负责内部信息系统建设、维护；进行域名、后台数据、邮箱管理；
任职资格：
1、计算机或IT相关专业，英语水平较好；
2、一年的网络管理、服务器网管工作经验，熟悉Windows，linux系统管理；
3、熟悉路由器，交换机、防火墙的网络设备的设置与管理；
4、熟悉Apache、Mysql、php等网站常用软件安装与维护；
5、熟悉RedHat Linux系统下的各种管理，服务配置，系统安全设置,系统监控；
6、学习能力强，较好的沟通和协作能力，较强的执行力和沟通能力，具备良好的服务意识
更多职位：漂亮100官方网

]]> http://www.webdeveloping.cn/blog/?action=show&id=298 站长日记 2009-12-21 13:35 http://www.webdeveloping.cn/blog/?action=show&id=297 jQuery 1.3 开发手册（壁纸版+网页版） anlee jQuery 1.3 开发必备手册，收藏分享
大小: 87.16 K 尺寸: 500 x 313 浏览: 70 次 点击打开新窗口浏览全图

壁纸版下载：
jquery_1_3_1440×900jquery_1_3_1440_900.rar
jquery_1_3_1680×1050jquery_1_3_1680_1050.rar
jquery_1_3_1920×1200jquery_1_3_1920_1200.rar

jQuery 1.3 Cheatsheet 网页版

jQuery UI 1.7 网页版

jQuery website

Download jQuery 1.3.2 (latest version)

]]> http://www.webdeveloping.cn/blog/?action=show&id=297 JavaScript 2009-11-24 13:10 http://www.webdeveloping.cn/blog/?action=show&id=296 IE6, IE7, IE8 CSS 兼容速查表 anlee Web 设计与开发越来越看重浏览器兼容问题，IE 每个新版本的推出，都在 CSS 的标准化方面前进一大步，同时，也就不可避免地在 IE 的各个主要版本之间产生兼容问题，尽管 IE8 推出已有时日，使用 IE6的用户仍然相当可观。本文以速查手册的形式介绍 CSS （2.1 和 3）在 IE6,7,8 三个版本之间的兼容情况。
这套速查手册可以打印成 A3 尺寸，共2页，以下是各种不同格式下载：
高分辨率 GIF 图片格式，第一页，第二页
PDF 格式，第一页，第二页

大小: 41.49 K 尺寸: 500 x 392 浏览: 37 次 点击打开新窗口浏览全图

]]> http://www.webdeveloping.cn/blog/?action=show&id=296 开发手册 2009-10-18 20:25 http://www.webdeveloping.cn/blog/?action=show&id=295 GooglePicasa 相册无法访问解决方法 anlee 我一直在用GooglePicasa，最近一直访问不了GooglePicasa，即使可以访问也是一团乱，我试用了网上分享的方法还是不可以，修改了他们的方法，现在可以了。
1、手动修改hosts文件（hosts文件位置：c:\windows\system32\drivers\etc）
2、有记事本（或你喜欢用的编辑器）添加如下行：
203.208.39.104 picadaweb.google.com
203.208.39.104 lh1.ggpht.com
203.208.39.104 lh2.ggpht.com
203.208.39.104 lh3.ggpht.com
203.208.39.104 lh4.ggpht.com
203.208.39.104 lh5.ggpht.com
203.208.39.104 lh6.ggpht.com
现在我的Picasa 网络相册可以正常访问了.

]]> http://www.webdeveloping.cn/blog/?action=show&id=295 电脑网络 2009-10-08 13:02 http://www.webdeveloping.cn/blog/?action=show&id=294 Google 发布介绍 HTML 5 新特性的视频 anlee HTML 5是Google未来网络服务的根基,所以Google正不遗余力的做推广.最新发布的视频演示了HTML 5的强大威力,包括:
* 通过Canvas标签实现的网络矢量图和SVG(Scalable Vector Graphics可缩放的矢量图形)
* 基于地理信息的Geolocation API
* HTML 5 Video
* HTML 5数据库和程序缓存
* Web workers
观看视频：

]]> http://www.webdeveloping.cn/blog/?action=show&id=294 (X)HTML 2009-09-25 09:22 http://www.webdeveloping.cn/blog/?action=show&id=293 CSS3.0参考手册CHM中文版下载 anlee 期待好久的CSS 3.0，CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
手册难点
1. 中文资料少，对英文翻译功底要求较高；
2. 基础语法要求字斟句酌，避免产生歧义；
3. 兼容性列表涉及浏览器及版本众多；
4. 草案中的Grid布局被业界同仁普遍认为比“天书”还难…
CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的沉淀制作示例。
备受期待的 CSS 3 新功能
圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等
CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。

CSS 3.0 参考手册 (中文版) 下载：css3.0参考手册.rar

]]> http://www.webdeveloping.cn/blog/?action=show&id=293 开发手册 2009-08-31 22:10 http://www.webdeveloping.cn/blog/?action=show&id=292 10超级有用的配色工具，选择合适的调色板 anlee 设计一个网页，色彩将发挥重大作用。推荐10超级有用的配色工具，选择合适的调色板。

1、ColoRotate
除了作为一种有用的方法来选择颜色， ColoRotate外观很酷，实际上是充满使用乐趣。而不是使用二维观众，提出调色板你在3D和实时。
大小: 35.18 K 尺寸: 429 x 244 浏览: 18 次 点击打开新窗口浏览全图
2、Kuler
Kuler是一个以社区驱动的Web应用程序，让您的浏览调色板创建的其他人。您也可以创建自己的用色轮，和谐的规则，和颜色滑块。
大小: 26.77 K 尺寸: 429 x 233 浏览: 8 次 点击打开新窗口浏览全图
3、Color Scheme Designer

4、Copaso

5、Color Blender

7、Toucan

8、ColorMunki

9、Color Wizard

10、Color Explorer

]]> http://www.webdeveloping.cn/blog/?action=show&id=292 网页设计 2009-08-21 18:18 http://www.webdeveloping.cn/blog/?action=show&id=291 Web设计师配色必备工具-HTML Colors Cheat Sheet anlee 这是我个人收集的一些Web开发相关资料（这只是配色相关的一部分），HTML Colors Cheat Sheet会给你带来帮助的。更多Web开发资料下次继续上传。
大小: 98.51 K 尺寸: 389 x 500 浏览: 27 次 点击打开新窗口浏览全图
这里也可以下载PDF文件：
html_colors_cheatsheet_v2.pdf

]]> http://www.webdeveloping.cn/blog/?action=show&id=291 网页设计 2009-07-28 16:56 http://www.webdeveloping.cn/blog/?action=show&id=290 心情不好就来拽拽吧 anlee 心情不好就来拽拽...
点击鼠标任意拽动！

]]> http://www.webdeveloping.cn/blog/?action=show&id=290 站长日记 2009-07-27 10:53 http://www.webdeveloping.cn/blog/?action=show&id=289 Xenocode Browser Sandbox 浏览器兼容程序 anlee 目前Xenocode Browser Sandbox支持的浏览器类型有 IE6，IE7，IE8，Firefox，Apple Safari， Opera 和 Google Chrome。
该程序可以让你直接在Windows 同时运行各种主流浏览器而无需安装它们。 由于Xenocode Browser Sandbox的工作原理是基于虚拟机技术，程序运行过程不会对本机进行不良操作，是一个很好的测试平台。
Xenocode Browser Sandbox主页

]]> http://www.webdeveloping.cn/blog/?action=show&id=289 软件工具 2009-07-26 18:33 http://www.webdeveloping.cn/blog/?action=show&id=288 Adobe Dreamweaver CS4 2.1 基于官方版精（简龙卷风版） anlee 大小: 7.25 K 尺寸: 492 x 114 浏览: 3 次 点击打开新窗口浏览全图
基于官方四国语言版精减，仅保留简体中文
1、整合序列号、amtlib.dll等文件;
2、移除BridgeCS4、Device Central、Extends cript Toolkit CS4等无聊软件;
3、移除CS4ServiceManager.exe自动启动项目;
4、保留帮助、Extension Manager等;
5、支持虚拟光驱安装;
6、安装有问题的请先运行光盘内的vcredist_x86.exe;
Adobe Dreamweaver CS4 下载
Adobe CS4系列 英文正式版破解下载（带注册机）
Adobe CS4 官方中文精简版下载-免激活

]]> http://www.webdeveloping.cn/blog/?action=show&id=288 软件工具 2009-07-26 17:32