“无依赖绝对定位”与超越常规布局的排版实例页面

展示

代码

• HTML：

  <div class="regist-box">
      <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">手机号码</label>
          <div class="regist-cell">
              <input type="tel" class="regist-input">
          </div>
      </div>
      <div class="regist-group">
          <i class="regist-label"></i>
          <div class="regist-cell">
              <a href="javascript:" class="regist-btn">立即注册</a>
          </div>
      </div>
  </div>

• 核心CSS：

  /* 容器宽度仅300多像素 */
  .regist-box { 
      width: 356px; 
      margin-left: auto; margin-right: auto; 
  }
  /* 邮箱报错那里的警示小图标 */
  .regist-warn { 
      padding-left: 16px; 
      color: #be0000; 
  }
  .icon-warn {  
      position: absolute; 
      margin-left: -18px; 
      width: 16px; height: 20px; 
      background: url(/images/6/warn.gif) no-repeat center; 
  }
  /* 定位在盒子外部的红色星号 */
  .regist-star { 
      position: absolute; 
      margin-left: -1em; 
      font-family: simsun; 
      color: #f30; 
  }
  /* 超出容器尺寸的提示信息 */
  .regist-remark { 
      position: absolute; 
      margin: 10px 0 0 10px;
      color: #666;
  }