博客

  • 自定义右键菜单

    <!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>自定义右键菜单-web前端菜鸟团</title>
    <script type="text/javascript">
    window.onload=function()
    {
    var oMyMenu=document.getElementById('menu');
    document.oncontextmenu=function(ev)
    {
    var oEvent=ev||event;
    oMyMenu.style.display="block";
    oMyMenu.style.left=oEvent.clientX+'px';
    oMyMenu.style.top=oEvent.clientY+'px';
    //oEvent.cancelBubble=true;
    var oLi=oMyMenu.getElementsByTagName('li');
    var i=0;
    for(i=0;i<oLi.length;i++)
    {
    oLi[i].onmouseover=function()
    {
    for(i=0;i<oLi.length;i++)
    {
    oLi[i].className="";
    }
    this.className="active";
    }
    }
    return false; //不阻止也成?~
    }
    document.onclick=function()
    {
    oMyMenu.style.display="none";
    };
    };
    </script>
    <style type="text/css">
    *{ padding:0px; margin:0px; list-style:none; font-size:12px; color:#333333; font-family:Arial, Helvetica, sans-serif;}
    #menu{ position:absolute; display:none; border:1px solid #CCC;}
    #menu li{ padding:5px 20px; cursor:pointer;}
    #menu a{text-decoration:none;}
    #menu .active { background:#FF0000;}
    #menu .active a{ color:#FFFFFF; text-decoration:underline; }
    </style>
    </head>
    <body>
    点击右键
        <br />
    <ul id="menu">
         <li><a href="http://www.imtaih.com/index.html">关于我</a></li>
            <li><a href="http://www.imtaih.com/about.html">了解我</a></li>
            <li><a href="http://www.imtaih.com/plus/guestbook.php">联系我</a></li>
        </ul>
    <a href="http://www.owebbird.com" title="Web前端-菜鸟团">Web前端-菜鸟团</a>
    </body>
    </html>
    

     

  • 财富常识

    做生意赚钱发财是需要能力素质的,如何提高做生意赚钱发财的能力?我觉得现在市面上绝大多数教人做生意赚钱的书都是误人赚钱机会的论述,因为这些书全部以李嘉诚、刘永好、张瑞敏、柳传志。比尔.盖茨等经商成功例子,教你如何经商之道及宏大理念:如何做非常之人、如何远见卓识、如何高尚、如何坚毅无比、如何坚守等。但甘心做小生意的成功的人可能需要的能力刚好与之恰好相反:短视、生存第一、赚钱第一、机会主义等。

    我想作为一个小型的开店及小公司创业朋友们,我们完全不需要看那些动不动就以宝洁、沃尔玛、李嘉诚为案例的遥不可及的经营理念与文字,我们或许只需要向我们身边成功做小生意的潮汕人,温州人,德化人学一招半式、模仿几个经营技巧的层面学习就有可能创业成功,只需按照下面几个标准去揣摩磨练,就可以一生丰衣足食。

    生意场本来是要把自己丑恶的一面拿出来,要想成为生意人要把自己的高雅情趣、高尚、善良掩藏至自己个人生活中,因为做生意本身就是非常庸俗的事,与高雅一点关系都没有。自古以来提到生意人就和奸商划等号:重利、轻别离、会算计、钻营。而反过来看,这些恰恰是做小生意最需要具备的基本素质。做小生意只须坚守良心、守法,一切均须以趋利避害为最高原则:包括真正生意人的交友都是,如果这个人不能给你带来生意利益,就不要交往。一件事不能给自己带来即时利益,就不要浪费精力与时间去做。

    我总觉得书上、网上的做生意成功的案例大多是经过粉饰的虚假案例,大多数是没有实质可模仿的参考价值的,特别是记者、策划公司等文人写的案例与经验往往忽略了对做生意最有参考价值的本质部分(因为他们是最不懂做生意的一群人,一般来说,文人气质往往是做生意最大的天敌),我觉得还是身边的眼见为实、亲身经历例子的才有价值。你身边的案例往往比那些书上看到的遥不可及、虚无飘渺的财富神话案例要来得真实的多。

    我这次要撕开虚伪的面具,展示赤裸裸的生意场规则给大家看。
    故我觉得我总结的以下标准是更为务实的,特别是很多白领朋友介于是打工还是自己创业的犹豫中,对于自己是否是做生意的料还把握不准,以下标准恰好给你很好的参考,(下面标准中其中一些看似负面的、贬义的形容词,你要用中性词的眼光来看),你可参照给自己打分,看自己是否是合格的生意人或具备做生意的潜力素质:

    1、算计的能力(20分)
    算计的能力是一个人做生意最基本的能力。算计能力不仅仅是计算的能力,一个计算机或数学博士往往在商场上计算不过一个没有文化的但有经验的生意人,这是非常正常的。
    虽然算计的能力首先是对数字的敏感与心算的能力,而且这种能力基本与文化素质、数学能力关联并不是很紧密。小生意一般都是在电话与饭桌上完成,有时候合作方报出一个价来,你要能迅速判断是否对自己有利,还价的价格又计算得比较合理、对方可以接受从而做成生意。如果你说我要考虑一下或者拿出计算器按来按去,你的生意的机会已经失去大半。
    生意的本质是低买高卖,一个不会盘算自己成本的人(低买)、也不会通过算计抬高自己生意价格的(高卖),基本上做生意没戏。
    所有我们有时不得不服气:老板就是老板,打工的就是打工的,即使你做到跨国企业的总裁,由于你是打工的,你的算计能力可能不如一个摆摊的小贩。
    最近网上流行的那个MBA思考模式的上海的士司机,其成功核心的精髓就是算计能力:算计时间成本、算计等候机会成本、算计汽油成本、算计不同人群等。
    一个不会算计、不愿算计、不能算计的人,比如你打牌不愿记牌、算牌,我还是劝你还是打工,不要去创业做生意好了。

    2、钻营的能力:(20分)
    钻营的能力可能比算计的能力更能让一个人做生意赚钱,甚至只要一个人具备非凡的单一的钻营能力素质,不管其他能力如何,就一定会成功。
    举例:( 原中国著名保健品美媛春公司被收购后,有30多个分公司经理大多先后辞职创业,但最终只有1人创业成功,后来我们这帮人聚会时,说他这个人钻营能力太强了,做生意不成功都是不可能的。比如他做药品代理,他钻营到任何普药拿到他面前,他掂量掂量都能知道是什么成分做的,每克成本是多少,盒子是什么纸印刷的,成本是多少,中国有多少这种药,每个厂家经营状况如何。
    他的办公室后面有床,一天到晚就钻营研究自己生意上的事,乐此不彼(做生意的人一定要精力旺盛)。我他要印刷海报宣传,2000元行价的印刷费,他不厌其烦的找了10家印刷厂报价,最后将价格压低到1500元印刷出来。而且每一个印刷厂的专业人员来谈都只能在他面前做印刷知识的学生,他为了压低他的宣传成本,他已经将印刷每一个环节都钻营研究透了。而做小生意时节约的每一分钱都是利润。其他身边的人谈到他时只能自叹不如,觉得应该让人家赚钱的。)
    钻营能力不仅表现在做生意上,可以说绝大多数在中国能够升官做官都是钻营高手,他们都是处心积虑的、不放过任何正面业绩提升及负面趋炎附势的钻营机会的结果。
    你可能会说我自己的生意自己的血汗钱,我当然愿意去深深钻营,但你具备钻营的能力吗?

    3、折腾的能力(20分)
    我观察过身边做生意成功赚钱的人,发现没有一个人第一次做生意就赚钱的,一般都是经过2次失败才会发达起来,因为生意能力是不可能书本上学习的,很多时候需要自己去经历体验的,经验是非常重要的。一个普通人经过2次失败后,才会知道做生意是怎么回事。
    你能否禁得起折腾,这真的是一种能力, 如果你禁不起到处借钱、四处被人追债,失败后的绝望与坚持能力,我劝你真的不要去创业经商。善于折腾的人最终会做生意赚钱。

    4、搞定的能力(10分)
    做生意赚钱的往往不是有才华、有专业能力的人,往往是能够搞定一切大小事情的人;在中国做任何生意都要面临很多事情,老板都要亲自搞定,不会调配资源、搞定相关资源的人再好的创业项目都不能让你赚钱。
    如果你平时办什么事情大都能办成,恭喜你,你有做生意的潜力。

    5、江湖的能力(10分)
    做生意成功的人,无论何种行业,性格上大多带有一些江湖义气的气质。因为做生意很多时候是做人的生意,比如你进货,人家需要支付50%定金,你因为有江湖义气的见面熟的能力,人家可能会只让你付30%的定金,因为你的义气气质,你的生意就会比别人有优势。
    你做老板,你的员工可能因为你的江湖大哥气质,少一点钱也会死心塌地给你做,做小生意的江湖义气还体现在你会喝一点酒,你懂江湖也意味着你对中国国情及人情世故极为老到,意味着你的庸俗气质能匹配小生意往往是给庸俗人服务的。
    如你不懂江湖,幼稚而幻想,整天沉迷于《读者》、《知音》、《家庭》编造的虚假故事中,我也劝你不要去做生意,不要去江湖中混,保持简单而单纯然的生活就好了。

    6、刻薄的能力(10分)
    打工的人都会有这种感觉,为什么天下老板都会这么小气,但小气几乎是生意人成功的法宝,在骨子里不懂小气的人,做生意是不会发财的。
    一个判断标准就是:你逛商店,如果你觉得什么都便宜,那你不是一个有成功潜力的生意人;如果你不仅对所有东西脱口而出“太贵了”,而且是发自内心觉得所有东西都贵,且你有动力将所有东西都还价、降价的冲动,那你做老板应该还行的。对成本压低孜孜不倦的追求,是生意人的特点,你要觉得永远都有最低的成本。这是一个老板应该有的态度,如果你这个老板都觉得这个价格差不多了,那你的员工也不会为你省钱,你也就很难赚到钱。
    对小生意来说,省的钱就是赚的钱,斤斤计较是必须的,并且一直要坚持这个原则,只要你心软一次,以后你和别人生意谈判时就会不断让利,直到你败家为止。
    你如果说我不要做一个刻薄、斤斤计较的人,那我劝你不要做生意。

    7、现实的能力(10分)
    一个人要做到对生意上任何事情都保持极为现实的态度或者说惟利是图的态度,也是非常重要的。很多人抱着我做生意要实现什么抱负或理想,一般都不会成功。做生意的唯一与最终的目的就是赚钱。商人不赚钱是不道德的。现在日本年轻人中流行“赚钱是最大的美德”,让人感到世风日下,但也反应了从古至今的经商真谛。
    可以说一个起步的商人抱负越大,死的越快,所有有”做中国最好的xxx”所谓企业宏图与使命小企业大都会以失败而告终。那些成功后的商人当然会写自己当初如何宏图抱负,但大多不是事实,宣传而已。
    但人是有情感、有梦想的人,让一个人保持一个现实、务实的警醒态度是很难的,也是一个人很大的能力。很多人表面是仁义道德、幼稚可笑,但内心骨子里现实的很,我以前身边碰到很多这样成功的生意人。有时生意的代名词就是现实。
    以上标准的总分是100分,如果你看一眼“算计、钻营、折腾、搞定、江湖、刻薄、现实”这些词就非常讨厌,那你已经不及格,就不要做生意了(除非你有儒商之大才)。
    如果你的打分超过60分,你就有经商的潜力,分数越高,经商能力就越强,赚钱的可能性越大。如果你的打分低于60分,你就要小心经商亏本了。

  • 意外加喜讯..4天工信部正规渠道备案成功,脱离网络黑户口了.

    因为备案问题小站在中国的网络上一直是一个黑户口.
    从上线以来一直用不了国内服务器.
    掉线,访问速度慢,上传速度慢..卡,死机….常常遇到的问题.
    而落户在淘宝上买的空间更是频频更换.有时不到一月就换服务商.
    ……
    上周终于决定申请备案.
    2号邮寄的备案材料..
    原以为至少又要等上个把月了(以前备过一次,用了20多天的时间)
    嗨.还真是没有想到.到了8号,也就今天突然收到邮件和短信,提示我备案成功,下发了备案号.10210217…
    ……
    不管怎么样…算是相当快了,而且脱离了黑户口.
    值得简单写篇日记..

  • 修正IE6不支持position:fixed的bug

    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己的博客模板的时候,遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友,一起BS我……但是对于大项目或商业网站,如果有用到这个属性的时候,是不可能直接无视的。

    你是如何让position:fixed在IE6中工作的?

    本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval包裹你的语句。

    如何解决“振动”的问题?

    显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。

    解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!

    这个方案并不是我提供的。我是在网上的某个地方读到这些的。如果你知道是谁原创了这个方法,请告诉前端观察。

    我发现的另外一个小技巧是,你根本无需一个真实的图片!你可以使用一个about:blank替代一个spacer.gif图片,而且它工作的同样出色。

    /*让position:fixed在IE6下可用! */   .fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;} .fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;} .fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;} .fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;} /* 上面的是除了IE6的主流浏览器通用的方法 */ * html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;} * html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));} * html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)(parseInt(this.currentStyle.marginLeft,10)||0)(parseInt(this.currentStyle.marginRight,10)||0));} * html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)(parseInt(this.currentStyle.marginBottom,10)||0)));} * html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

    转载自:http://www.qianduan.net/fix-ie6-dont-support-position-fixed-bug.html

  • 网页设计师的福音:如何使用GOOGLE在线字体

    目前网页上使用的字体都是常见的几种,如’Lucida Grande’, Verdana, Arial, Sans-Serif,中文常见的有宋体。要想用比较个性的字体就比较麻烦了,因为你不能保证客户端是否支持这种字体,常用的方法是用Photoshop把文字制作成图片。为了让网页设计更加灵活,Google从2010年5月19日启动了网页在线字体服务,并一口气发布了十八字体族。但与 Monotype Web Fonts、FontShop 等字体商不同,Google 这次开放的字体与它其他很多服务一样,完全免费。Google 目前提供的字体共有十八种,均为目前比较流行的免费字体,包括为 Android 而开发的 Droid 系列,被称为“Fonts for Scholars”的 Cardo,为代码印刷而设计的 Inconsolata,业余之作而不胫走红的 Yanone Kaffeesatz 等等,其中最能引人注目的是字体师 John Fell 设计的 IM Fell 字体。我想每个网页设计师都会觉得这是个好消息,又一个来自Google的福音吧!想使用它们吗?使用这些字体无需付费,也不必注册,只需要做简单的几步,举个例子,如果你想在你的网页中使用“Tangerine”这种字体:1.在网页头部加入代码

    复制内容到剪贴板

    代码:

    <link type="text/css" href="http://fonts.bootcdn.cn/css?family=Tangerine">

    2.在你的CSS样式表中加入

    复制内容到剪贴板

    代码:

    body {font-family: 'Tangerine', serif;font-size: 48px;}

    (注:这是让页面所有元素的字体都变成Tangerine,如果只想局部Tangerine字体只要改变CSS选择器就可以了!)3.刷新查看效果!好了简单吗?如果想详细的了解Google在线字体的话,请到官方主页http://code.google.com/webfonts详细使用方法http://code.google.com/apis/webfonts/docs/getting_started.html

  • 滑动背景的JS导航菜单-基于jquery

    jquery很好很强大,几行代码搞定早先在flash上实现的滑动背景的菜单效果(已在crome,firefox,IE6上测试过兼容,IE8未知):代码如下:

    <!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>滑动背景的JS导航菜单-基于jquery</title>
    <style type="text/css">
    ul, li { list-style:none; margin:0; padding:0 }
    #main { margin:0 auto; width:900px; height:500px; }
    #menu { margin:0 auto; width:500px; height:36px; position:relative; }
    #menu_bg { width:500px; height:36px; position:absolute; left:0; top:0; background:#920202; }
    #menu_text { width:500px; height:36px; position:absolute; z-index:10 }
    #menu_text ul { margin-left:40px; }
    #menu_text li { width:60px; float:left; padding:0 10px; border-right:1px solid #7c0000; border-left:1px solid #9e0606; line-height:36px; text-align:center; color:white; cursor:pointer; }
    #menu_text #li_first { border-left:0 }
    #menu_text #li_last { border-right:0 }
    #slide_block { width:80px; height:36px; left:40px; z-index:5; background:#ec5e5e; position:absolute; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript">
    var action=0;
    $(document).ready(function(){                
    $("#menu_text li").each(function(i){
    $(this).mouseover(function(){                
    if(action == 1)
    action = 0;
    else{
    $("#slide_block").stop();                                
    }
    $("#slide_block").animate({left:40+i*82+'px'},'fast',function(){
    action = 1;
    });
    });
    });
    });
    </script>
    </head>
    <body>
    <div id="menu">
      <div id="menu_bg"></div>
      <div id="slide_block"></div>
      <div id="menu_text">
        <ul>
          <li id="li_first">导航一</li>
          <li>导航二</li>
          <li>导航三</li>
          <li>导航四</li>
          <li id="li_last">导航五</li>
        </ul>
      </div>
    </div>
    </body>
    

     

  • 用jquery控制图片的最大宽度

    防止图片尺寸太大撑破网页
    方法一:jQuery控制:

    1. $(document).ready(function() {
    2. $(img).each(function(i){ 
    3.     var maxwidth=screen.width-$(#column2).width()-$(#column3).width()100;
    4.     if (this.width>maxwidth)
    5.      this.width = maxwidth;
    6.     });
    7. });

    第一行不用解释了吧?
    第二行是查找所有img标签,每一个做后边的function处理
    第三行设定最大的宽度,我这里取得是屏幕分辨率减去左右2列的宽度和一个常量。
    第四,五行判断图片的宽度,如果超过这个宽度则设其宽度为允许的最大宽度。

    现在看来,第三行应该和第二行换一下,效率应该会高些,这么写还有一个问题就是必须浏览器最大化才正常,还有什么好的解决方案呢?

    方法二:JS控制:
    <script>
    function resizeImg(obj) {
    var obj = document.getElementById(obj);
    var objContent = obj.innerHTML;
    var imgs = obj.getElementsByTagName(‘img’);
    if(imgs==null) return;
    for(var i=0; i<imgs.length; i++) {
    if(imgs[i].width>parseInt(obj.style.width)) {
    imgs[i].width = parseInt(obj.style.width);
    }
    }
    }
    window.onload = function() {resizeImg(‘testDiv‘);}
    </script>

    调用的时候只要修改表格或DIV的ID名字(红色代码的部分)就可以了。
    转载自:
    http://www.juyimeng.com/control-images-max-width-with-jquery.html
    http://www.lao8.org/html/8/2010-10-2/js.html

  • Web设计精确点滴

    Web设计精确点滴

    这篇文章说实际问题的,所以不多强调,下面是我总结的一些比较突出的细节问题,而且我一直认为这些问题比较严重,正因为这些都是基本问题,很容易解决的,但把这种忽略养成一种习惯性的“经验”那就“杯具”了,然而这些细节问题也不同程度的代表了你的工作态度。当对一个位图的大小进行调整后,正常情况下会留下1px的毛边(如果你注意的话),边界会变得模糊,如果继续调整模糊度会加大,这个问题太不起眼了,以至于你无法用肉眼来理绘,我们先用商品图片举例子:

    也许单张小图还不够显注,下面对比一个列表图和大图,当然了除非你故意想要这种效果。


    放大2倍后对比

    放大2倍后对比

    另外不要试者调整带有边框的图片,最好是自己绘制,这个面两张对比图不用放大就能全面看到问题:

    2)关于边框和背景有些区块需要用边框装饰点缀得醒目一点,有文字区块图片区块等,文字区块加边框的建议使用同基色的背景色填充区块,不然内容会很空洞,图片加边框的话,如果是CSS定义的边框最好是加上间隔距离,因为图片不是固定的,所以可能会出现底色与边框不协调,严重的会造成毛边效果,下面用几个例子来说一下:文字边框背景:

    因为区块加了边框后背景与边框之外的背景颜色相同,所以感觉空洞,所以最好是区块加上背景,而且背景色与边框最好是同一个基色。


    白色背景下,背景不要比边框太深,再努力的调整区块内容的颜色能与背景融合也于事无补,边框成了毛边。

    在深色背景下,才使用加亮边框。

    关于图片边框,图片本身就有背景,而且色彩是多样的,在给图片加边框时也最好是与图片背景同一个基色的背景,而且最好是取与图片最边上的色彩的深基色,如果是边上有多种颜色,取最多的那颜色,例:

    如果边框是用CSS定义的,而且是图列,比喻说是产品列表,而列表中的产品类别和背景色都不一致,就会出现边框与背景同色或不协调的情况,例如:

    上图中间一排图片边框的色彩就不协调了,如果在图片是不确定的情况下,加边框时最好是给图片与边框之间加上边框距。

    在看看在深色背景下的效果,深色背景下可以有两种方案,一是去掉外框,以白色间距边框,二是加亮外框,留出与背景相同颜色的间距。如下图:

    3)关于边距与对齐设计师寻找灵感时,偶尔会随意、自由的拖拉摆放区块、填色、绘制等,直到满意才会停下,在这个过程中会出现有与“经验”挂钩的细小漏洞,例如:

    下图表面看上去没问题,细看之下有点小别扭,放大后就可以看清楚了,导航文字偏高,搜索框与导航没有对齐,搜索框中Button图标距离也有问题。


    调整之后如下图:

    在看下面的例子:

    上图中区块上下间距与左右间距不匀称,和前几的列子一样,文字与区块上下垂直间距不协调,下图是修正后的结果。

    在来看一组给图片加框的效果:

    在来看图列间距:下面这个列图看似没问题,其实有两个细节问题(其中一个应该算是用户体验的问题)。首先第一列与第二列的间距要比第二列与第三列的距离要小2px,对于这个问题,有人会说这个间距用CSS定义就统一了,不会存在差异!注意了,我们讨论的是视觉设计,不能把这个问题丢给前端,否则你后面丢过去的更多(相信我),其次纵间距太小排的过于紧密。


    调整过后如下图:

    4)关于阴影与质感:在设计点缀版面时需要有深度和3D质感的时候,可能就会用到投影、阴影、光线感等效果。但web设计和平面广告不同,太强、太硬的质感只会让页面显得粗糙,web页面是个很细致的活,还是那句话,这里只说细节,先看图:


    阴影要小一点、颜色要浅一点,另外这里面其实还有一个问题,和前面讲的边框一样,如果图片是的投影颜色与图片颜色(或背景颜色)相同,效果会很尴尬,所以要边框一样给图片加一个间隔距离:

    理论上讲,将一个没有质感的元素进行投影或加阴影是不现实的!前面讲的一些阴影效果,元素本身没有任何质感。看下面的例子:

    上图Button和价格区块的投影没有质量,修改后如下图:

    其实阴影和质感是随网站整体风格相关联的,某种情况下还不如不加上去。

    关于深色背景下的质感,阴影和投影是不现实的,所以只能用发光或光线质感来实现。

    就说到这里了,没时间往下说了,我要整理东走了,上面都只是你可能不注意的小小细节问题,你注意到的我也不会说了。

  • 视觉焦点-剖析网页设计中的几何圆

    视觉焦点-剖析网页设计中的几何圆

    你的设计为什么平平无奇,为什么吸引不到别人的眼球,这里先来说说什么是焦点(也可以称兴趣中心或者视觉中心),我认为用焦点更能简单准确的阐述。有人用通俗的方法来诠释焦点,在设计的页面上最吸引人注意的地方,视线上集中交汇的地方,这个位置就叫焦点,在日常生活中我们运用照相机对准人的脸部,那也是在获取一个焦点。在网页设计中,引导用户集中在你想让他关注的画面上,那样会让你的设计有重心和亮点。

    视觉焦点的处理方式

    人们用视觉获取环境中的信息,对你注意的周围都会是模糊的,你视线集中的中心点是最清晰的。第一张,视觉上呈现这样的状态是,视线上没有集中,整体模糊,是成方形的视觉框架。第二张和第三张,图中的两朵花在图形中是最漂亮的亮点,漂亮的东西会引人注意,你会注意到上一朵或则下一朵,注意任何一朵花的时候,眼球集中点会以圆的形状向外逐渐模糊,最中心点就是焦点。圆形作为设计中的元素的时候,自然更加的适应视觉上的感知。

    视觉强弱

    美女其实可以独立成为一个视觉焦点,但当我们给美女加了圆形边框后,视觉焦点就转移到圆形边框包括到的美女上,最后将圆形填充,视觉焦点就转移到填充色的圆形的美女上。

    下面本人做了点对比图片

    图1 整体画面平平,人物排列没有层次,视觉上给人感觉很散。

    图2通过添加圆形背景框,会让你想表达的图形首先进入用户眼球。

    图3不仅添加圆形背景框,再区分人物大小,主次分明,焦点突出,画面活跃立体。

    几何的对比

    上图中我们可以看到,方形过度到圆形的变化,圆形是由极其细小的边角组成,在变化当中图形变得越来越有乐趣,比较下来圆形在几何图形中具有平滑流畅的边缘,圆形更让人感觉轻松,愉悦。设计需要增加乐趣的时候,我们可以多运用流畅线条的图形来让页面活跃起来。

    实例效果进行比较

    在这个页面上圆形挑起了大梁,支撑整个页面,人物笑脸图片组合的圆形包围着瓶子,映射了这个饮料带给我们的快乐。圆形不仅加强了焦点,更加强了页面的层次感,让页面不会单薄,无力度。

    虽然同样用加框的形式来集中物体焦点,同圆形边框相比整体画面呆板,僵硬,缺失了活跃的感觉。

    富有节奏的设计,连贯的圆形元素组合,网站的主体富有节奏的形状,营造了网站活泼的气氛。方形的组合结构使得网站变得严谨许多。

    圆形对价格的标注,让用户对这诱惑的价格更加的感兴趣,很好的营造了商品的气氛。

    圆形元素和其它几何图形比较,具有圆滑的特点,让人感觉轻松,愉悦,合理的运用会提高页面的层次,让焦点更加突出,增强视觉感的同时也能够营造活跃的氛围。我们都在不断尝试如何让页面变的美观而生动,创造富有活力的页面,让网站给人的视觉感受富有好感,把握好设计中的焦点,使页面信息有效传达的前提下,运用有趣的圆形来设计页面是设计中很有效的方法

    原文:http://www.xmued.com/?p=1122

  • 空间转移速度,比AV网站还频繁

    记不得从哪年哪月工信部开始严查中国网站备案后,
    草根站长们便常常涉足于各大IDC服务商,搜索淘宝上免备案空间, 其中,本人小站也是一个.
    因为网站访问速度太差,然后会在无意间看到一则所谓高速免备案的IDC广告后,就会情不自禁的点击注册会员,然后试用空间
    可是每次付完月付款然后欣喜若狂的访问新首页时,常常就会在心里骂自已手贱..又上了一家骗子的当.
    我不知道工信部的这个举措到底是不是达到了他们预期的效果
    所谓防色情防暴力,所谓净化中国网络..
    但我就不明白了,电脑里N久以前收藏的几个AV站点为什么到现在还是可以打开..
    这次不记得是第几次换空间了.貌似我的网站转移速度比色情暴力网站还频繁..