Loading...

2009年4月20日星期一

ie下的自适应垂直居中

long time no see,前几天写页面ui时总结的小心得。把需要显示的内容进行自适应的垂直居中。希望对大家在写widget的时候有一丁点帮助。
众所周知,水平居中用margin:0 auto;width:xxxpx;的方法就可以轻松实现。垂直居中的方法又是怎样呢?
hata简单的post一下
css部分:
#wrapper{#position:relative;}
#mid{#overflow:visible;#position:absolute;#top:50%;}
#content{#position:relative;#top:-50%;}
花括号内#号是ie hack的方法,也就是上面几句对ff完全不起作用。

应对div的结构为
<div id="wrapper">
  <div id="mid">
    <div id="content">居中内容</div>
  </div>
</div>

阅读全文...

2009年4月13日星期一

假如浏览器是女人

藉借对女性的遐想,投射到浏览器的特性上。(感觉是一种很好的形象塑造的方法)

原创图片地址
“IE真的有这么糟糕吗?”
最想说一下IE。老实地交代下,个人使用ie的经验不太好,经常生病什么的。HATA觉得IE是被形容得最为精辟和传神的,虽然从市场份额来看,很大程度是因为树大招风的原因。
PS:如果要写一篇《假如操作系统是女人》的话,我想windows也绝对是首当其冲须要套用IE那句话的产品。

“自我评价”,下面送上各个浏览器特色的官方中文页面链接:
fire fox:http://www.mozillaonline.com/products/firefox/features/
opera:http://cn.opera.com/products/desktop/
safari:http://www.apple.com.cn/safari/whats-new.html
chrome:http://www.google.com/chrome/intl/zh-CN/features.html?hl=zh-CN
IE:http://www.microsoft.com/china/windows/internet-explorer/features/overview.aspx

阅读全文...

2009年4月8日星期三

google的mp3搜索--巨鲸音乐widget--动手制作flash开关

最近听朋友说google在中国大陆出了一个音乐搜索的功能,HATA昨天click上google看了一下,觉得做的挺好的。对比很早就提供了同类服务的百度,google这次添加了两个特色功能:
1,在播放音乐时会通过浏览器的cookie记录下播放的音乐在播放器列表里,那样我们就可以在下次打开google提供的播放器上看到以前播放过的歌。同样,可以通过试听一大堆歌后才选择喜欢的歌曲下载。
2,用泡泡挑歌,这个大概就是google的"手气不错"音乐版。HATA也同样觉得"手气不错"这个功能更适合在试听MP3上。nice try:

by the way,这个功能令我想起一个flash制作的音乐网站http://musicovery.com/

google合作伙伴巨鲸音乐网

在google的音乐播放器上面,会看到Top100.cn的商标,同时留意地址的话,也会发现http://g.top100.cn/的域名,没错,这次google在音乐搜索服务上的合作伙伴是巨鲸音乐网。
其实HATA比较少关心音乐的事情,因为HATA比较喜欢听古典。。不过冲着google的名声,HATA就点了一下巨鲸音乐网的链接。结果一眼就给HATA瞄到了右上角的音乐widget。
试用巨鲸的widget。HATA很少看见有国内的音乐widget(偶是乡巴佬,不喜qqzone,(ˇ︿ˇ)),也很少听见“正版音乐”之类的口号。。I like it~
不过试用一下。发现巨鲸自家的widget居然犯傻的。。两个毛病
1,打开网页就自动播放,确实不喜欢。
2,修改widget的代码后变得不稳定,一旦修改了widget(例如高度)就会变得不稳定了。。太犯傻啦。( ¯▽¯;)

解决flash自动播放的方法就是弄一个开关,最后放出一个HATA自用的简单开关,有javascript语言。下面是代码:
<center><div id="playmp3"><a href="javascript:void(0)" onclick="insert('playmp3','mp3player')">
听听音乐?H3M by 陈奕迅</a></div></center>
<!-- 隐藏部分 -->
<div style="display:none"><div id="closemp3"><a href="javascript:void(0)" onclick="insert('playmp3','mp3player')">
听听音乐?H3M by 陈奕迅</a></div><div id="mp3player"><li><div>(嵌入你的widget代码或flash什么的)</div></li><li><div><a href="javascript:void(0)" onclick="insert('playmp3','closemp3')">close</a></div></li></div></div>

<script>
function insert(a1,b1){
var a=a1;
var b=b1;
document.getElementById(a).innerHTML = document.getElementById(b).innerHTML;
}
</script>

开关按钮标题为“听听音乐?H3M by 陈奕迅”,可自行修改。演示DEMO:






原创文章如转载,请注明:转载自HATA菜谱

阅读全文...