优化用户体验-交互设计中心-72色网 - DIV+CSShttp://www.72color.com/- 优化网站|百度优化,谷歌优化,css+div布局,72色网站交互设计,72色用户体验,js,脚本,代码,flash,72色网站设计 - RainbowSoft Studio Z-Blog 1.8 Walle Build 91204zh-CNCopyright 72color.com Your WebSite. Some Rights Reserved. var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fb709747d78345f76df9883075f6eeba1' type='text/javascript'%3E%3C/script%3E")); admin 沪ICP备09011764号Mon, 06 Sep 2010 12:32:32 +0800让IE6,IE7,IE8支持css3属性chixianjin@gmail.com (chia)http://www.72color.com/post/233.htmlTue, 13 Jul 2010 19:22:48 +0800http://www.72color.com/post/233.html

IE6，7并不支持CSS3的属性，IE8也不能很好的支持CSS3。如何让ie支持border-radius (rounded), box-shadow ( shadow), text-shadow等这些属性呢？这里介绍一个通过htc脚本实现这些属性的方法。

首先下载ie-css3.htc脚本。

...]]>DIV+CSShttp://www.72color.com/post/233.html#commenthttp://www.72color.com/http://www.72color.com/feed.asp?cmt=233http://www.72color.com/cmd.asp?act=tb&id=233&key=4c625c21去掉button按钮左右两边的留白chixianjin@gmail.com (chia)http://www.72color.com/post/232.htmlFri, 09 Jul 2010 18:48:38 +0800http://www.72color.com/post/232.htmlbutton按钮，如果文字太多的话，左右两边留白也会很多，这样很不美观，而且是每个浏览器左右留白的宽度不一，
那么我们就用一个简单的css来解决这个问题，精益求精吗！

html
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
...

]]>DIV+CSShttp://www.72color.com/post/232.html#commenthttp://www.72color.com/http://www.72color.com/feed.asp?cmt=232http://www.72color.com/cmd.asp?act=tb&id=232&key=dd49e037浏览器css一些兼容性的对比chixianjin@gmail.com (chia)http://www.72color.com/post/224.htmlMon, 07 Jun 2010 22:48:04 +0800http://www.72color.com/post/224.html1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

...]]>DIV+CSShttp://www.72color.com/post/224.html#commenthttp://www.72color.com/http://www.72color.com/feed.asp?cmt=224http://www.72color.com/cmd.asp?act=tb&id=224&key=424739a8用css3制作的window7开始菜单样式chixianjin@gmail.com (chia)http://www.72color.com/post/222.htmlFri, 04 Jun 2010 18:40:22 +0800http://www.72color.com/post/222.html

看看css3的魅力，这是国外牛人用css3制作的win7开始菜单样式，相当逼真，css3果然强悍。

友情提示：请勿在IE下浏览，用ie8来看还有点接近，推荐用FF来看。

查看实例：http://www.jankoatwarpspeed.com/examples/windows7menu/

...]]>DIV+CSShttp://www.72color.com/post/222.html#commenthttp://www.72color.com/http://www.72color.com/feed.asp?cmt=222http://www.72color.com/cmd.asp?act=tb&id=222&key=b692a85dweb开发者福音：跨浏览器测试资源大全chixianjin@gmail.com (chia)http://www.72color.com/post/219.htmlWed, 02 Jun 2010 13:00:33 +0800http://www.72color.com/post/219.htmlbrowsershots Complete Guide to Cross Browser Compatibility Check

现在这个网络环境做web开发者、前端开发者真是一件痛并快乐的事，

有太多的浏览器可以使用，对 Web 开发与设计者而言，你有义务保证你的设计兼容所有主流浏览器。然而跨浏览器测试是件相当复杂的事，涉及不同的浏览器，不同的版本，不同的平台。本文介绍了与跨浏览器兼容测试有关的大量资源。有线上版本有线下软件，更有甚者还有收费的。

在线测试资源

Browsershots

...

]]>DIV+CSShttp://www.72color.com/post/219.html#commenthttp://www.72color.com/http://www.72color.com/feed.asp?cmt=219http://www.72color.com/cmd.asp?act=tb&id=219&key=e1059a57分享一些css技巧chixianjin@gmail.com (chia)http://www.72color.com/post/214.htmlWed, 19 May 2010 18:24:03 +0800http://www.72color.com/post/214.html72色做了几年的前端现在来总结一下css技巧，也就是网络上推荐的所谓“顶级”的css三个技巧。
第一条：css不要换行。
.jrtjImg{ position:absolute; top:0px; left:0px;  width:78px; height:44px; z-index:999; background:url(images/jrtjJl.gif) no-repeat;}
...

]]>DIV+CSShttp://www.72color.com/post/214.html#commenthttp://www.72color.com/http://www.72color.com/feed.asp?cmt=214http://www.72color.com/cmd.asp?act=tb&id=214&key=39c95458button难看？用css让她漂亮起来chixianjin@gmail.com (chia)http://www.72color.com/post/210.htmlFri, 30 Apr 2010 19:09:37 +0800http://www.72color.com/post/210.htmlbutton样式真的不是那么好看，而且在不同浏览器里面还不一样的显示方式，让我们这些做web的很头痛，想让他漂亮起来总是不是那么方便，现在72色就写写css的方法，就当给大家抛砖引玉，让大家行动起来让讨厌的button边的可爱点。

先预览一下把：button样式

button结构

...]]>DIV+CSShttp://www.72color.com/post/210.html#commenthttp://www.72color.com/http://www.72color.com/feed.asp?cmt=210http://www.72color.com/cmd.asp?act=tb&id=210&key=d8059554网站变黑灰色|全国哀悼日chixianjin@gmail.com (chia)http://www.72color.com/post/207.htmlWed, 21 Apr 2010 09:00:54 +0800http://www.72color.com/post/207.html今天是玉树地震全国哀悼日，我没也行动起来，在这里默默哀悼，

使你的站点，博客变成黑灰色吧。

只要把下面这段代买加到css文件里就可以是整个站点被黑灰色。（不过在        FF里面不起作用，这就不管了。）

css代码:

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

...]]>DIV+CSShttp://www.72color.com/post/207.html#commenthttp://www.72color.com/http://www.72color.com/feed.asp?cmt=207http://www.72color.com/cmd.asp?act=tb&id=207&key=c15c0b89兼容各大主流浏览器的css手册chixianjin@gmail.com (chia)http://www.72color.com/post/203.htmlMon, 12 Apr 2010 17:52:38 +0800http://www.72color.com/post/203.html现在做网站前端的真是命苦呀，要兼顾的浏览器就有n多个，一个项目坐下来累个半死，

我从网上整理了一些浏览器兼容的css方法，兼容IE6\IE7\IE8\Chrome\firefox等主流浏览器。


div类

1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto
...

]]>DIV+CSShttp://www.72color.com/post/203.html#commenthttp://www.72color.com/http://www.72color.com/feed.asp?cmt=203http://www.72color.com/cmd.asp?act=tb&id=203&key=23399a70用CSS缩写给你的网站加速chixianjin@gmail.com (chia)http://www.72color.com/post/193.htmlMon, 15 Mar 2010 13:05:52 +0800http://www.72color.com/post/193.htmlWeb网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。


       为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25－50％。

...

]]>DIV+CSShttp://www.72color.com/post/193.html#commenthttp://www.72color.com/http://www.72color.com/feed.asp?cmt=193http://www.72color.com/cmd.asp?act=tb&id=193&key=4c5cabdf