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) 不要 ...
随机推荐
- redis的缓存雪崩、缓存穿透和缓存击穿
缓存雪崩: 比如给缓存中的key设置了统一的过期时间,而在过期时间点,有大量的请求进来,这个时候redis中没有用户请求的资源,所以所有的请求会全部拥到数据库,如果数据库有报警监测的话,可能会报一下警 ...
- Scrapy中的Request和日志分析
Scrapy.http.Request 自动去重,根据url的哈希值,进行去重 属性 meta(dict) 在不同的请求之间传递数据,dict priority(int) 此请求的优先级(默认为0 ...
- 设计模式-Bridge（结构型模式）-用于客户需求较多，频繁对类进行添加修改的情形,将抽象类与具体实现类分开
以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //AbstractionImp.h #pragma once class AbstractionImp { public: ...
- Java的异常处理方式
一.异常简介 异常结构图 Throwable是类,Exception和Error都继承了该类,error是因为系统内部错误或者资源耗尽错误,这种情况很少出现,而且error也不允许被抛出在Except ...
- win10系统使用Telnet命令时提示“telnet不是内部或外部命令”
in10系统使用Telnet命令时提示“telnet不是内部或外部命令”问题的处理方案 win10系统使用的过程中很多用户会遇到使用Telnet命令时提示“telnet不是内部或外部命令”的问题,这样 ...
- CF1253E Antenna Coverage（DP）
本题难点在正确性证明. 令 \(f_i\) 表示 \([1,i]\) 被全部覆盖的最小花费.答案为 \(f_m\). 首先发现,添加一个区间 \([0,0]\) 不会影响答案.所以 \(f_i\) 的 ...
- H5生成二维码
要用H5生成二维码: 1.引入js库,可自行点击链接复制使用 <script type="text/javascript" src="http://static.r ...
- 2019 年 GitHub 上最热门的 Java 开源项目
1.JavaGuide https://github.com/Snailclimb/JavaGuide Star 22668 [Java 学习 + 面试指南] 一份涵盖大部分 Java 程序员所需要掌 ...
- SpringBoot系列之Spring容器添加组件方式
SpringBoot系列之Spring容器添加组件方式 本博客介绍SpringBoot项目中将组件添加到Spring容器中的方法,SpringBoot项目有一个很明显的优点,就是不需要再编写xml配置 ...
- allure定制化输出测试报告，让报告锦上添花！
一.定制化后的效果展示 用两张图展示效果: 二.注意别踩坑 allure定制化想必大部分情况都会去选择pip install pytest-allure-adaptor这个插件,安装完成后,运行定制化 ...