HTML-练习3
目录
实现各类注册页面的设计。
效果如图：
1.阿里巴巴注册页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>阿里巴巴注册页面</title>
<style>
#NO1 {
width: 400px;
text-align: right;
}
#NO2 {
width: 600px;
text-align: right;
}
#NO3 {
padding-left: 220px;
}
</style>
</head>
<body>
<form action="get" action="111.html">
<div style="width: 100%; height: 90.69px">
<img
src="/TP03/03 上机练习素材/01 上机练习素材/练习3：阿里巴巴注册页面/images/logo.bmp"
/>
<!-- -->
<div style="width: 400px; float: right; padding-right: 200px">
<a href="">登录|</a>
<a href="">阿里巴巴首页|</a>
<a href="">客服中心|</a>
<a href="">
<img
src="/TP03/03 上机练习素材/01 上机练习素材/练习3：阿里巴巴注册页面/images/icon1.bmp"
/>提建议
</a>
<br />
如需要帮助，请咨询
<img
src="/TP03/03 上机练习素材/01 上机练习素材/练习3：阿里巴巴注册页面/images/icon2.bmp"
/>
或拨打400-800-1688
</div>
<!-- -->
</div>
<hr color="orange" width="1800" />
<section>
<div id="NO1">
<p>电子邮箱： <input type="email" /></p>
<p>会员登录名： <input type="text" /></p>
<p>密码： <input type="password" /></p>
<p>再次输入密码： <input type="password" maxlength="32" /></p>
<p>
会员身份：<input type="radio" checked="true" name="1" /> 买家
<input type="radio" name="1" />卖家
<input type="radio" name="1" />两者都是
</p>
</div>
<div id="NO2">
<p>
验证码： <input type="text" maxlength="5" style="width: 110px" />
<img
align="center"
src="/TP03/03 上机练习素材/01 上机练习素材/练习3：阿里巴巴注册页面/images/verycode.gif"
/>
<a href="">看不清楚?换一张</a>
</p>
</div>
<div id="NO3">
<p>
<input
type="image"
src="/TP03/03 上机练习素材/01 上机练习素材/练习3：阿里巴巴注册页面/images/btn_reg.gif"
/>
</p>
<textarea cols="50" rows="5">
欢迎阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。 </textarea
>
</div>
</section>
<hr color="orange" width="1800" />
<footer>
<div style="text-align: center">
<a href="">阿里巴巴版权所有 2015-2018著作权与商标声明 | </a>
<a href="">法律声明 |</a>
<a href=""> 服务条款 |</a>
<a href=""> 隐私声明 |</a>
<a href=""> 联系我们 |</a>
<a href=""> 网站地图 |</a>
<a href=""> 产品体检中心</a>
<br />
<a href=""
>阿里巴巴集团：阿里巴巴网络-中国 国际站 全球速卖通 日文站 中国万网|
</a>
<a href=""> 淘宝网 | </a>
<a href=""> 支付宝 |</a>
<a href=""> 中国雅虎 | </a>
<a href=""> 雅虎口碑网 |</a>
<a href=""> 阿里软件 |</a>
<a href=""> 阿里妈妈 |</a>
<a href=""> 集团研究中心</a>
</div>
</footer>
</form>
</body>
</html>
2.人人网注册：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>人人网注册页面</title>
</head>
<body>
<form action="get" action="11.html">
<header>
<img
src="/TP03/03 上机练习素材/01 上机练习素材/练习2：人人网注册页面/image/renren_titile.gif"
/>
<p>
人人网，中国最真实、最有效的社会平台，加入人人网，找回老朋友，结交新朋友。
</p>
</header>
<section>
<p>
<label for="id">电子邮箱：</label>
<input
type="email"
id="male"
placeholder="student@bdqn.cn "
readonly
/>
</p>
<p>
<lable for="id">设置密码：</lable> <input type="password" id="male" />
</p>
<p><label for="id">真实姓名：</label><input type="text" id="male" /></p>
性别：<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<p>
生日：
<input type="date" value="1998-08-07" />
<!-- 生日：<select name="生日">
<option>1998</option>
<option>1996</option>
</select>
年
<select>
<option>8</option>
</select>
月<select>
<option>7</option>
</select>
日 -->
</p>
<p>为什么要填写我的生日？</p>
<p>
我现在：<select>
<option>请选择身份</option>
<option>医生</option>
<option>老师</option>
</select>
</p>
<p>
<img
src="/TP03/03 上机练习素材/01 上机练习素材/练习2：人人网注册页面/image/renren_code.gif"
alt=""
/>
<a href="#"> 看不清换一张？</a>
</p>
<p>验证码：<input type="text" /></p>
</section>
<input
type="image"
src="/TP03/03 上机练习素材/01 上机练习素材/练习2：人人网注册页面/image/renren.gif"
/>
</form>
</body>
</html>
3.网易邮箱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>网易邮箱登录</title>
</head>
<body>
<header>
<img
src="/TP03/03 上机练习素材/01 上机练习素材/练习1：网易邮箱登录页面/图片素材/163logo.gif"
alt="163.logo"
/>
<br />
<div style="margin-top: 20px">
<a href="#">免费邮 </a>
<a href="#">企业邮 </a>
<a href="#">VIP邮箱 </a>
<a href="#">帮助 </a>
</div>
</header>
<section>
<img
src="/TP03/03 上机练习素材/01 上机练习素材/练习1：网易邮箱登录页面/图片素材/imap.jpg"
alt="IMPA服务"
/>
<ul>
<li>163/126/yeah三大免费邮箱均默认开放</li>
<li>全面支持iPhone/iPad及Android等系统</li>
<li>客户端、手机与网页，实现发送、阅读邮件</li>
</ul>
<a href="#">立即同步普通登录手机号登录</a>
<form action="#" method="get">
<p>用户名：<input type="email" name="email" /> @163.com</p>
<p>密码：<input type="password" name="pass" /></p>
<p>
版本：<select>
<option>默认</option>
<option>极速</option>
</select>
</p>
<p>
<input type="checkbox" />自动登录 <input type="checkbox" checked />SSL
</p>
</form>
</section>
<footer>
<p>
<img
src="/TP03/03 上机练习素材/01 上机练习素材/练习1：网易邮箱登录页面/图片素材/netease_logo.gif"
alt="网易"
/>
<a href="#"> 关于网易</a>
<a href="#">免费邮</a>
<a href="#">官方博客</a>
<a href="#">客户服务</a>
<a href="#">隐私政策</a>|
<a href="#">网易公司版权所有</a>
©1997-2011
</p>
</footer>
</body>
</html>
4.QQ注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QQ注册页面</title>
</head>
<body>
<form action="get" action="111.html">
<div>
<img
src="/TP03/03 上机练习素材/01 上机练习素材/练习5： QQ注册验证/image/bg_chs.png"
/>
</div>
<h2>注册账号</h2>
<p>
<label for="昵称：">昵称：</label>
<input
type="text"
name="uname"
placeholder="请输入昵称"
id="昵称："
required
pattern="[-\w\u4E00-\u9FA5]{4,10}"
/>长度为4-10个字符<br />
</p>
<p>
<label for="密码：">密码：</label>
<input
type="password"
name="upwd"
placeholder="请输入密码"
id="密码："
required
pattern="[\dA-Za-z]{6,16}"
/>
长度为6-16个字符<br />
</p>
<p>
<label for="确认密码：">确认密码：</label>
<input
type="password"
name="upwd1"
placeholder="确认密码"
id="确认密码："
required
pattern="[\dA-Za-z]{6,16}"
/>长度为6-16个字符<br />
</p>
<p>
<label for="手机号码：">手机号码：</label>
<input
type="text"
name="utel"
placeholder="请输入手机号码"
id="手机号码："
required
pattern="1[3578]\d{9}"
/>
密码长度为11位,以13|5|7|8开头<br />
</p>
<p>
<label for=" 邮箱："> 邮箱：</label>
<input
type="email"
name="uemail"
placeholder="请输入邮箱"
id=" 邮箱："
required
/><br />
</p>
<p>
<label for=" 年龄："> 年龄：</label>
<input
type="text"
name="uage"
placeholder="请输入年龄"
id=" 年龄："
required
pattern="\d|[1-9]\d|1[0-2]\d"
/><br />
</p>
<p>
<input
type="image"
src="/TP03/03 上机练习素材/01 上机练习素材/练习5： QQ注册验证/image/btn.bmp"
/>
</p>
</form>
</body>
</html>
浙公网安备 33010602011771号