ICOjump - 交互设计是衔接用户与产品的工具 | 交互设计是衔接用户与产品的工具

“终极”的邪恶表格

2008年05月01日

之前曾经写过一篇关于表格的文章，css2对表格增加的一些东东。但是看到了一篇更详细的文章，特地转来，大家一起学习学习，里面的内容很详细，对表格补充了很多seo优化的东西。

简单的层登录框，与登陆完成效果

2008年04月25日

在经典论坛又看到一个效果，最近喜欢上了前台，也把这个效果给学习了一下，并且增加了一些新的东西。咋们先看效果吧

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta NAME="Generator" CONTENT="EditPlus"/> <meta NAME="Author" CONTENT=""/> <meta NAME="Keywords" CONTENT=""/> <meta NAME="Description" CONTENT=""/> </head> <style type="text/css"> body,div{ margin:0;padding:0;} #cake{ display:none; background:#000; position:absolute; z-index:1000; width:100%; height:100%; filter:Alpha(opacity=50); } #view_content{ display:none; position: absolute; width: 100%; padding-top: 20%; z-index: 1001; left:0px; top:0px; } #view_content table{ background: #ff7300; font-size:14px; filter:progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=4,offY=4,positives=true); } #view_content table tbody{ background:#FEB16B; } #check{ display:none; position: absolute; width: 300px; font-size:12px; padding:2px; margin: -50px 0 0 -150px; z-index: 1002; left:50%; top:40%; text-align:center; border:3px solid #0CF; background:#fff; } </style> <script type="text/javascript"> function openCake(){ document.getElementById('cake').style.display='block'; document.getElementById('view_content').style.display='block'; } function loginCake(){ document.getElementById('check').style.display='block'; setTimeout("changeP(check)",3000); } function changeP(o){ document.getElementById('check').innerHTML="!!!!登陆完成!!!!!,5秒钟后退出"; setTimeout("closeCake()",3000); } function closeCake(){ document.getElementById("cake").style.display="none"; document.getElementById("view_content").style.display="none"; document.getElementById('check').style.display='none'; } </script> <body> <div id="cake"></div> <div id="view_content"> <table align="center"> <thead> <tr> <td>登录框</td> <td align="right"><button class="out" onclick="closeCake()">x</button></td> </tr> </thead> <tbody> <tr> <td>用户名</td> <td><input type="text" name="username" /></td> </tr> <tr> <td>密 码</td> <td><input type="text" name="pwd" /></td> </tr> </tbody> <tfoot> <tr> <td colspan="2" ><button onclick="loginCake()">确定登陆</button></td> </tr> </tfoot> </table> </div> <div id="check">登录中....</div> <div id="wrap"> <button onclick="openCake()">点击登陆</button> 这是一个小小的测试 </div> </body> </html>

提示：你可以先修改部分代码再运行。

效果其实很简单，就是一个登陆框，类似鲜果的登陆。不过鲜果做到了在FF下还是一样的半透明效果，我还未增加此效果。我在代码上面做了些注释，放上来，大家一起学习下，感觉代码还能再精简，可惜小弟不才，希望高手能够改善。
查看全文 »

0个评论标签: css , javascript , js

学习笔记:打开关闭动画效果

2008年04月21日

效果原帖在这：http://bbs.blueidea.com/viewthread.php?tid=2844175&extra=&page=1
我主要是自己在学习这段脚本的时候，给自己弄个小档案，同时也写了注释，方便自己，也分享给大家。

先预览下效果：

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta NAME="Generator" CONTENT="EditPlus"/> <meta NAME="Author" CONTENT=""/> <meta NAME="Keywords" CONTENT=""/> <meta NAME="Description" CONTENT=""/> </head> <style type="text/css"> .od{ border:2px solid #000; background:#666; color:#fff; padding:3px 5px; font-size:12px; } #fd{ border:2px solid blue; color:#000; margin-top:2px; margin-left:2px; background:#99FF00; position:absolute; left:20px; top:50px; cursor:move; float:left; } </style> <body> <div id="body"> <a href="#" class="od" onclick = "show('fd');">[打开层]</a> <a href="#" class="od" onclick = "closed('fd');">[关闭层]</a> </div> <div id="fd" style="display:none;filter:alpha(opacity=50);opacity:1;">移动层</div> </body> <script type="text/javascript"> var oWE="500"; //层的宽度 var oHE="200"; //层的高度 var proX; var proY; //打开层fd function show(id){ clearInterval(proX); clearInterval(proY); //先定义将要展开层(fd)的属性,包括高度，长度。 o=document.getElementById(id); o.style.display="block"; o.style.width="1px"; o.style.height="1px"; proX=setInterval(function(){openX(o,oWE)},10); } //层fd的宽度 function openX(o,x){ oWN=parseInt(o.style.width); //parseInt 将变量转换为整数 if (x > oWN){ o.style.width=oWN+Math.ceil((x-oWN)/5)+"px"; //Math.ceil((x-oWN)/5) 这个我的理解是步长,让层变宽时候的效果有渐进的效果.如果您不理解，可以将这个整条更换为 oWN + 10 + "px" 这样，他就会每次以10px变宽了。 }else{ clearInterval(proX); proY=setInterval(function(){openY(o,oHE)},10); } } //层fd的高度 function openY(o,y){ oHN=parseInt(o.style.height); if (y > oHN){ o.style.height=oHN+Math.ceil((y-oHN)/5)+"px"; }else{ clearInterval(proY); } } //关闭层fd function closed(id){ clearInterval(proX); clearInterval(proY); o=document.getElementById(id); if (o.style.display=="block"){ proYc=setInterval(function(){closeY(o)},10);//先关闭y轴,再关闭x轴 } } function closeY(o){ oHN=parseInt(o.style.height); if (oHN > 0){ o.style.height= (oHN - Math.ceil(oHN/5))+"px"; }else{ clearInterval(proYc); proXc=setInterval(function(){closeX(o)},10); } } function closeX(o){ oWN=parseInt(o.style.width); if (oWN > 0){ o.style.width=(oWN- Math.ceil(oWN/5))+ "px"; }else{ clearInterval(proXc); o.style.display="none"; } } </script> </html>

提示：你可以先修改部分代码再运行。

查看全文 »

0个评论标签: javascript , js , php

非常有意义的视频《格斗游戏进化史》

2008年04月19日

格斗游戏的进化史

0个评论标签:

文字设计在网页中需要哪些注意？

2008年04月16日

我从很多朋友的口中都听到过“网站设计还是用英语比较好”。
当然，这点我不否认，但是既然母语是中文，那还是应该使用中文来做，毕竟看着习惯也喜欢。
那么如何优化中文文字的在网页中显示？

近期我在逛网站的时候，找到了几篇文章。分享并摘录一些里面的重点：
《网站中文字的视觉设计》
1.


字体的单位用em而不用px，尽管12px和0.8em大小差不多。

updete:感谢网友 Dreamcolor 推荐文章 95%的中国网站需要重写CSS ，该文很详细的解释了px和em的差别和原理。这点写之前是我想当然了，没有深入理解em单位。只看到很多用em的视觉效果不好看，现在明白了，是因为没有把em单位和px对上号。结论是应该用em而不是px，但需要把em的值设置好。
2.

在css文件body中的font-family里面保证”宋体”前面有Arial或者verdana，个人推荐这么写：font-family:Helvetica,Georgia,Arial,sans-serif，宋体。这样能保证你界面中的字母、数字、符号看上去美观一些，更重要的是更加易读。
3.
子条 说：12号宋体时，我们一般使用18-20像素的行距。14号宋体通常使用22-24像素的行距。

很赞同，这个行距大小随着单行字数的多少而上下浮动。我认为12px字如果单行字数少的话，17也是可以接受的。
4.
正文一行字数最好不超过50，首页的标题文字以8-20字为佳。

12和14px字相对来说最精致，13px在需要的时候可以做正文字，word里面默认的字的大小相当于网页的13px字。
5.
对于一段文字，尤其是正文部分，保证左右至少有15px的留白，便于用户换行时不受到干扰。

文字和背景对比要足够明显，保证最弱文字的可读性。

查看全文 »

0个评论标签: asp , css , ucd , ue

ICOjump – 交互设计是衔接用户与产品的工具

“终极”的邪恶表格

简单的层登录框，与登陆完成效果

学习笔记:打开关闭动画效果

非常有意义的视频《格斗游戏进化史》

文字设计在网页中需要哪些注意？

这里都有我

分类

标签云

最新文章