各位同學(xué)，有問題希望幫忙解決。謝謝！
注冊(cè)用戶的時(shí)候，比如寫密碼，在它的文本框后面會(huì)出現(xiàn)提示密碼的格式是怎樣的（比如它說(shuō) 6-12位的數(shù)字和字母組成）這樣是怎么實(shí)現(xiàn)的？還有的是文本框前面會(huì)有個(gè)*號(hào)，表明它必須要填，這個(gè)又是怎么實(shí)現(xiàn)的呢？???? 可能明白我的意思，會(huì)的同學(xué)幫幫忙！謝謝！
源來(lái)愛上秀
2016-04-06
6 回答
舉報(bào)
0/150
提交
取消
2016-04-08
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本圖標(biāo)對(duì)齊與定位二三事</title>
<style>
body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
a { color: #50B6E5; }
.constr { width: 1200px; margin-left: auto; margin-right: auto; }
.regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; }
.regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; }
.regist-main { width: 600px; margin-left: auto; margin-right: auto; }
.regist-group { margin-top: 20px; overflow: hidden; }
.regist-label { width: 70px; padding-top: 10px; float: left; }
.regist-cell { display: table-cell; *display: inline-block; }
.regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; }
.regist-code-input { width: 130px; }
.regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; }
.regist-btn:hover { background-color: #33a646; }
.icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://img1.sycdn.imooc.com//5453084a00016ae300120012.gif) no-repeat center; }
.regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
.regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; }
.regist-warn { padding-left: 20px; color: #be3948; }
.regist-warn > .icon-warn { position: absolute; margin-left: -20px; }
</style>
</head>
<body>
<div class="constr">
? ? <div class="regist-head">注冊(cè)</div>
? ? <div class="regist-body">
? ? <div class="regist-main">
? ? ? ? <div class="regist-group">
? ? ? ? ? ? <label class="regist-label"><span class="regist-star">*</span>登錄郵箱</label>
? ? ? ? ? ? ? ? <div class="regist-cell">
? ? ? ? ? ? ? ? <input type="email" class="regist-input"><span class="regist-remark regist-warn">
? ? ? ? ? ? ? ? ? ? <i class="icon-warn"></i>郵箱格式不準(zhǔn)確（演示）
? ? ? ? ? ? ? ? ? ? </span>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="regist-group">
? ? ? ? ? ? <label class="regist-label"><span class="regist-star">*</span>登錄密碼</label>
? ? ? ? ? ? ? ? <div class="regist-cell">
? ? ? ? ? ? ? ? <input type="password" class="regist-input"><span class="regist-remark">
? ? ? ? ? ? ? ? ? ? 請(qǐng)輸入6-16位密碼，區(qū)分大小寫，不能使用空格
? ? ? ? ? ? ? ? ? ? </span>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="regist-group">
? ? ? ? ? ? <label class="regist-label"><span class="regist-star">*</span>用戶昵稱</label>
? ? ? ? ? ? ? ? <div class="regist-cell">
? ? ? ? ? ? ? ? <input type="password" class="regist-input">
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="regist-group">
? ? ? ? ? ? <label class="regist-label">手機(jī)號(hào)碼</label>
? ? ? ? ? ? ? ? <div class="regist-cell">
? ? ? ? ? ? ? ? <input type="tel" class="regist-input">
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="regist-group">
? ? ? ? ? ? <label class="regist-label"><span class="regist-star">*</span>驗(yàn) 證 碼</label>
? ? ? ? ? ? ? ? <div class="regist-cell">
? ? ? ? ? ? ? ? <input class="regist-input regist-code-input"><img src="http://img1.sycdn.imooc.com//545308540001678401500040.jpg">
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="regist-group">
? ? ? ? ? ? <label class="regist-label"> </label>
? ? ? ? ? ? ? ? <div class="regist-cell">
? ? ? ? ? ? ? ? <input type="checkbox" checked><label>我已閱讀并同意<a href="##">慕課協(xié)議</a>。</label>
? ? ? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? <a href="javascript:" class="regist-btn">立即注冊(cè)</a>
? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
</div>
</body>
</html>
2016-04-08
可以去聽下?CSS深入理解之a(chǎn)bsolute ?很好解決了這個(gè)問題?
2016-04-06
隨便打開一個(gè)可以注冊(cè)的網(wǎng)站，自己去看源代碼。
2016-04-06
解決了嗎？求分享！
2016-04-06
2016-04-06
你用angularjs 的話可以用ng-if ng-show實(shí)現(xiàn)
*好像是一個(gè)樣式 一般是用<span class=''></span>來(lái)實(shí)現(xiàn)的