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) 不要 ...
随机推荐
- 关于xshell连接limux界面按退格键不正常的问题
这个问题通过修改xshell终端属性可以解决,步骤如下: "文件" -> "属性" -> "终端" -> "键盘 ...
- tornado的IOLoop.instance()方法和IOLoop.current()方法区别
在使用tornado时,经常有人疑惑IOLoop.instance()方法和IOLoop.current()方法的区别是什么. IOLoop.instance() 返回一个全局 IOLoop实例. 大 ...
- 008.MongoDB分片群集概念及原理
一 MongoDB分片介绍 1.1 分片 Mongodb另一种集群,就是分片技术,可以满足MongoDB数据量大量增长的需求. 当MongoDB存储海量的数据时,一台机器可能不足以存储数据,也可能不足 ...
- Java学习笔记（5）--- Number类和Math 类，String类的应用，Java数组入门
1.Number 和 Math 类: 在实际开发过程中,我们经常会遇到需要使用对象,而不是内置数据类型(int,double,float这些)的情形. 这种由编译器特别支持的包装称为装箱,所以当内置数 ...
- Invoke 与 BeginInvoke的区别
引用文章路径:https://www.cnblogs.com/lsgsanxiao/p/5523282.html invoke和begininvoke 区别 一直对invoke和begininvoke ...
- acwing 517. 信息传递
地址 https://www.acwing.com/problem/content/description/519/ 有 n 个同学(编号为 1 到 n)正在玩一个信息传递的游戏. 在游戏里每人都有一 ...
- JMeter基础知识系列三
JMeter测试结果字段的意义: Label:定义HTTP请求名称. Samples:表示这次测试中一共发出了多少个请求. Average:平均响应时长,当使用了Transaction Control ...
- 错题shell
1.判断/root/class21/inittab.txt文件是否大于100行,如果大于,则显示”inittab is a big file.”否者显示”inittab is a small file ...
- Python必备收藏！博士大佬总结的Pycharm 常用快捷键思维导图
搜索 Ctrl + Shift + F7用法高亮显示 Ctrl + Alt + F7显示用法 编辑 Ctrl + Shift + V从最近的缓冲区粘贴 Ctrl + D复制选定的区域或行到后面 ...
- MySQL for OPS 09：MHA + Atlas 实现读写分离高可用
写在前面的话 前面做了 MHA 高可用,但是存在这样一个问题,我们花了 4 台机器,但是最终被利用起来的也就一台,主库.这样硬件利用率才 25%,这意味着除非发生故障,不然其他几台机器都是摆设.明显的 ...