|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。
破洛洛文章简介：客岁经常玩高兴网，耗在下面的工夫也很多，泊车位、交易仆从等等。固然高兴网也不是鼻祖（仿照facebook和校内）。但文娱之余，我仍是好好的研讨了一下高兴网，它的交互式做的很杰出.
在平常，经常会提示本人要做一个擅长发明的人，时候发明细节，如许才会加倍明白生存、会让生存加倍出色。
在进修上也是云云，我们经常会发明有很网站做的很棒，成了争像仿照的工具，他们幸亏那里？必定有他们的可取的地方、有他们值得往研讨和进修的中央。
客岁经常玩高兴网，耗在下面的工夫也很多，泊车位、交易仆从等等。固然高兴网也不是鼻祖（仿照facebook和校内）。但文娱之余，我仍是好好的研讨了一下高兴网，它的交互式做的很杰出，举一个例子：
下拉的select框没有效传统的下拉式，而是用层的弹出和埋没来取代传统的select下拉框，如图：
这里不往研讨它的详细完成办法，来切磋一下input输出框的完成办法，恰好在比来的项目中我也用到了此体现情势。
刚入手下手在渺茫用CSS是怎样完成的，缩小来看会发明实在很复杂：
用firebug检察源代码，发明，在input表面再增加一个span标签，界说span的border为灰色（#979797），再把input的默许形态的border界说为红色，鼠标点击后界说border-left和border-right为玄色（border-left:1pxsolid#000;border-top:1pxsolid#000}）。
代码：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>input输出框研讨</title>
<styletype="text/css">
<!--
.it_s{display:table;border:1pxsolid#979797}
.it1,.it2{border:1pxsolid#fff;background:#fffnonerepeatscroll00}
.it1{border:1pxsolid#fff;}
.it2{border-left:1pxsolid#000;border-top:1pxsolid#000}
-->
</style>
</head>
<body>
<spanclass="it_s"><inputtype="text"name="textfield"onblur="this.className=it1;"onfocus="this.className=it2;"class="it1"size="25"/></span>
</body>
</html>
所有的设计第一步就是构思，构思好了。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 07:38:42
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-1-22 07:52:09