据国外媒体报道，在微软“Bing”（必应）搜索引擎刚刚推出之际，一些科技博客就发现必应存在漏洞，可自动播放色情视频。
之前体验了一把“bing”，结果是在是令我失望，找不到一处胜过baidu或者google，正当我失望之极的时候，看到了有关“bing”漏洞的文章，说可播放色情视频。
使用cn.bing.com域名的童鞋就不要试了，不管你试什么隐晦的关键词都不行的，因为cn的被阉割了。
不过。。。嘿嘿嘿。。。看下图：
现在看到了吧，别着急，还有一个最实用的功能你不知道：鼠标停在视频预览图上即可播放，还能翻墙播放。
这省了广大狼友多少事啊，我终于发现“bing”一处胜过baidu和google的功能了。
[版权归作者ZeroZ所有，欢迎转载，但请事先告知作者并注明出处]
想这个题目花了我半个小时的时间，因为就我所知（只是就我所知），现在自适应宽度的圆角按钮方法有很多，而且都非常不错，兼容性也很好，这里我就不再阐述，baidu或者google一下就会有一堆方法任你选。
近日，在开发公司的cms时，遇到一个小按钮的问题，先看一下设计图：
按照以前的方法，我肯定会这样做：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta name="author" content="uusalon@gamil.com" /> <title>使背景透明的圆角按钮自适应宽度</title> <style> /* ------------------------------ css for Button design by ZeroZ & uusalon@gmail.com date 2009-5-18 ---------------------------- */ /* Reset */ body,ul,ol,li{margin:0;padding:0;font-family:"宋体";line-height:normal;} ul,ol{list-style:none;} img{border:0;} .clear{clear:both;} a{color:#000000;text-decoration:none;} a:hover{text-decoration:none;color:#096ed5;} body{font-size:12px;padding:20px;} .demo1 li{float:left;margin:0 2px;} .demo1 li a{float:left;background:url(http://www.zeroz.cn/blog/wp-content/uploads/2009/05/button_demo/img/button_1.png) no-repeat left top;height:24px;line-height:24px;padding:0 0 0 10px;} .demo1 li a span{float:left;background:url(http://www.zeroz.cn/blog/wp-content/uploads/2009/05/button_demo/img/button_1.png) no-repeat 100% top;line-height:24px;padding:0 10px 0 0;} </style> </head> <body> <ul class="demo1"> <li><a href="#"><span>删除</span></a></li> <li><a href="#"><span>修改属性</span></a></li> <li><a href="#"><span>权限修改</span></a></li> <li><a href="#"><span>表单定义</span></a></li> </ul> </body> </html>
上面的方法成立的基础是背景图片不透明，当背景图片是透明的话，如
，那么就会出现按钮右侧不是圆角，而是很直的直角：
造成这种情况的原因是因为按钮右上角和右下角的一个像素是透明的，那么就显示出后面的背景图片，后面背景图片是有颜色的，这样就造成一个视错觉，span这个层和a这个层的背景图片叠加在一起就会显示为直角。不知道我这样解释有没有解释清楚，我想应该清楚了，有点基础的稍微想想就明白（我刚开始也不明白，费了好大劲才想明白是怎么回事）。
出现这种情况之后，一时不知道该怎么办了，因为这些按钮要用到很多地方，背景不一定是白色，所以背景图片一定要是透明的。我就想啊想，想啊想，想啊想，终于，我想不到该怎么解决了。然后我就在网上找啊找，找啊找，找啊找，找了很多自适应宽度的圆角使用例子，但要不然背景图片不是透明的，要不然兼容性不行，当我准备放弃的时候，想到了google。google的页面兼容性绝对好，于是就找到他们的其中一个产品中的按钮，仔细分析了一下，终于明白其中的诀窍。
首先，是结构不一样，我上面的方法结构是列表的结构，利用float属性来实现按钮横向排列。但google的按钮最外层就是一个div标记，而且也是横向排列结构，先来看代码：
<div class="top_button button_inline_block"> <a href="#"> <div class="top_button_outer button_inline_block"> <div class="top_button_inner button_inline_block"> <span class="txt">修改属性</span> </div> </div> </a> </div>
有点意思吧，别急，接下来还有！
其次，是背景图片不一样，我先前用的背景图片是带边框的：
而google的按钮使用的背景图片是不带边框的：
那么，按钮的边框哪来的呢？对，是用border属性来实现的。看到这里有人会奇怪了，用border的话，那不成直角了么？我们要的是圆角，别着急，我现在就是要用border来实现圆角效果，看一下整体代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta name="author" content="uusalon@gamil.com" /> <title>使背景透明的圆角按钮自适应宽度</title> <style> /* ------------------------------ css for Button design by ZeroZ & uusalon@gmail.com date 2009-5-18 ---------------------------- */ /* Reset */ body,ul,ol,li{margin:0;padding:0;font-family:"宋体";line-height:normal;} ul,ol{list-style:none;} img{border:0;} .clear{clear:both;} a{color:#000000;text-decoration:none;} a:hover{text-decoration:none;color:#096ed5;} body{font-size:12px;padding:20px;} /* Gecko hack;Pre-FF3 Gecko uses -moz-inline-box instead of inline-block. */ html>body .inline_block{ display:-moz-inline-box;/* This is ignored by FF3 and later */ display:inline-block;}/* This is ignored by pre-FF3 Gecko */ /* Default rule;only Safari,Webkit,and Opera handle it without hacks. */ .inline_block{position:relative;display:inline-block;cursor:pointer;} /* Pre-IE7 IE hack. On IE,"display:inline-block" only gives the element */ /* layout,but doesn't give it inline behavior. Subsequently setting display */ /* to inline does the trick. */ * html .inline_block{display:inline;} /* IE7-only hack. On IE,"display:inline-block" only gives the element */ /* layout,but doesn't give it inline behavior. Subsequently setting display */ /* to inline does the trick. */ *:first-child+html .inline_block{display:inline;} /* Pre-IE7 IE hack;ignored by IE7 and all non-IE browsers. */ * html .button_inner{ /* IE6 needs to have the box shifted to make the borders line up. */ left:-1px} /* IE7-only hack;ignored by all other browsers. */ *:first-child+html .button_inner{ /* IE7 needs to have the box shifted to make the borders line up. */ left:-1px} .button{height:24px;margin:0 5px 0 0;background:url(http://www.zeroz.cn/blog/wp-content/uploads/2009/05/button_demo/img/button_2.gif) repeat-x left top;} .button_outer{border-color:#bfcbdf;border-style:solid;border-width:1px 0;} .button_inner{border-color:#bfcbdf;border-style:solid;border-width:0 1px;margin:0 -1px;padding:0 4px 0px;} .button_inner span{height:24px;margin:3px 0 0;line-height:23px;} </style> </head> <body> <div class="button inline_block"> <a href="#"> <div class="button_outer inline_block"> <div class="button_inner inline_block"> <span>删除</span> </div> </div> </a> </div> <div class="button inline_block"> <a href="#"> <div class="button_outer inline_block"> <div class="button_inner inline_block"> <span>修改属性</span> </div> </div> </a> </div> <div class="button inline_block"> <a href="#"> <div class="button_outer inline_block"> <div class="button_inner inline_block"> <span>权限修改</span> </div> </div> </a> </div> <div class="button inline_block"> <a href="#"> <div class="button_outer inline_block"> <div class="button_inner inline_block"> <span>表单定义</span> </div> </div> </a> </div> </body> </html>
我们来分析一下代码，看看边框是如何来的。
1、给了button这个层一个背景图片，并让他平铺；
2、给button_outer这个层上、下边框，并写上颜色
3、给button_inner这个层左、右边框，并让左边框往左移动一个像素，右边框往右移动一个像素，也就是margin:0 -1px;
4、最后加上各个属性来兼容各个浏览器（这里面的东西我不一定能解释清楚，好在代码中都有注释，应该能看懂！）
完成以上四个步骤，这个按钮就出来了，看看效果是不是和设计图一样是圆角？哈哈，虽然方法复杂了点，也运用了很多hack，语义基本也没有了，但是这种按钮我只运用到产品软件中，并没有运用改到网站里。google也是运用改到了他们的产品软件中，所以，不存在什么语义重要不重要之类的，达到目的就行。
文中可能有解释的不到位或者错误的地方，欢迎对此有深入研究的童鞋批评指正！
这篮投的太帅了，以前也见过这种超远距离的投篮。
如果NBA、CBA的队员都这种绝技，WOW…
怎么添加自己的google自定义搜索页我就不用说了吧，网上一搜一大堆，这里有一篇比较规范的文章，可以参考。
添加完搜索页之后，我们肯定要调整一下页面的宽度，google考虑的很周到，在提供的代码中，有一个参数是调整iframe页面的宽度：var googleSearchFrameWidth = 500;，可是在我改了几次之后发现都没起到作用，不知道是我自己的原因，还是搜索页的原因。再者，我的博客的宽度是自适应的，给iframe写一个固定的宽度似乎不是很好，于是就想到用css来控制一下iframe的宽度。
找到主题所在的css样式，然后在最后一行添加：#cse-search-results iframe{width:98%;}
#cse-search-results是iframe页外层的ID，然后写上百分比就可以了，喜欢的朋友可以试试，这个百分比根据自己主题的样式来调整。
兼容：IE/Firefox/Chrome等主流浏览器。
1、最近要搬家。房子是找好了，只不过别人还没搬，说是五一搬，那好吧，等到五一。找房子真不是人干的事，房源多的是，但想找到自己满意的房子可真不容易，不是太贵了就是家具不齐全。找了大概有一个多月，我们以东三环为纵线，北到北苑的房子，南到潘家园的房子，几乎都看了。每个周末都去看，真累。上周末把一大部分的东西先运到找好的房子里，剩下一床被子，洗刷用品，等五一打一包就过去了。搬家的过程中可能是那包鞋太沉，把左胳膊给累着了，我估计是轻微的肌肉拉伤，造成左胳膊基本抬不起来，跟残疾人似的，那滋味真不好受。我也终于体会到残疾人的不便了。
2、昨天下班回家一看，吓我一跳，客厅、厨房、卫生间都干净的跟什么似的。后来才知道是中介公司找保洁来打扫卫生了，这保洁真敬业，除了厨房门框上的油没弄掉，其他的都干净的不像话。隔壁大姐回来后发现她放在客厅的鞋都不见了，放在阳台上的饮水机加热器也不见了，反正她放在屋外的东西都不见了，问了之后才知道保洁都给当垃圾扔了。谁知道保洁扔没扔，那些东西卖了也能卖几百块。
3、前天晚上Rabbit把家里的其中一个开关给搞坏了，开关关不上，造成整个房子线路一直短路。也就是说没办法用电。昨天下班回去我搞了好一会，也没给弄好。赶紧给电工打电话，等到9点多的时候电工来了，其实他也不是电工，是中介公司的，具体干什么的不知道，因为我给他领导（以前房东）打的电话，于是他领导就让他来给搞一下。没想到他2分钟就搞定了，把开关拆了，把里面的线给掐了，缠上绝缘胶布，合上开关就好了。真是太感谢这位不懂电的电工，不然晚上就要抹黑了，大老远跑来的也没吃饭，真是不好意思，于是我就把他是送到电梯里面，好好谢了他几句。顺便说一句，那哥们真高，起码快1.9米了吧（据我不确定的目测）！
4、本来五一计划要去武汉边的一个城市参加Rabbit的一个同学的婚礼，后来小算了一下开销，俩人来回加上礼钱、吃住最少也得3000大洋，觉得太不值了，时间还太紧。还有房子的事情没着落，就决定不去了。以后有机会再说。
5、前段时间我弟弟来国家队集训，我们俩大概都5年没见面了。上次见还是04年的春节，这孩子从小就在外面练体操，自从去了山西省队，就只能四年回一次家。我去北体接他的时候感觉除了胖了点，性格倒是没多大变化。听他说这次比完全运会就要退役了，到北京上学。挺好，知道学习了，训练的日子终于要结束了。
第一视频最近一直在改版，有的频道是重新设计的，有的是原封不动的从一个系统上转到另外一个系统上。
前天刚把新版的首页给做完，他们的经理在做之前要我给些建议，于是我也就不谦虚的给了一些建议，包括产品设计、页面设计、用户体验等乱七八糟的都说了一点点，那经理说是反馈给他们领导了，之后的确有调整，只不过是调整的一些细节，我提的建议几乎都没有采用，也是，我又不是他们公司的人，我的建议为什么要采用。
等我把页面做出来之后，内容页录入测试了，基本都快完了，那经理对我感慨了一句：“我也觉得这一版没有以前的好！”
产品设计是需要思考，需要调研，需要周密的策划的，我不知道他们有没有经过这些专业的过程，这里有一篇关于产品设计都需要思考什么东西的文章，仅供参考！
一、模拟用户行为的思考：
1、用户通过搜索（本站搜索、外地搜索引擎搜索）进入最终页
2、第一次来到网站，他将会感受到什么（视觉传达）？他会看到到什么（信息传达）？
3、他会做如何的浏览停留或下一步操作？（停留时间、二跳操作）
4、他将会成为你的用户吗？（他为什么要注册成为用户、网站给他提供哪些服务）
5、他关闭了网页，回头还会回来么？
二、产品设计者本身的思考：
1、用户第一次进来，将给他的感觉是什么？
频道导航、位置导航、社会导航、页面布局、页面风格、页面视觉效果、内容密集度、页面文字的提示性。
2、首先要呈现给他的内容是什么？是不是他想要的？
用户最想看的内容是什么，他来到这里最关注的内容是什么，我们能不能第一时间满足他，要素如：标题、图片、内容、联系方式、用户对信息的赞贬度、评价。
3、首先要提供给他的核心服务是什么？他是不是很明白的知道？是不是很方便的使用？
用户进来后，我们提供的核心服务是什么？信息可比性服务、翻译服务、信息地图服务、音乐试听服务、打折促销服务、免费发送短信服务、在线免费通话服务、还是资料素材下载服务？还是其它赠送或优惠服务？
4、页面信息构架的内容推荐性设计是不是合理？
网站是借自己的牌坊，宣传自己的内容获得流量转换或广告的收益。在页面信息构架的内容可推荐性设计上，我们以怎么样的方式去推荐内容，强制性模块内容推荐、还是内容相关性匹配推荐？哪什么样的页面位置去更好的推荐？
5、页面信息构架的功能互动性设计是不是可用？怎么评估功能的互动？
互动性、交互性设计，可以很友好的和用户建立起沟通，包括交互方式、交互效果、交互提醒、流量诱导，以及网站的交互信息的输出等影响着用户对网站的活跃度认识，参与度积极性。
6、怎么样把这个用户留下来？
什么时候让他注册、引导他注册？用哪种方式提醒他再次登陆，怎么样通过粘度、运营机制让他邀请别人浏览、注册。收藏？
最后总结：
页面的改版，围绕核心功能，要遵从页面逻辑，遵从页面视觉，遵从页面体验。以数据进行分析，再进行页面的调整，如：广告位、活动专区的位置调整。
原文：http://www.kuliqiang.com/?p=243
如果让我以上述的思考来看第一视频首页这次的改版，我觉得他们就没有好好思考，像我这么不专业的人都能根据一些专业权威知识来挑出那么多的问题，可见是有多么大的问题了。目前首页还没正式上线，估计五一前后吧，上线之后各位就可以仔细看看他们的这此首页改版有没有认真思考。
目前网络上大部分关于ie8的hack都是测试版的，最有名的可能要数那张linxz.cn的hack图片了，这张图片估计被国内的网友转载了几十万次，但目前这张图里的方法对IE8正式版是无效的。
刚刚在网上看到一篇关于ie8正式版css hack的文章，就想收藏过来了。
以下的IE8均指IE8正式版,版本号:8.0.6001.18702
"\9" 例:"margin:0px auto\9;"。这里的"\9"所有的IE都识别，但Firefox不识别。 "*" IE6、IE7可以识别。IE8、FireFox不能。 "_" IE6可以识别"_"，IE7、IE8、FireFox不能。
如此，就可以完全区分开IE6、IE7、IE8、FireFox了。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>区别IE6、IE7、IE8、FireFox的CSS hack</title> <style type="text/css"> #test,#note{margin:0 auto;text-align:center;} #test{width:200px;height:30px;border: 1px solid #000000;color:#fff;line-height:30px;} .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/ *background-color: #0066FF; /*IE6、IE7会变为蓝色*/ _background-color: #009933; /*IE6会变为绿色*/ } </style> </head> <body> <div id="test" class="color">测试方块</div> <div id="note"> <strong style="color:#009933">IE6</strong> <strong style="color:#0066FF">IE7</strong> <strong style="color:#FF0000">IE8</strong> <strong style="color:#CC00FF">FireFox</strong> </div> </body> </html>
什么是CSS裸奔节？
CSS裸奔节就是将这整站的css样式都去掉，这样所有的布局，颜色，背景什么的就都没有了(除非你使用table布局)，只剩下html实体显示出来，起源好像是比较无聊的想法，就是剥去css的外衣，让大家看看你的(x)html代码是否工整，但是时至html语义被极力推崇的今日，CSS裸奔节就给外的有意义！
CSS裸奔节的意义
不管CSS裸奔节的原始意义是什么，或许只是一个网络恶作剧，但是从第一届CSS裸奔节（2006年4月5日）开始，CSS裸奔节的意义在于：推动Web标准、提倡简洁为美、使用正确的 (x)html语义标记、良好的层次结构。
告诫大家做页面不仅仅是把还原设计稿，更不是所谓的css+div，更多的是使用正确的 (x)html语义标记、良好的层次结构。
历届CSS Naked Day的举办时间：
第一届CSS裸奔节：2006年4月5日
第二届CSS裸奔节：2007年4月5日
第三届CSS裸奔节：2008年4月9日
第四届CSS裸奔节：2009年4月9日
你可以在在CSS Naked Day的官方页面提交你的网站地址,据作者的介绍,你的网址将会在一个工作日之内出现在页面的裸奔网站列表中,当然,列表的现实将是随机的.因为相应这个CSS Naked Day活动的网站实在是太多了.
因flickr网站被墙了，所以图片都不显示。shit。
我会尽快换个地方！
周末的时候去了趟动物园，一直在围着西区转，见到的都是两栖爬行动物和飞禽，大型爬行动物和水货都没有去转，太累了，也没时间了。期间我一直在找传说中的神兽—-“草泥马”，本以为会有很多人围观，但好像这种在网上盛行的神兽住所周围很冷清，没几个人，这是为什么呢？下面，上图：
首先，别急，这不是神兽，这是一种飞禽，具体叫什么我给忘了，就在火烈鸟旁边，这鸟的跪姿很特别，难道它的腿可以180°旋转？
继续查看全文
CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O’Reilly的
文档流
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.
每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动.
内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素.
有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理.
浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。
浮动概念让人迷惑根源在于浏览器对理论的解读造成的。只能说很多人以IE做标准，其实它不是。
基于文档流, 我们可以很容易理解以下的定位模式:
相对定位, 即相对于元素在文档流中位置进行偏移. 但保留原占位.
绝对定位, 即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移
固定定位, 即完全脱离文档流, 相对于视区进行偏移.
接下来还有几个问题我搞不明白的
1、作为三大基本元素之一的内联元素, 它跟块级元素的主要区别在哪?
2、Clear属性取right值时怎么理解? 貌似实验情况总跟理论不符.
内联元素是什么意思呢？什么是块级别元素。 继续查看全文
-
最新留言
shaun：很奇怪啊 我修改了代码 但是网页上没反应呢 哪里出问题了呢
json：你好，想请教你一下，http://www.zeroz.cn/...
图片不显示：分享到前面的图片不显示阿
天天记事：这个学习了，最近想换主题还不知道换什么呢，到时候把这个功能加...
企业网站建设：博客搞得不错，欢迎也到我那看看，提提建议。
万戈：原来用的是脚本，果然无敌通用
丫头：给你留言后我研究了下，已经成功了，刚开始学这个东西，没考虑到...
insect：3.0已经不从在这个问题了
anyLiv：我非常同意你的说法，每次周围有人刻意强调 DIV + CSS...
吖吖：早这这前我也是爱死这首歌了，嘿嘿