html+css开发用户注册页面
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html+css开发用户注册页面相关的知识,希望对你有一定的参考价值。
需求:
用html+css开发用户注册页
代码展示:(仿京东注册页)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>注册页面</title> </head> <body> <div style="height: 100px;"> <div style="float: left;width: 450px;"> <div style="background-image: url(img/gw.png);height: 70px;width: 100px; background-position: 0px 0px;background-repeat: no-repeat;margin-top: 10px; margin-left: 310px;"></div> <div style="float: right;"></div> </div> <div style="float: left;width: 200px;height: 100px;"> <div style="float:left;height: 40px;margin-top: 25px;"></div> <div style="padding-left: 20px;padding-top: 10px;"> <h2>欢迎注册</h2> </div> </div> <div style="float: right;width: 500px;height: 100px;"> <div style="float: left;padding-left: 300px;padding-top: 60px;">已有账号</div> <div style="float: right;font-weight: bold;padding-right: 70px;padding-top: 60px;cursor: pointer">请登陆</div> </div> </div> <div style="height: 7px;background-color: ghostwhite;"></div> <div style="height: 750px;position: relative;"> <div style=‘height: 750px;width: 690px;float: left;‘> <div style="margin-top: 70px;height: 66px;"> <label for="name1" style="margin-left: 250px;font-size: 25px;"> 用 户 名 <input id="name1" type="text" maxlength="10" style="height: 50px;width: 300px;"> </label> </div> <div style="margin-top: 30px;height: 66px;"> <label for="name2" style="margin-left: 250px;font-size: 25px;"> 设置密码 <input id="name2" type="password" maxlength="20" style="height: 50px;width: 300px;"> </label> </div> <div style="margin-top: 30px;height: 66px;"> <label for="name3" style="margin-left: 250px;font-size: 25px;"> 确认密码 <input id="name3" type="password" maxlength="20" style="height: 50px;width: 300px;"> </label> </div> <div style="margin-top: 30px;height: 66px;"> <label for="name4" style="margin-left: 250px;font-size: 25px;"> <select style="height: 55px;width: 126px;font-size: 25px;margin-top: 0px;"> <option value="1">台湾 +86</option> <option value="2">香港 +852</option> <option value="2">马来西亚 +60</option> <option value="2">新加坡 +65</option> <option value="2">韓国 +82</option> <option value="2">美国 +1</option> <option value="2">澳门 +853</option> <option value="3" selected="selected">中国 +86</option> </select> <input id="name4" type="password" maxlength="20" style="height: 40px;width: 285px;padding-top: 10px;margin-left:-14px ;"> </label> </div> <div style="margin-top: 30px;height: 66px;"> <label for="name5" style="margin-left: 250px;font-size: 25px;"> 验 证 码 <input id="name5" type="text" maxlength="10" style="height: 50px;width: 300px;"> </label> </div> <div style="margin-top: 30px;height: 66px;"> <div style=";height: 55px;width: 580px;float: left;"> <label for="name6" style="margin-left: 250px;font-size: 25px;"> 手机验证码 <input id="name6" type="text" maxlength="10" style="height: 50px;width: 188px;"> </label> </div> <div style="background-color: lightgrey;height: 33px;width: 100px;float: right;padding-top: 23px;padding-right: 10px;"> 获取验证码</div> </div> <div style="margin-top: 30px;margin-left 30px:height: 102px;"> <div style="padding-left: 248px;"> <input type="radio"> 我已阅读并同意<今冬用户注册协议> </div> <div style="margin-left: 248px;"> <button type="submit" style="margin-top: 22px;height: 57px; width: 350px;font-size: 27px;background: red;cursor: pointer">立刻注册</button> </div> </div> </div> <div style=‘float: right;height: 750px;width: 580px;‘> <div style="float: left;border: 1px solid beige;height: 648px;margin-top: 65px;"></div> <div style="float: right;margin-left: 100px;height: 308px;width: 475px;"> <div style="background-image: url(img/1.png); margin-top: 100px; height: 200px; background-repeat: no-repeat; background-position: -0px -53px;"> </div> <div style="float: right;margin-left: 100px;height: 308px;width: 475px;"> <div style="background-image: url(img/2.png); cursor: pointer; margin-top: 60px; height: 158px; background-repeat: no-repeat; background-position: -5px -12px;"> </div> </div> </div> </div> </div> <div style=‘height: 123px;margin-top: 50px;‘> <div style="border: 1px solid beige;width: 1200px;margin-left: 60px;"></div> <div style="margin-left: 284px;margin-top: 33px;height: 25px;width 600px;color: darkgray;cursor: pointer"> 关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 友情链接| | 销售联盟 | English Site </div> <div style="margin-left: 550px;margin-top: 15px;font-size: 15px;color: darkgray;"> Wsyht90t2004-2016 今冬wsyht90.com 版权所有 </div> </div> </body> </html>
京东注册页展示
我的页面展示
本文出自 “wsyht90的博客” 博客,请务必保留此出处http://wsyht90.blog.51cto.com/9014030/1850897
以上是关于html+css开发用户注册页面的主要内容,如果未能解决你的问题,请参考以下文章