开心网上input输入框研究
作者：好好 来源：好好博客 时间：2009-03-06 12:52:00
在平时，常常会提醒自己要做一个善于发现的人，时刻发现细节，这样才会更加懂得生活、会让生活更加精彩。
在学习上也是如此，我们常常会发现有很多网站做的很棒，成了争像模仿的对象，他们好在哪里？一定有他们的可取之处、有他们值得去研究和学习的地方。
去年常常玩开心网，耗在上面的时间也不少，停车位、买卖奴隶等等。虽然开心网也不是始祖（模仿facebook和校内）。但娱乐之余，我还是好好的研究了一下开心网，它的交互式做的很出色，举一个例子：
下拉的select框没有用传统的下拉式，而是用层的弹出和隐藏来代替传统的select下拉框，如图：
这里不去研究它的具体实现方法，来探讨一下input输入框的实现方法，刚好在最近的项目中我也用到了此表现形式。
刚开始在迷茫用css是怎么实现的，放大来看会发现其实很简单：
用firebug查看源代码，发现，在input外面再添加一个span标签，定义span的border为灰色（#979797），再把input的默认状态的border定义为白色，鼠标点击后定义border-left和border-right为黑色（border-left:1px solid #000; border-top:1px solid #000}）。
代码：
标签：开心网,input,输入框,设计
0
投稿猜你喜欢
用js更好地截取定长字符串
2008-01-16 12:48:00
form 元素内的字段 name 不要跟 form 属性名称一致
2008-10-22 13:25:00
php获取文件扩展名的3种方法实例
2023-05-25 02:15:51
内联格式化模式（line-height原理）
2008-06-29 14:37:00
optgroup、sub、sup和bdo标签
2009-07-26 18:39:00
windows 7安装ORACLE 10g客户端的方法分享
2012-07-11 15:36:18
如何编写TOP10之类的排行榜？
2009-11-07 18:45:00
Sql Server 2000 一些安全设置
2008-02-13 18:57:00
CSS模块化设计
2009-01-05 12:10:00
windows 2000 IIS下配置Php+Mysql+zend的图文教程(完整版)
2007-06-15 10:51:00
asp如何限制重复订阅邮件或重复投票？
2010-06-09 18:48:00
IE下img多余5像素空白
2009-06-08 13:17:00
常见Dreamweaver使用过程中的问题及解决办法
2011-03-17 16:16:00
Asp实现伪静态的方法
2007-09-29 21:27:00
网页编辑常用表现的实现方法
2010-07-02 16:24:00
asp日历代码 显示农历
2007-09-23 08:40:00
怎样从旧版本SQL Server中重新存储数据
2009-01-15 13:23:00
网页效果图设计之色彩索引
2008-03-23 13:53:00
内容页页码的预览导航
2008-07-07 16:43:00
SQL Server中如何快速获取表的记录总数
2008-12-05 15:59:00