在讲解开始之前,你可能希望先查看:demo download
当用户使用邮箱登录你网站时,你可能希望免去用户一些输入,以及防止用户写错邮箱地址,类似于新浪微博登录时的提示:
首先需要定义它的html结构,这决定了它的显示方式及运行原理,我使用了一个无序列表“UL”:
1 2 3 4 5 6 | <ul id="emailpop" class="autopop"> <li class="notpop">请选择邮箱类型</li> <li class="pop">yu123</li> <li>yu123@gmail.com</li> <li>yu123@sina.com</li> </ul> |
基本结构固定好以后,由于选择表现与逻辑分离,需要给它定义样式: