仿 豆瓣注册页面_普通网友的博客-程序员宅基地

技术标签: 前端  

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CH">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎加入豆瓣</title>
<link rel="shortcut icon" type="image/x-icon" href="../HTML图片/u=517497324,1050730652&fm=26&gp=0.ico" >
<style type="text/css">

.GlobalPhone {
vertical-align: middle;
display: inline-block;
}


.GlobalPhone{
display:table;
padding:0;
height:28px;
width:210px;
font-size:0;
position:relative;
}

.GlobalPhone>span{
text-align:center;
padding:0 7px;
cursor:pointer;
color:#494949;
white-space:nowrap;
}


.GlobalPhone>span,.GlobalPhone input{
line-height:28px;
}


.GlobalPhone>*{
font-size:14px;
display:table-cell;
vertical-align:top;
}


.GlobalPhone>span:after{
content:"";
display:inline-block;
height:15px;
border-right:1px solid #ccc;
vertical-align:middle;
margin-left:7px;
}


#request-phone-code-btn{
cursor:pointer;
background:#fff;
border:1px solid #c9c9c9;
font-size:13px;
padding:6px 15px;
border-radius:3px;
vertical-align:middle;
-webkit-border-radius:3px;
}

 

 

 

 

.item {
clear:both;

}


em{
font-style:normal;
}

a:link{
color:#369;
text-decoration:none;
}

 

.loc {
font-size: 12px;
line-height: 30px;
}


input:focus {
border-color:#000 !important;
outline: 0;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,233,0.6);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,233,0.6);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,233,0.6);
}


.basic-input {
width:200px;
height:18px;
padding:5px;
border-radius:3px;
border:1px solid #333;
font-size:14px;
background-color:transparent;
}


label {
display:inline-block;
float:left;
margin-right:15px;
text-align:right;
width:60px;
font-size:14px;
line-height:30px;
vertical-align:middle;
}

.tips, #location{
font-size:12px;
color:#808080;
}
.suggestion {
padding-left:75px;
}


.enable{
color:#ffffff;
background:#3fa156;
border:1px solid #063;
}
.btn-submit{
cursor:pointer;
font-size:14px;
font-weight:bold;
padding:6px 26px;
border-radius:3px;
}

input,button.textarea,select{
font-family:inherit;
font-size:inherit;
font-style:inherit;
font-weight:inherit;
}

</style>
</head>

<body>
<img src="../HTML图片/lg_account.png" />
<br />

<h2>欢迎加入豆瓣</h2>

<div class="item extra-tips">
<label for="Email">邮箱</label>
<input type="text" id="email" placeholder="请输入邮箱" class="basic-input"
maxlength="60" tabindex="1" value/>
</div>


<div >
<label for="Email">密码</label>
<input type="text" id="password" placeholder="请输入密码" class="basic-input"/>
</div>


<div >
<label for="Email">名号</label>
<input type="text" id="name" class="basic-input" />
</div>


<div class="suggestion">
<span class="tips">第一印象很重要,起个响亮的名号吧</span>

</div>


<div class="item loc-item">
<label>常居地</label>
<span class="loc">
<em id="location">
豆瓣猜你在
<strong>成都</strong>
,没猜对?
</em>
<a href="#" class="a-btn-location" id="edloc">手动选择</a>
</span>
</div>



<div class="item extra-tips">
<label for="verify_phone_num">手机号</label>
<div class="basic-input GlobalPhone" >
<span class="js-choose-district" data-abbr="CN">
86
</span>
<div >
<input id="verify_phone_num" type="text" class="basic-input" maxlength="60" value tabindex="1" />
<input id="verify_phone" name="verify_phone" type="hidden"
value />
</div>`
</div>
</div>

<div class="suggestion">
<span class="tips">
用手机接收注册验证码
<br />

验证的手机号如果没有绑定过账号。会自动绑定当前账号
</span>
</div>

<div class="item-caption-item">
<label>验证码</label>
<input id="code" name="code" type="text" class="basic-input small" maxlength="10" tabindex="2" />
<input id="request-phone-code-btn" type="submit" value="获取验证码" />
<span id="tips-error" class="tips">
<em></em>

</span>
<span id="tips-info" class="tips"></span>
<span class="validate-error" id="frm_error"></span>
</div>



<div class="item-submit">
<label>&nbsp;</label>
<input type="submit" name="register" value="注册" id="button" class="btn-submit enable" tabindex="6" title="阅读并同意《使用协议》方可注册"
/>
</div>

<style>
div {

width: 300px;
border: 10px solid white;
padding: 0px;
margin: 0px;
}
</style>

 


</body>
</html>

 

 

 

手打。


更多专业前端知识,请上 【猿2048】www.mk2048.com
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_29069777/article/details/102458821

智能推荐

rewind() 函数_冷月醉雪的博客-程序员宅基地_python rewind函数

查看更多https://www.yuque.com/docs/share/393de5ed-255b-4fe2-94a8-8958b412b10d

如何做好乙方_喝酸奶舔盖儿的土鳖的博客-程序员宅基地_如何做一个合格的乙方

在商场和职场中,存在着两种关系人:甲方(雇主)和乙方(雇员)。即使是刚走出大学校门的应届大学生也知道,做甲方远远优越于做一个乙方,因为每个人的内心深处都希望被人们关注、被人迎合……甲方式行为VS乙方式行为在商业合作中,甲方通常被定义为“购买产品或服务的需求方”,也就是买单者。而目前大多数产品市场处于供大于求的状态,因此,甲方常常高高在上地希望乙方倾听、理解和满足他们,帮助他们达成绩

开源DirectShow分析器和解码器: LAV Filter_雷霄骅的博客-程序员宅基地

LAV Filter 是一款开源的DirectShow视频分离和解码软件,他的分离器LAVSplitter封装了FFMPEG中的libavformat,解码器LAVAudio和LAVVideo则封装了FFMPEG中的libavcodec。它支持十分广泛的视音频格式。支持状况:封装格式:MKV/WebM, AVI, MP4/MOV, MPEG-TS/PS (including b

uniapp 隐藏滚动条_signlesun的博客-程序员宅基地_uniapp 隐藏滚动条

::-webkit-scrollbar { width: 0; height: 0; background-color: transparent; } 只能使用于在scroll-view中

树莓派SQLite3的安装和操作简述_worthsen的博客-程序员宅基地

MySQL占用内存太大,而SQLite是一款轻量级零配置数据库,非常适合在树莓派和其他嵌入式系统中使用。SQLite文档详细资料丰富,本文不会详细解释SQLite数据库操作的方方面面,只能结合具体场景按需说明。本文介绍的SQLite技巧也可以在其他平台使用,并不局限于树莓派。安装 SQLite1234sudo apt-get updatesudo apt-get install sqlite sq

sql语句查询Oracle|sql server|access 数据库里的所有表名,字段名_感谢一路走过的人的博客-程序员宅基地

Oracleselect * from user_tables where table_name = '用户名'如果是用该用户登录使用以下语句:SELECT *FROM USER_TABLES;如果是用其他用户:SELECT * FROM ALL_TABLES WHERE OWNER='USER_NAME'  首先,第一句:是查询的该用户下的所有表吗?一般的

随便推点

antd-admin克隆运行_FE一凡的博客-程序员宅基地_antd项目clone

记录一次从GitHub上克隆项目运行遇到的错误与解决办法。首先,我们要克隆的是一款名为ant-admin的后台管理系统,附上GitHub项目地址antd-admin.为什么要学习它?因为它是基于react,ant-design,dva,Mock的一款企业级后台管理系统最佳实践,与工作所用内容相似。首先我们检查下工具:编译器:WebStorm2017.1.2npm:5.6.0ya...

xcode版本比较低 打开比较新的工程 Xcode导入项目出现cannot be opened because it is in a future Xcode project file format_leek5533的博客-程序员宅基地

Xcode导入项目出现cannot be opened because it is in a future Xcode project file format Adjust the projectThe project at '/Users/yhgj/jhgh/kkjh/quybui.xcodeproj' cannot be opened because it is in a future Xcode project file format. Adjust the project fo...

GPU编程模型_leifeng_soul的博客-程序员宅基地

一个系统可以存在一个主机和多个设备, cpu作为主机(host) ,gpu作为设备 (device),cpu 和gpu协同工作。 cpu负责进行逻辑性强的事物处理和串行计算, gpu专注执行高度线程化的并行处理任务。 cpu、gpu 各自拥有相互独立的存储空间 :主机端的内存和设备端的显存。程序的串行部分交给 cpu处理,并行部分GPU执行。运行在 cuda中并行计算函数称为内核函数 (kerne

emacs-命令执行_wait_for_eva的博客-程序员宅基地

加载执行 load-file filename加载时候会自动执行缓冲执行 eval-buffer自动执行当前buffer单行执行eval-last-sexpC-x C-e,执行当前行。输入执行eval-expressionM-:,手动输入命令进行执行,查看变量时候特别好用。...

win10 mysql卸载5.5与重新安装5.7.19(最全踩坑)_lemonhjw218的博客-程序员宅基地_卸载mysql5.5win10

本机原mysql5.5需要卸载,安装5.7版本。1. 停止mysql服务,右键计算机--&gt;管理,找到mysql服务并停止2. 打开控制面板,卸载mysql程序。3. 删除mysql目录下的所有文件4. 打开“显示隐藏文件”。找到c盘ProgramData下的Mysql目录,该文件夹保存的是之前版本的mysql对应的数据库,备份后删除。5.win+R输入regedit打开注册表,找到HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\...

C语言程序设计(第五版)第一章学习笔记_Linux裸奔者的博客-程序员宅基地

基础知识: #include &lt;stdio.h&gt; //这是编译预处理指令int main() //定义主函数 { //函数开始的标志 printf("This is a C program.\n"); //输出所指定的一行信息 return 0; //函数执行完毕时返回函数值0} //函数结束的标志一个函数必须有主函数main,主函数的int型,说明返回的int型符号常量:#define B 3 ...