css hack浏览器兼容

Posted by tom
at 八月 30, 2008 No Comments »

各大浏览器独享hack
ie6： “_“下划线是它的独享，例如: _background-color:#000;
ie7： “+!important” 复杂了点，但是为了效果… ，例如: + background-color:#000 !important;
FF： “!important“,他和ie7有很多类似，如果想要区分开ie和FF,只要把FF的代码写在ie的前面即可（下面会写到） ，例如: background-color:#000 !important;
各大浏览器交集hack
以下段落出自CSS hack:区分IE6，IE7，firefox
区别不同浏览器，CSS hack写法：
区别IE6与FF：
background:orange; *background:blue;
区别IE6与IE7：
background:green !important; background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange; *background:green !important; *background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important

IE6
IE7
FF

*
√
√
×

!important
×
√
√

IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6，IE7，firefox
background:orange;*background:green;_background:blue;
这个很重要：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。Visit

CSS风格列表：20个CSS示例和技巧

Posted by tom
at 七月 25, 2008 No Comments »

收藏20个css示例，觉得效果都不错，而且有部分帖了相应代码，以便我们更好学习
相关网址：http://www.noupe.com/css/css-styled-lists-20-demos-tutorials-and-best-of.html

150+ Web 2.0 工具和相关资源

Posted by tom
at 七月 2, 2008 No Comments »

精心收集整理了超过150个 Web 2.0风格网站设计中可能会用到的工具, 如果你是一个网络高手, 那这些工具能让你加速你的工作进程. 如果你是一个网络菜鸟, 那这些工具能让你快速做到高手们才能做的事情. 包括漂亮的Web2.0 徽章, Logo标志, 图标, 图表, 收藏夹Favicon图标, 渐变图片, 纹理背景, 按钮, 背景图片和其它一些快捷的Web 2.0 工具并分享
BADGES 徽章工具和资源
Web 2.0 Badges - 这个网站专门提供Web2.0风格徽章下载和免费制作你自己的徽章.
Fresh Badge - 快速生成你自己的徽章.
adClustr - 提供漂亮的广告背景图片, 包括免费的和收费的Badges.
Deziner Folio - 收集了各种不同风格的Web2.0徽章.
BittBox - 免费的矢量徽章.
Official Seal Generator - 一套非常个性的徽章..
Photoshop Tutorial - 一个简单易学的快速教程, 教你如何使用Photoshop制作自己的Web2.0 徽章.
Glossy Photoshop Tutorial - 也是一个Photoshop教程, 教你如何使用Photoshop制作自己的Web2.0 徽章.
BadgeCreator - 在线创建个性身份证徽章
Web2.0徽章收集
BUTTONS 按钮
My Cool Button [...]

12 个极具创意的 Javascript + CSS 菜单效果

Posted by tom
at 六月 26, 2008 No Comments »

在谈到设计网站的导航栏以及菜单时，每一个网页设计师都希望自己的设计能够极具创意，与众不同。现在我们从网上收集了一些基于Javascript + CSS 的菜单效果，这些菜单使用都非常简单，而且也易于修改，相信它们一定能满足你的需要。
#1. Sexy Sliding Side Bar
漂亮的基于MooTools 框架的边栏平滑菜单效果。此外，还有一个基于Prototype 的版本。

示例1. 基于MooTools 的版本：点此查看
示例2. 基于Prototype 的版本：点此查看

#2. FastFind Menu Script
基于jQuery 框架，这个脚本可以利用动态的Ajax 嵌套加载多层菜单，还可以通过利用Interface for jQuery 组件生成拖放效果。
[...]

wTag:基于 php 和 js 的迷你聊天系统

Posted by tom
at 六月 24, 2008 No Comments »

wTag 是一个迷你的在线聊天系统，使用 JavaScript 和 PHP 编写，基于 Mysql 数据库，并运用了 AJAX 技术，能够即时显示聊天内容。wTag 基于 GNU GPL 许可颁发，这意味着你可以在通用公共许可下自由复制、修改 wTag 。
从上图可见 wTags 非常简单，仅仅包含一个聊天对话框、一个输入框、和最下面一排：版权链接、刷新、表情和提交四个按钮。当然，如果你愿意你可以通过改变、编写 CSS 文件来修改整个聊天系统的外观。
wTags 下载及安装：
1、这里下载 wTags 安装程序，上传至服务器。
2、修改 conf.php 文件（在 wtag 文件夹内），填入数据库信息，和 WordPress 的基本一样。

$dbhost = “localhost”; // 通常不用做改动
$dbuser = “username”; // 数据库用户名
$dbpass = “password”; // 数据库密码
$dbname = “databasename”; // 数据库名

3、在浏览器地址栏中输入 http://yoursite.com/wtag/install.php 运行安装。
4、安装完毕之后删除 install.php 文件。
系统演示：点这里观看 wTags 迷你在线聊天系统演示
Visit:sanliangfan

调整了博客的名称,布局和永久链接

Posted by tom
at 六月 22, 2008 No Comments »

自08年1月份上线以来,一直没有调整自己的博客.建立时用著名wordpress博客系统,并在网上找了一个国外风格的Wordpress Themes风格 WP Remix至今,今天星期天正好在家无事,调整了博客的名称,布局和永久链接,加入了顶部banner.
效果:http://www.tomjerry.cn
小插曲:设计好的顶部图片,在导入博客时,并在ps在原设计图测量高度,后在css调整样式和布局并在各浏览器里测试成功后,把ps关掉全部不保存,后才发现我的设计原图也没有保存,我的创意,后来重新把素材找回来,重新设计,感觉设计不出原来的效果,虽然有点相近,但色彩和光照阴影也没有之前的舒服了,郁闷中…
希望有订阅本博客的博友们相应调整一下:
名称从”印记 - Tom和Jerry的生活“已更改为”Tom和Jerry的生活 - 关注和分享互联网”
订阅地址:http://feed.feedsky.com/TomJerry或http://www.tomjerry.cn/feed

收藏几个CSS效果,非常不错

Posted by tom
at 六月 13, 2008 No Comments »

 
今天无意打开一个网站52W3C，有一个Free Templates栏目下有几个收藏CSS项目，里面包括Module、Layout，效果都非常不错，并且兼容 ie6 ,ie7, firefox, safari。

Good-Tutorials: 设计开发相关教程网站

Posted by tom
at 五月 17, 2008 No Comments »

如果你的英文够好, 又是一个想学习设计或开发知识的用户. 那Good-Tutorials是个不错的选择, 在这个网站里面, 收集有各种设计开发的相关教程, 并且采用的都是一步一步的方式, 力求简单易懂. 让每个用户都可以轻松学会想要掌握的知识.  所提供的教程包括Photoshop, CSS, Flash, HTML, Adobe Illustrator, Java, JavaScript, Maya, Photography, PHP, Ruby, Ruby on Rails 和3ds Max 等.

ADxMenu:基于Javascript和CSS的下拉菜单

Posted by tom
at 三月 1, 2008 No Comments »

ADxMenu 是一个由 JavaScript 和CSS创建的下拉菜单解决方案， 你可以利用它很轻松的为你的网页设计创建出漂亮的下拉菜单效果。
它使用<ul>和<li>标签构成，支持多级子菜单并且提供详细的使用方法，并且含有多种 JavaScript参数配置效果。ADxMenu良好运行于各大主流浏览器， (IE6需要一个专门的Hack),支持横向和纵向菜单，甚至可以控制下拉子菜单的显示位置为上下左右，完全自定义。

CSS Hack整理

Posted by tom
at 一月 17, 2008 No Comments »

CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务.
我进行前端开发的时候,测试用的浏览器大致有: IE7, IE6, Opera9(文章撰写时版本为9.25 8825), Safari3(文章撰写时版本为3.0.4 523.15), Firefox2(文章撰写时版本为2.0.0.11).
在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一.
IE系列:
selector { +property:value; } 在属性名前加上加号”+”,这个Hack只有IE系列可以识别.
selector { *property:value; } 在属性名前加上星号”*”,这个Hack只有IE系列可以识别.
selector { _property:value; } 在属性名前加上下划线”_”,这个Hack只有IE系列 (除IE7外) 识别.
* html selector{ property:value; } 在选择器上运用继承法 * html selector, 这个Hack只有IE系列 (除IE7外) 可以识别.
html/**/ >body  selector { property:value; } 在选择器上运用继承法 html/**/ >body  selector ,这个Hack只有IE系列 (除IE7外) 可以识别.
selector { property/**/:value; } 在属性名和冒号”:”之间加入注释,屏蔽IE6用.
selector/**/ [...]