Html学习之十九(表格与表单学习--邮箱注册页面设计)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>邮箱注册</title>
<style type="text/css">
h1{
border: 1px solid white;
width: 100%;
height: 50px;
background: lightblue;
color: white;
padding-top: 10px;
font-family: "微软雅黑";
}
.a{
border: 1px solid black;
margin: 0px;
/*background-color: darkgray;*/
font-family: verdana,sans-serif;
font-size: 14px;
padding: 10px;
font-weight: bold;
text-decoration: none;
cursor: default;
text-align: center;
outline: none; }
.txt-tips{
font-family: verdana,sans-serif;
text-align: left;
line-height: 8px;
color: darkgray;
font-size: smaller;
}
.a1,.a2,.a3{
font-weight: bold;
color: black;
cursor: default;
/*display: block;*/
height: 35px;
line-height: 35px;
text-align: center;
font-size: 14px;
outline: none;
list-style: none;
font-family: verdana,sans-serif;
}
.d{
border: solid darkgray 1px;
color: #555;
font-size: 14px;
text-align: left;
font-family: verdana,sans-serif;
line-height: 28px;
}
</style>
</head>
<body>
<form action="#" method="post">
<h1>欢迎注册无限容量的网易云邮箱!邮箱地址可以登录其它网易云旗下产品。</h1>
<br />
<br />
<a tabindex="-1" class="a1" style="text-decoration: none;" onclick="_Global.main.turnOn();return false;" href="#;">
<span class="a">注册字母邮箱</span>
</a>
<a tabindex="-1" class="a2" style="text-decoration: none;" onclick="_Global.main.turnOn(null,'tab');return false;" href="#;">
<span class="a">注册手机号码邮箱</span>
</a>
<a tabindex="-1" class="a3" style="text-decoration: none;" onclick="_Global.main.turnOn();return false;" href="#;">
<span class="a" >注册VIP邮箱</span>
</a>
<br />
<br />
*邮件地址
<input type="email" value="" />@
<select size="1">
<option>163.com</option>
<option>163.com</option>
<option selected="selected">163.com</option>
</select>
<br />
<span class="txt-tips">6~18个字符,可使用字母、数字、下划线,需以字母开头</span>
<br />
<br />
*密码
<input type="password" value=""/>
<br />
<span class="txt-tips">6~16个字符,区分大小写</span>
<br />
<br />
*确认密码
<input type="password" value=""/>
<br />
<span class="txt-tips">请再次填写密码</span>
<br />
<br />
*手机号码
<input type="tel" value=""/>
<br />
<span class="txt-tips">忘记密码时,可以通过该手机号码快速找回密码</span>
<br />
<br />
*验证码
<input type="text" autocomplete="off" value=""/>
<br />
<span class="txt-tips">请填写图中字符,不区分大小写</span>
<br />
<img width="120" height="50"style="cursor: pointer;" alt="验证码" src="../img/call.jpg">
<a tabindex="-1" href="javascript:void(0);">看不清楚?换张图片</a>
<br />
<br />
<span class="d">免费获取验证码</span>
<br />
*短信验证码
<input type="text" autocomplete="off">
<br />
<span class="txt-tips">请查收手机短信,并填写短信中的验证码</span>
<br />
<br />
<input tabindex="-1" type="checkbox" checked="checked">同意
<a tabindex="-1" href="http://reg.163.com/agreement.shtml" target="_blank">"服务条款"</a>和
<a tabindex="-1" href="http://reg.163.com/agreement_game.shtml" target="_blank">"隐私权相关政策"</a>
<br />
<br />
<input type="submit" value="立即注册">
</form>
</body>
</html>
结果:

Html学习之十九(表格与表单学习--邮箱注册页面设计)的更多相关文章
- Html学习之十七(表格与表单学习--排行版制作)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Html学习之十八(表格与表单学习--统计表制作)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- python运维开发(十九)----Django后台表单验证、session、cookie、model操作
内容目录: Django后台表单验证 CSRF加密传输 session.cookie model数据库操作 Django后台Form表单验证 Django中Form一般有2种功能: 1.用于做用户提交 ...
- html-使用表单标签实现注册页面
案例说明: - 使用表格实现页面效果 - 超链接不想要有效果,使用href="#" - 如果表格里面的单元格没有内容,使用空格作为占位符 - 使用图片标签提交表单 <in ...
- Html学习之十六(表格与表单学习--课程表制作)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- python3.4学习笔记(十九) 同一台机器同时安装 python2.7 和 python3.4的解决方法
python3.4学习笔记(十九) 同一台机器同时安装 python2.7 和 python3.4的解决方法 同一台机器同时安装 python2.7 和 python3.4不会冲突.安装在不同目录,然 ...
- FreeSql (十九)多表查询
多表查询,常用的有联表 LeftJoin/InnerJoin/RightJoin ,这三个方法在上篇文章已经介绍过. 除了联表,还有子查询 Where Exists,和 Select 子表: IFre ...
- 学习笔记:CentOS7学习之十九:Linux网络管理技术
目录 学习笔记:CentOS7学习之十九:Linux网络管理技术 本文用于记录学习体会.心得,兼做笔记使用,方便以后复习总结.内容基本完全参考学神教育教材,图片大多取材自学神教育资料,在此非常感谢MK ...
- 风炫安全web安全学习第二十九节课 CSRF防御措施
风炫安全web安全学习第二十九节课 CSRF防御措施 CSRF防御措施 增加token验证 对关键操作增加token验证,token值必须随机,每次都不一样 关于安全的会话管理(SESSION) 不要 ...
随机推荐
- Linux—挂载磁盘(云盘)
创建挂载目录 [root@localhost ~]# mkdir -p /www 可以看到/dev/vda1盘挂载/ /dev都是位于根路径下,都属于系统盘.根路径 / 都是位于系统盘.而/root, ...
- centos7.6 创建磁盘格式化
fdisk /dev/vdb mkfs.ext4 /dev/vdb echo '/dev/vdb /sdata ext4 defaults 0 0' >> /etc/fstab mount ...
- Jenkins实现单一安卓项目打包多个module填坑实录
今天接手一个任务,已有项目结构上新添加了一个module,这个module打包工作需要在Jenkins上添加一个方便测试点击的打包工程 因为之前已有现成的打包工程,我直接新建了一个工程并且复制原有工程 ...
- cookie和session了解吗
Cookie 和Session是什么? 彻底搞懂cookie的运行原由? 什么时候不能用Cookie,什么时候不能用Session session在什么时候创建,以及session一致性问题 Cook ...
- 【hdu4045】Machine scheduling(dp+第二类斯特林数)
传送门 题意: 从\(n\)个人中选\(r\)个出来,但每两个人的标号不能少于\(k\). 再将\(r\)个人分为不超过\(m\)个集合. 问有多少种方案. 思路: 直接\(dp\)预处理出从\(n\ ...
- 如何在python中使用Elasticsearch
什么是 Elasticsearch 想查数据就免不了搜索,搜索就离不开搜索引擎,百度.谷歌都是一个非常庞大复杂的搜索引擎,他们几乎索引了互联网上开放的所有网页和数据.然而对于我们自己的业务数据来说 ...
- 【Linux命令】ldconfig动态链接库管理命令
ldconfig动态链接库管理命令,其目的为了让动态链接库为系统所共享. 作用: 默认搜寻/lilb和/usr/lib,以及配置文件/etc/ld.so.conf内所列的目录下的库文件. 搜索出可共享 ...
- [03-2]VS2017 创建 ASP.NET Core Web 程序
VS2017 创建 ASP.NET Core Web 程序 本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP) 文章会随着版本进行更新,关注我获取最新版本 本文出自<从零开始学 ...
- 登录注册案例(Servlet+JSP+Maven)
项目案例模板之登录注册的实现 案例演示 案例代码 设计表 pom.xml <dependencies> <dependency> <groupId>jun ...
- 使用Java操作Elasticsearch(Elasticsearch的java api使用)
1.Elasticsearch是基于Lucene开发的一个分布式全文检索框架,向Elasticsearch中存储和从Elasticsearch中查询,格式是json. 索引index,相当于数据库中的 ...