4-8 文本图标对齐与定位二三事
本节编程练习不计算学习进度，请电脑登录imooc.com操作

文本图标对齐与定位二三事

文本图标对齐与定位二三事

任务

老师视频里的不同布局写法，不是习题！！不是习题！！！

index.html 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>文本图标对齐与定位二三事</title>
  6. <style>
  7. body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
  8. a { color: #50B6E5; }
  9. .constr { width: 1200px; margin-left: auto; margin-right: auto; }
  10. .regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; }
  11. .regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; }
  12. .regist-main { width: 600px; margin-left: auto; margin-right: auto; }
  13. .regist-group { margin-top: 20px; overflow: hidden; }
  14. .regist-label { width: 70px; padding-top: 10px; float: left; }
  15. .regist-cell { display: table-cell; *display: inline-block; }
  16. .regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; }
  17. .regist-code-input { width: 130px; }
  18. .regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; }
  19. .regist-btn:hover { background-color: #33a646; }
  20. .icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://img1.sycdn.imooc.com//5453084a00016ae300120012.gif) no-repeat center; }
  21.  
  22. .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
  23. .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; }
  24. .regist-warn { padding-left: 20px; color: #be3948; }
  25. .regist-warn > .icon-warn { position: absolute; margin-left: -20px; }
  26. </style>
  27. </head>
  28.  
  29. <body>
  30. <div class="constr">
  31.     <div class="regist-head">注册</div>
  32.     <div class="regist-body">
  33.     	<div class="regist-main">
  34.         	<div class="regist-group">
  35.             	<label class="regist-label"><span class="regist-star">*</span>登录邮箱</label>
  36.                 <div class="regist-cell">
  37.                 	<input type="email" class="regist-input"><span class="regist-remark regist-warn">
  38.                     	<i class="icon-warn"></i>邮箱格式不准确（演示）
  39.                     </span>
  40.                 </div>
  41.             </div>
  42.             <div class="regist-group">
  43.             	<label class="regist-label"><span class="regist-star">*</span>登录密码</label>
  44.                 <div class="regist-cell">
  45.                 	<input type="password" class="regist-input"><span class="regist-remark">
  46.                     	请输入6-16位密码，区分大小写，不能使用空格
  47.                     </span>
  48.                 </div>
  49.             </div>
  50.             <div class="regist-group">
  51.             	<label class="regist-label"><span class="regist-star">*</span>用户昵称</label>
  52.                 <div class="regist-cell">
  53.                 	<input type="password" class="regist-input">
  54.                 </div>
  55.             </div>
  56.             <div class="regist-group">
  57.             	<label class="regist-label">手机号码</label>
  58.                 <div class="regist-cell">
  59.                 	<input type="tel" class="regist-input">
  60.                 </div>
  61.             </div>
  62.             <div class="regist-group">
  63.             	<label class="regist-label"><span class="regist-star">*</span>验 证 码</label>
  64.                 <div class="regist-cell">
  65.                 	<input class="regist-input regist-code-input"><img src="http://img1.sycdn.imooc.com//545308540001678401500040.jpg">
  66.                 </div>
  67.             </div>
  68.             <div class="regist-group">
  69.             	<label class="regist-label">&nbsp;</label>
  70.                 <div class="regist-cell">
  71.                 	<input type="checkbox" checked><label>我已阅读并同意<a href="##">慕课协议</a>。</label>
  72.                     <p>
  73.                     	<a href="javascript:" class="regist-btn">立即注册</a>
  74.                     </p>
  75.                 </div>
  76.             </div>
  77.         </div>
  78.     </div>
  79. </div>
  80. </body>
  81. </html>
下一节