css邮箱验证（web邮箱验证）

使用JS和CSS如何判断邮箱格式

form action=""

输入：input type="text" name="mazey" id="mazey" placeholder="请输入邮箱"

input type="button" value="验证" onclick="check();"

/form

script

function check(){

var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式

var obj = document.getElementById("mazey"); //要验证的对象

if(obj.value === ""){ //输入不能为空

alert("输入不能为空!");

return false;

}else if(!reg.test(obj.value)){ //正则验证不通过，格式不对

alert("验证不通过!");

return false;

}else{

alert("通过！");

return true;

/script

利用css实现qq邮箱登录案例

CSS（层叠样式表）

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

注：单独使用CSS是无法实现QQ邮箱登录实例（CSS为样式代码）。

实例

可以使用iframe代码实现QQ邮箱登录实例。

代码如下：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleqq邮箱登录实例/title

/head

body

p align="center" style="margin-top:0px;margin-left:0"

iframe width="1000" height="500" src="" class="ec04-bbdc-2722-a3c5 t-iframe" scrolling="no" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"/iframe 

/p

/body

/html

代码解释：

url是你要调用的网址，p align="center" style="margin-top: -109;margin-left: -109"是网页布局、其中margin-top: 0表示顶部缩进，margin-left: 0表示左边缩进。至于右边和底部缩进，很简单，修改iframe的宽度和高度就可以了。

今天老师的题目是怎么利用css实现QQ邮箱登录案例，我下面的方法对吗？但是还是测试不成功怎么回事呀？

你把边距写错啦。把mergin改成margin就可以的啦

希望可以帮到你，一起交流呀！！！