PHP jquery CSS制作头像登录窗（仿即时通信软件登陆)

本篇介绍设计了一个简单有趣的包含Gravatar头像的登录框功能，头像是基于邮件编号从gravatar.com导出的。这篇文章是非常基本的层面上的半铸钢钢性铸铁(铸造半钢)实现和几行Jquery和服务器端编程语言(专业超文本预处理器的缩写)代码。我希望这个登录框设计对您的网项目给出了一些特殊的味道。在尝试这个示例前请在Gravatar上先上传你的头像。

Java脚本语言

包含爪哇岛描述语言代码。$('.用户')。keyup(函数(){} -用户是投入标签的名字，我们通过$(这个)。val()获取投入的值。如果电子邮件值通过了正则表达式，ajax将会请求avatar.php

脚本类型=' text/JavaScript ' src=' http :http://Ajax。谷歌API。com/Ajax/libs/jquery/1。6 .2/jquery。量滴js /脚本脚本类型='text/javascript' $(文档)。ready(function() { $('#username ')).焦点();$('.用户')。keyup(function(){ var email=$(this)).val()；var datastring=' email=' email var CK _ email=/^([\w-](？\.[\w-] )*)@((？[\w-] \ .)*\w[\w-]{0，66})\ .([a-z]{2，6}(？\.[a-z]{2})？)$/I；if(ck_email.test(email)) { $ .ajax({ type: 'POST '，url: 'avatar.php '，data: dataString，cache: false，success : function(html){ $(' # img _ box ').html(' img src=' http://www。格拉瓦塔。com/avatar。PHP？gravatar_id=' html '？d=mm '/')；} });} });});/脚本超文本标记语言代码

div id=' log in _ container ' div id=' log in _ box ' div id=' img _ box ' img src=' http :http://www .格拉瓦塔。com/avatar/？d=mm' alt='' //div表单操作='login.php '方法=' post '输入id=' username ' class=' input user ' type=' text '/input id=' password ' class=' input password ' type=' password '/input class=' BTN ' type=' submit ' value=' log in '/form/div/div avatar.php

这里包含了十分简单的代码：接收邮政过来的电子邮件，进行讯息摘要5加密，返回加密后数据即可。

？PHP if($ _ POST[' email ']){ $ email=$ _ POST[' email ']；$小写=strtolow($ email)；$ image=MD5($小写);echo $ image}？半铸钢钢性铸铁(铸造半钢)

# log in _ container {背景： URL(蓝色。jpg)# 006699；飞越：汽车；宽度： 300像素；} # log in _ box { padd :60 px 30px 30px；border:solid 1px # dedede宽度宽度：238像素背景-color : # fcfcfc；页边距-顶部：70像素；} # img _ box {底色： # FFFFFFborder: 1px实心# DEDEDE左边距左侧： 77px边距-top :-108 px；绝对位置：宽度： 86px高度： 86px} 效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。