各位同学，有问题希望帮忙解决。谢谢！-慕课网

首页课程实战体系课手记专栏慕课教程

各位同学，有问题希望帮忙解决。谢谢！

来源：13-9 Relative与Absolute组合使用

源来爱上秀

2016-04-06 15:36

注册用户的时候，比如写密码，在它的文本框后面会出现提示密码的格式是怎样的（比如它说 6-12位的数字和字母组成）这样是怎么实现的？还有的是文本框前面会有个*号，表明它必须要填，这个又是怎么实现的呢？可能明白我的意思，会的同学帮帮忙！谢谢！

写回答关注

6回答

倾昀

2016-04-08 15:45:38

已采纳

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本图标对齐与定位二三事</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://img.mukewang.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">注册</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>邮箱格式不准确（演示）
</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">
请输入6-16位密码，区分大小写，不能使用空格
</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">手机号码</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>验证码</label>
<div class="regist-cell">
<input class="regist-input regist-code-input"><img src="http://img.mukewang.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="##">慕课协议</a>。</label>
<p>
<a href="javascript:" class="regist-btn">立即注册</a>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

1 0

源来爱上秀

非常感谢！

2016-04-11 12:03:14

共 1 条回复 >
倾昀

2016-04-08 15:50:12

可以去听下 CSS深入理解之absolute 很好解决了这个问题

0 0
风雪之隅

2016-04-06 16:12:08

随便打开一个可以注册的网站，自己去看源代码。

4 0

风雪之隅回复源来爱上秀

不用谢。加油。

2016-04-07 15:14:55

共 4 条回复 >
慕粉3130641

2016-04-06 15:51:15

解决了吗？求分享！

0 0
慕斯蛋糕啊

2016-04-06 15:49:04
```
啊啊啊
```
0 0
hk1201

2016-04-06 15:47:15

你用angularjs 的话可以用ng-if ng-show实现
*好像是一个样式一般是用<span class=''></span>来实现的

0 0