开心网上input输入框研究
作者:好好 来源:好好博客 发布时间:2009-03-06 12:52:00
标签:开心网,input,输入框,设计
在平时,常常会提醒自己要做一个善于发现的人,时刻发现细节,这样才会更加懂得生活、会让生活更加精彩。
在学习上也是如此,我们常常会发现有很多网站做的很棒,成了争像模仿的对象,他们好在哪里?一定有他们的可取之处、有他们值得去研究和学习的地方。
去年常常玩开心网,耗在上面的时间也不少,停车位、买卖奴隶等等。虽然开心网也不是始祖(模仿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})。
代码:


猜你喜欢
- G2笔记G2是蚂蚁金服的一套开源图表插件,因项目需要研究了一下,相比Echarts来说,G2文档比较难懂,网上也没有太多示例,所以在这里记录
- 本文实例讲述了Golang算法问题之数组按指定规则排序的方法。分享给大家供大家参考,具体如下:给出一个二维数组,请将这个二维数组按第i列(i
- views.py中的修改增加相应的请求处理函数:def getdevjson(request): print 'get here
- 本文详细罗列并说明了Python的标准库与第三方库如下,供对此有需要的朋友进行参考:Tkinter———— Python默认的图形界面接口。
- 学习Python数据分析挖掘实战一书时,在数据预处理阶段,有一节要使用拉格朗日插值法对缺失值补充,代码如下:#-*- coding:utf-
- 第二次修改models.py以后再次python manage.py makemigrations提示如下You are trying to
- 1、运用re、json、jsonpath包解析json思路(1)re:正则表达式,通过json的形式对症下药,写表达式去解析json;(2)
- 优化是一项复杂的任务,因为它最终需要对整个系统的理解.当用你的系统/应用的小知识做一些局部优化是可能的时候,你越想让你的系统更优化,你必须知
- 本文实例为大家分享了python批量处理图片的具体代码,供大家参考,具体内容如下公司的一个项目要求把所有4096x4096的图片全部转化成2
- 一、需求描述手上有大量外文文档(本案例以5份为例,分别命名为 test1.docx test2.docx 以此
- 变量命名在《初识永远强大的函数》一文中,有一节专门讨论“取名字的学问”,就是有关变量名称的问题,本温故而知新的原则,这里要复习:名称格式:(
- 1.os 库基本介绍os库提供通用的、基本的操作系统交互功能。三大操作系统:windowsMac OSLinuxos 库是python标准库
- 首先导入包含apriori算法的mlxtend库,pip install mlxtend调用apriori进行关联规则分析,具体代码如下,其
- 闭包(closure)是函数式编程的重要的语法结构。函数式编程是一种编程范式 (而面向过程编程和面向对象编程也都是编程范式)。在面向过程编程
- 今天成功把易语言调用验证码通杀的DLL在Python中成功调用了特此共享出来,下面是识别截图:识别方法1:"""
- 如下所示:将不想索引的文件夹设置为Excluded Folders 及设置检索不包括的文件File - Settings - -> P
- 上周想要取得iframe中的元素和js变量值,一直没取得,查资料得知:不能用$(document).ready()方法,而是要用$(&quo
- 在了解了XHTML 2的进展之后,我们再来看看X/HTML 5 的进展。X/HTML 5酷在什么地方章节元素的构想X/HTML 5引入新的元
- 当我们定义一个类的时候,有时候会定义一个私有属性来辅助开发。在其它语言中经常会用到 private 来修饰这个属性为私有属性。可是你知道么?
- Matplotlib是一个很好的作图软件,但是python下默认不支持中文,所以需要做一些修改,方法如下:1.在python安装目录的Lib