Windows LiveWindows Live™
 
 
leo's profile≈≈昨夜的ΓΕΦ≈≈BlogLists Tools Help

Blog
    August 03

    说MSN Spaces改版

        当有一天被人告诉没有msn spaces是件很out的事的时候，我才发现msn出了spaces，我out了。
        从用用户体验上来说，msn spaces是让人又爱又恨，浏览速度成了最大障碍。从技术上来说，至少上个版本的spaces是很好的，第一次体验了ajax技术，虽然只是在后台编辑页面，后来在网络上大量被应用。
        昨天，也就是8.2，msn在没有任何通告的情况下该版了spaces，这次该版幅度比较大，从800*600改成了现在主流的1024*768；界面排布更是多了大量的更改，可以说是颠覆了以前的msn spaces。有几点是我认为不妥的。
        首先，文章的发布，修改等等的button放在了上面，这个是违反传统习惯和操作习惯的，我们写内容或者操作内容都是由上而下，完成后按提交，但现在是操作完后返回上面按提交，此一点个人认为是很大的失误。UI的设计原则是要符合用户操作习惯。
        再就是页面上的button全改成了文字式，也不再是传统的按钮。我不知道他们这样的目的是什么，从技术和用户体验上都找不出合适的理由，只能说这样让button更加不明显了。
        由上面两点的改变就让我昨天早上半个小时没找到怎么发表文章。
        既然改成1024了，后台编辑左边却只有150px的宽度，而且还写了overflow:hidden，导致我左边列表内容被切掉。
        还有标题的位置等等问题。也许是我对原来msn spaces的先入为主的观念，才对新的msn spaces有这么大意见。
    -----------------------------------------------------------------------------------------
        想写UI评论文，但好象不行，所以就仅在自己的spaces上以示“自慰”。
        这次msn spaces的改版至今未在UI业内网站上见人提及。
    10:07 AM | Add a comment | Read comments (2) | Permalink | Blog it | 技术文章
    March 28

    div下图片自适应解决方法

    作者：remain　时间： 2006-03-21　文档类型：原创　来自：蓝色理想

    以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
    下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。本人仅在ie6.0,ff1.5,opera7.0于winXP下测试通过，希望通过此篇文章抛砖引玉，望更多高手指点。关键在于：max-width:780px;以及下面那行。

    固定像素适应:

    <!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=gb2312" />
    <title>css2.0 VS ie</title>
    <style type="text/css">
    <!--
    body {
     font-size: 12px;
     text-align: center;
     margin: 0px;
     padding: 0px;
    }
    #pic{
      margin:0 auto;
      width:800px;
      padding:0;
      border:1px solid #333;
      }
    #pic img{
        max-width:780px;
     width:expression(document.body.clientWidth > 780? "780px": "auto" );
     border:1px dashed #000;
     }
    -->
    </style>
    </head>
    <body>
    <div id="pic">
    <img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片！"/>
    </div>
    </body>
    </html>

    百分比适应:

    <!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=gb2312" />
    <title>css2.0 VS ie</title>
    <style type="text/css">
    <!--
    body {
     font-size: 12px;
     text-align: center;
     margin: 0px;
     padding: 0px;
    }
    #pic{
      margin:0 auto;
      width:800px;
      padding:0;
      border:1px solid #333;
      }
    #pic img{
        max-width:780px;
     width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
     border:1px dashed #000;
     }
    -->
    </style>
    </head>
    <body>
    <div id="pic">
    <img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片！"/>
    </div>
    </body>
    </html>

    提醒:

    1 该方法不只是用于img;
    2 max-width,max-height,min-width,min-height.

    11:40 AM | Add a comment | Permalink | Blog it | 技术文章