Crazy Web

注册 | 登陆
浏览模式: 标准 | 列表全部文章

打败 IE 的葵花宝典：CSS Bug Table

Submitted by anlee on 2010, July 29, 9:30 AM

原文发表于：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%的领地。你想做一个统治页面兼容的主么？反正我是想的

» 阅读全文

Tags: css, css bug

CSS | 评论:3 | Trackbacks:0 | 阅读:234

分享两个psd、ai、cdr、eps 图片缩略图补丁包

Submitted by anlee on 2010, July 14, 3:15 PM

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

Tags: 缩略图补丁, photoshop, 缩略图浏览

软件工具 | 评论:1 | Trackbacks:0 | 阅读:199

世界上最伟大的云存储服务之一——Dropbox被封杀屏蔽

Submitted by anlee on 2010, May 11, 9:18 AM

即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的。

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

Tags: dropbox, 云存储服务

软件工具 | 评论:1 | Trackbacks:0 | 阅读:306

CSS盒模型3D示意图演示

Submitted by anlee on 2010, March 3, 3:27 PM

CSS中的盒模型是关系到设计中排版定位的关键，任何一个选择符都遵循盒模型规范。
下图是CSS盒模型的3D示意图：
你可以拖动查看效果!

CSS | 评论:4 | Trackbacks:0 | 阅读:895

jQuery & CSS实现流体导航

Submitted by anlee on 2010, March 2, 2:30 PM

大小: 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

Tags: css导航

CSS | 评论:1 | Trackbacks:0 | 阅读:510

最新PHP，HTML&CSS帮助Sheets

Submitted by anlee on 2010, February 21, 3:35 PM

这些手册是最新更新的，方便开发者查阅，可以打印或下载电脑
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]

Tags: php, html, css

开发手册 | 评论:1 | Trackbacks:0 | 阅读:520

HTML5 Reset Stylesheet

Submitted by anlee on 2010, February 9, 11:34 AM

前端开发有不少人使用模板，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/

Tags: html5

(X)HTML | 评论:0 | Trackbacks:0 | 阅读:303

css3.0参考手册+w3c标准html5手册+jQuery 1.4.1参考手册

Submitted by anlee on 2010, February 9, 11:08 AM

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

Tags: css手册, html5手册, jquery手册

开发手册 | 评论:0 | Trackbacks:0 | 阅读:464

网页设计师配色方案和调色板

Submitted by anlee on 2010, January 13, 9:26 AM

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.

» 阅读全文

Tags: 配色方案, 调色板

网页设计 | 评论:0 | Trackbacks:0 | 阅读:402

漂亮100招聘啦...

Submitted by anlee on 2009, December 21, 1:35 PM

漂亮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官方网

Tags: 漂亮100

站长日记 | 评论:3 | Trackbacks:0 | 阅读:979

Records:30012345678910›»