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) 不要 ...
随机推荐
- Master Note: Undo 空间使用率高 (Doc ID 1578639.1)
Master Note: High Undo Space Usage (Doc ID 1578639.1) APPLIES TO: Oracle Database Cloud Schema Servi ...
- React 中this.setStat是批量执行的， 它发现做三次是多余的，所以只执行一次
16==> this.setStat是批量执行的 它发现做三次是多余的,所以只执行一次 import React, { Component } from "react"; e ...
- gcd套路变换
gcd套路变换 GCD https://www.luogu.org/problem/P2568 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. $ 1& ...
- 201871010133-赵永军《面向对象程序设计（java）》第一周学习总结
<面向对象程序设计(java)>第一周学习总结 正文开头: 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 ...
- Best Cow Line <挑战程序设计竞赛> 习题 poj 3617
P2870 [USACO07DEC]最佳牛线,黄金Best Cow Line, Goldpoj 3617 http://poj.org/problem?id=3617 题目描述FJ is about ...
- 洛谷 P4017 最大食物链计数
洛谷 P4017 最大食物链计数 洛谷传送门 题目背景 你知道食物链吗?Delia生物考试的时候,数食物链条数的题目全都错了,因为她总是重复数了几条或漏掉了几条.于是她来就来求助你,然而你也不会啊!写 ...
- IntelliJ IDEA代码常用的快捷键（自查）
IntelliJ IDEA代码常用的快捷键有: Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O ...
- MySQL数据库查询所有表名
查找指定库中所有表名 select table_name from information_schema.tables where table_schema='db_name'; 注:替换db_nam ...
- ElasticStack的入门学习
Beats,Logstash负责数据收集与处理.相当于ETL(Extract Transform Load).Elasticsearch负责数据存储.查询.分析.Kibana负责数据探索与可视化分析. ...
- 数据库之MySQL与Python交互
准备数据 创建数据表 -- 创建 "京东" 数据库 create database jing_dong charset=utf8; -- 使用 "京东" 数据库 ...