PHP、jQ和CSS制作头像登录窗-php手册-php.cn

Home

php教程

php手册

PHP、jQ和CSS制作头像登录窗

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 13, 2016 am 11:14 AM

css gravatar php make Include and avatar I Log in of Simple design

我设计了一个简单有趣的包含Gravatar头像的登录框功能，头像是基于邮件id从gravatar.com导出的。这篇文章是非常基本的层面上的CSS实现和几行Jquery和PHP代码。我希望这个登录框设计对您的web项目给出了一些特殊的味道。在尝试这个示例前请在Gravatar上先上传你的头像.

498)this.width=498;' onmousewheel = 'javascript：return big(this)' title="使用PHP、jQuery和CSS制作gravatar头像登录窗" height="300" alt="使用PHP、jQuery和CSS制作gravatar头像登录窗" src="https://lh3.googleusercontent.com/-RFUV0LFAAbo/T7vN5VAW8tI/AAAAAAAAGCU/W8cbVtFpbko/s550/loginbox.png" width="550" />

使用PHP、jQuery和CSS制作gravatar头像登录窗

JavaScript

包含javascript代码。$(".user").keyup(function(){}---user是input标签的名字，我们通过$(this).val()获取input的值。如果email值通过了正则表达式，ajax将会请求avatar.php

<ol class="dp-c">
<li class="alt"><span><span><script><span class="string">"text/javascript"</script></span><span> src=</span><span class="string">"http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"</span><span>>  </span></span></li>
<li>
<span><script><span class="string">"text/javascript"</script></span><span> >  </span>
</li>
<li class="alt">
<span>$(document).ready(</span><span class="keyword">function</span><span>()  </span>
</li>
<li><span>{  </span></li>
<li class="alt">
<span>$(</span><span class="string">"#username"</span><span>).focus();  </span>
</li>
<li>
<span>$(</span><span class="string">".user"</span><span>).keyup(</span><span class="keyword">function</span><span>()  </span>
</li>
<li class="alt"><span>{  </span></li>
<li>
<span class="keyword">var</span><span> email=$(</span><span class="keyword">this</span><span>).val();  </span>
</li>
<li class="alt">
<span class="keyword">var</span><span> dataString = </span><span class="string">'email='</span><span>+ email ;  </span>
</li>
<li>
<span class="keyword">var</span><span> ck_email = /^([w-]+(?:.[w-]+)*)@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/i;  </span>
</li>
<li class="alt"><span> </span></li>
<li>
<span class="keyword">if</span><span>(ck_email.test(email))  </span>
</li>
<li class="alt"><span>{  </span></li>
<li><span>$.ajax({  </span></li>
<li class="alt">
<span>type: </span><span class="string">"POST"</span><span>,  </span>
</li>
<li>
<span>url: </span><span class="string">"avatar.php"</span><span>,  </span>
</li>
<li class="alt"><span>data: dataString,  </span></li>
<li>
<span>cache: </span><span class="keyword">false</span><span>,  </span>
</li>
<li class="alt">
<span>success: </span><span class="keyword">function</span><span>(html)  </span>
</li>
<li><span>{  </span></li>
<li class="alt">
<span>$(</span><span class="string">"#img_box"</span><span>).html(</span><span class="string">"<img  src="/static/imghw/default1.png" data-src="https://lh6.googleusercontent.com/-S5T-tywC_QU/T7vffdMlKHI/AAAAAAAAGCk/Fz445g_QAdY/s368/wire.png" class="lazy" alt="PHP、jQ和CSS制作头像登录窗" ><span>+html+</span><span class="string">"?d=mm' />"</span><span>);  </span></span>
</li>
<li><span>}  </span></li>
<li class="alt"><span>});  </span></li>
<li><span>}  </span></li>
<li class="alt"><span> </span></li>
<li><span>});  </span></li>
<li class="alt"><span>});  </span></li>
<li><span> </span></li>
</ol>

Copy after login

498)this.width=498;' onmousewheel = 'javascript：return big(this)' title="使用PHP、jQuery和CSS制作gravatar头像登录窗" height="322" alt="使用PHP、jQuery和CSS制作gravatar头像登录窗" width="368" />

使用PHP、jQuery和CSS制作gravatar头像登录窗

HTML 代码

<ol class="dp-xml">
<li class="alt"><span><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"login_container"</span><span class="tag">></span><span> </span></span></span></li>
<li><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"login_box"</span><span class="tag">></span><span> </span></span></li>
<li class="alt"><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"img_box"</span><span class="tag">></span><span class="tag"><span class="tag-name">img</span><span> </span><span class="attribute">src</span><span>=</span><span class="attribute-value">"http://www.gravatar.com/avatar/?d=mm"</span><span> </span><span class="attribute">alt</span><span>=</span><span class="attribute-value">""</span><span> </span><span class="tag">/></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></span></li>
<li><span class="tag"><span class="tag-name">form</span><span> </span><span class="attribute">action</span><span>=</span><span class="attribute-value">"login.php"</span><span> </span><span class="attribute">method</span><span>=</span><span class="attribute-value">"post"</span><span class="tag">></span><span class="tag"><span class="tag-name">input</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"username"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"input user"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text"</span><span> </span><span class="tag">/></span><span> </span><span class="tag"><span class="tag-name">input</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"password"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"input passcode"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"password"</span><span> </span><span class="tag">/></span><span> </span><span class="tag"><span class="tag-name">input</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"btn"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"submit"</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">" Login "</span><span> </span><span class="tag">/></span><span class="tag"></span><span class="tag-name">form</span><span class="tag">></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></span></span></span></li>
<li class="alt">
<span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span> </span>
</li>
</ol>

Copy after login

avatar.php

这里包含了十分简单的代码：接收POST过来的email，进行md5加密，返回加密后数据即可。

<ol class="dp-c">
<li class="alt"><span><span><?php  </span></span></span></li>
<li>
<span class="keyword">if</span><span>(</span><span class="vars">$_POST</span><span>[</span><span class="string">'email'</span><span>])  </span>
</li>
<li class="alt"><span>{  </span></li>
<li>
<span class="vars">$email</span><span>=</span><span class="vars">$_POST</span><span>[</span><span class="string">'email'</span><span>];  </span>
</li>
<li class="alt">
<span class="vars">$lowercase</span><span> = </span><span class="func">strtolower</span><span>(</span><span class="vars">$email</span><span>);  </span>
</li>
<li>
<span class="vars">$image</span><span> = md5(</span><span class="vars">$lowercase</span><span>);  </span>
</li>
<li class="alt">
<span class="func">echo</span><span> </span><span class="vars">$image</span><span>;  </span>
</li>
<li><span>}  </span></li>
<li class="alt"><span>?> </span></li>
</ol>

Copy after login

CSS

<ol class="dp-css">
<li class="alt"><span><span class="value">#login</span><span>_container  </span></span></li>
<li><span>{  </span></li>
<li class="alt">
<span class="keyword">background</span><span>:</span><span class="value">url</span><span>(</span><span class="value">blue</span><span>.jpg) </span><span class="value">#006699</span><span>;  </span>
</li>
<li>
<span class="keyword">overflow</span><span>: </span><span class="value">auto</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">width</span><span>: </span><span class="value">300px</span><span>;  </span>
</li>
<li><span>}  </span></li>
<li class="alt">
<span class="value">#login</span><span>_box  </span>
</li>
<li><span>{  </span></li>
<li class="alt">
<span class="keyword">padding</span><span>:</span><span class="value">60px</span><span> </span><span class="value">30px</span><span> </span><span class="value">30px</span><span> </span><span class="value">30px</span><span>;  </span>
</li>
<li>
<span class="keyword">border</span><span>:</span><span class="value">solid</span><span> </span><span class="value">1px</span><span> </span><span class="value">#dedede</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">width</span><span>:</span><span class="value">238px</span><span>;  </span>
</li>
<li>
<span class="keyword">background-color</span><span>:</span><span class="value">#fcfcfc</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">margin-top</span><span>:</span><span class="value">70px</span><span>;  </span>
</li>
<li><span>}  </span></li>
<li class="alt">
<span class="value">#img</span><span>_box  </span>
</li>
<li><span>{  </span></li>
<li class="alt">
<span class="keyword">background-color</span><span>: </span><span class="value">#FFFFFF</span><span>;  </span>
</li>
<li>
<span class="keyword">border</span><span>: </span><span class="value">1px</span><span> </span><span class="value">solid</span><span> </span><span class="value">#DEDEDE</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">margin-left</span><span>: </span><span class="value">77px</span><span>;  </span>
</li>
<li>
<span class="keyword">margin-top</span><span>: </span><span class="value">-108px</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">position</span><span>: </span><span class="value">absolute</span><span>;  </span>
</li>
<li>
<span class="keyword">width</span><span>: </span><span class="value">86px</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">height</span><span>: </span><span class="value">86px</span><span>;  </span>
</li>
<li><span>} </span></li>
</ol>

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1663

CakePHP Tutorial

1420

Laravel Tutorial

1313

PHP Tutorial

1266

C# Tutorial

1239

Related knowledge

PHP and Python: Different Paradigms Explained Apr 18, 2025 am 12:26 AM

PHP is mainly procedural programming, but also supports object-oriented programming (OOP); Python supports a variety of paradigms, including OOP, functional and procedural programming. PHP is suitable for web development, and Python is suitable for a variety of applications such as data analysis and machine learning.

Choosing Between PHP and Python: A Guide Apr 18, 2025 am 12:24 AM

PHP is suitable for web development and rapid prototyping, and Python is suitable for data science and machine learning. 1.PHP is used for dynamic web development, with simple syntax and suitable for rapid development. 2. Python has concise syntax, is suitable for multiple fields, and has a strong library ecosystem.

HTML: The Structure, CSS: The Style, JavaScript: The Behavior Apr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

Why Use PHP? Advantages and Benefits Explained Apr 16, 2025 am 12:16 AM

The core benefits of PHP include ease of learning, strong web development support, rich libraries and frameworks, high performance and scalability, cross-platform compatibility, and cost-effectiveness. 1) Easy to learn and use, suitable for beginners; 2) Good integration with web servers and supports multiple databases; 3) Have powerful frameworks such as Laravel; 4) High performance can be achieved through optimization; 5) Support multiple operating systems; 6) Open source to reduce development costs.

PHP and Python: A Deep Dive into Their History Apr 18, 2025 am 12:25 AM

PHP originated in 1994 and was developed by RasmusLerdorf. It was originally used to track website visitors and gradually evolved into a server-side scripting language and was widely used in web development. Python was developed by Guidovan Rossum in the late 1980s and was first released in 1991. It emphasizes code readability and simplicity, and is suitable for scientific computing, data analysis and other fields.

PHP's Impact: Web Development and Beyond Apr 18, 2025 am 12:10 AM

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip

PHP vs. Python: Use Cases and Applications Apr 17, 2025 am 12:23 AM

PHP is suitable for web development and content management systems, and Python is suitable for data science, machine learning and automation scripts. 1.PHP performs well in building fast and scalable websites and applications and is commonly used in CMS such as WordPress. 2. Python has performed outstandingly in the fields of data science and machine learning, with rich libraries such as NumPy and TensorFlow.

Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Apr 18, 2025 am 09:24 AM

When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.

See all articles