本帖最后由 cashiba 于 2017-6-26 09:41 编辑
如上图登录框表单。
如下主要表单代码。
这大概就是Html5+CSS3架构的网页了?
无通常的Form、ID、Name等标记或标签。
主页链接 http://www.iqiyi.com/<div class="login-frame-top">
<div class="login-frame-ti"> <a href="javascript:;" class="frame-close" data-frameClose></a>
<h2 class="login-title">登录</h2>
<div class="info-container info-container-top" data-pwdloginbox="nameContainer">
<!-- 鼠标点击输入,添加类accountIn -->
<div class="country-container"> <span class="country-incon" data-pwdloginbox="zoneArea"> <a href="javascript:;" class="country-link" data-pwdloginbox='selectedZone'></a> <i class="arrow-all" data-pwdloginbox='zoneArrow'></i> </span>
<!-- arrow-all箭头向下 arrow-all-reverse箭头向上 -->
<div class="country_dropDown dn" data-pwdloginbox="zone"></div>
</div>
<p class="errorInfo vh" data-pwdloginbox="nameErr"> <i class="error-info-i"></i> <span>手机号格式错误,请重新输入</span> </p>
<!-- 去掉vh类,显示 -->
<div class="tip-container tip-account-container" data-pwdloginbox="nameInputArea">
<p class="tip-info" data-pwdloginbox="nameTip">请输入手机号或邮箱</p>
<input type="text" class="txt-info txt-account" data-pwdloginbox="name"/>
<div class="account_dropDown" data-pwdloginbox="loginMailSuggest" style="display: none;">
<div class="scroll-bar"></div>
</div>
</div>
<a href="javascript:;" class="re-register dn" data-pwdloginbox="goReg" rseat="pld_ar2reg">去注册</a> </div>
<div class="info-container" data-pwdloginbox='pwdContainer'>
<p class="errorInfo vh" data-pwdloginbox="pwdErr"> <i class="error-info-i"></i> <span>密码错误,请重新输入</span> </p>
<div class="tip-container tip-pwd-container" data-pwdloginbox="pwdInputArea">
<p class="tip-info" data-pwdloginbox="pwdTip">请输入密码</p>
<input type="password" class="txt-info txt-password" data-pwdloginbox="pwd" maxlength="20" data-pwdbak-name="loginpwd"/>
<input type="text" class="txt-info txt-password dn" data-pwdbak="loginpwd" maxlength="20"/>
</span> </div>
<a href="javascript:;" class="eye-close" data-pwdloginbox="eye" rseat="pld_cpwd"></a>
<!-- eye-close为闭眼状态,eye-open为睁眼状态 -->
</div>
<div class="forget-pwd fr"> <a href="javascript:;" data-pwdloginbox="forgetPwdBtn">忘记密码</a> </div>
<div class="forget-pwd fr" style="z-index: 2">
<div class="forget-pwd-dia dn" data-pwdloginbox="forgetPwdZone">
<p class="forget-pwd-que">忘记密码了?</p>
<a href="javascript:;" class="btn-green btn-getPwd" rseat="pld_fndpwd" data-findpwd>找回密码</a> <a href="javascript:;" class="btn-green btn-info-login" rseat="pld_2smslgn" data-smsLogin>短信登录</a> </div>
</div>
<a href="javascript:;" class="btn-green btn-login btn-gray" rseat="pld_lgbtn" data-pwdloginbox="loginBtn">登录</a> </div>
</div>
如果要搞自动登录,有点难以下手的样子......
账号:<input type="text" class="txt-info txt-account" data-pwdloginbox="name"/>
密码:<input type="password" class="txt-info txt-password" data-pwdloginbox="pwd" maxlength="20" data-pwdbak-name="loginpwd"/>
登录:<a href="javascript:;" class="btn-green btn-login btn-gray" rseat="pld_lgbtn" data-pwdloginbox="loginBtn">登录</a>
|