为了账号安全,请及时绑定邮箱和手机立即绑定

各位同学,有问题希望帮忙解决。谢谢!

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

正在回答

6 回答

<!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://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">注册</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://img1.sycdn.imooc.com//545308540001678401500040.jpg">

                </div>

            </div>

            <div class="regist-group">

            <label class="regist-label">&nbsp;</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>


0 回复 有任何疑惑可以回复我~
#1

源来爱上秀 提问者

非常感谢!
2016-04-11 回复 有任何疑惑可以回复我~

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


0 回复 有任何疑惑可以回复我~

http://img1.sycdn.imooc.com//5704c4a80001d45811110449.jpg

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

0 回复 有任何疑惑可以回复我~
#1

源来爱上秀 提问者

看过,看不懂。你可会啊?会的话随便帮忙写个例子呗
2016-04-06 回复 有任何疑惑可以回复我~
#2

风雪之隅 回复 源来爱上秀 提问者

http://www.imooc.com/code/292 ,自己解决问题。如果还不会去mooc新手群里面去问。不要直接让别人帮你写,那样你下次还是不会。
2016-04-07 回复 有任何疑惑可以回复我~
#3

源来爱上秀 提问者 回复 风雪之隅

好的,谢谢你。
2016-04-07 回复 有任何疑惑可以回复我~
#4

风雪之隅 回复 源来爱上秀 提问者

不用谢。加油。
2016-04-07 回复 有任何疑惑可以回复我~
查看1条回复

解决了吗?求分享!

0 回复 有任何疑惑可以回复我~
啊啊啊


0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1225288    人
  • 解答问题       18230    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

各位同学,有问题希望帮忙解决。谢谢!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信