7、表单 雪碧图

1.表单

//input输入框type不同
1.text 2.password 3.submit 4.radio 5.checkbox
    <input type="text">

1.1一个简单的登录界面

<form>
        <div>
            <label for="text">文本</label>
            <input id="text" type="text" />
        </div>
        <div>
            <label for="password">密码</label>
            <input id="password" type="password" />
        </div>
        <div>
            <input type="submit" value="登录" />
        </div>
</form>

//定义和用法
标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
标签的for 属性应当与相关元素的id 属性相同。

1.2单选框

技术要点:name名相同

<div>
        <label for="male">男</label>
        <input id="male" type="radio" name="sex" value="男">
        <label for="female">女</label>
        <input id="female" type="radio" name="sex" value="女">
</div>

1.3复合选框

<div>
        <label>爱好</label>
        <input type="checkbox" name="爱好" value="游泳">游泳
        <input type="checkbox" name="爱好" value="开车">开车
</div>

1.4下拉选框

<select>
        <option>洪山区</option>
        <option>青山区</option>
        <option>汉阳区</option>
</select>

1.5预选下拉

<form >
        <select>
            <option>洪山区</option>
            <option selected>青山区</option>
            <option>汉阳区</option>
        </select>
</form>

1.6文本域

<textarea placeholder="看点槽点，不吐不快！别憋着，马上大声说出来吧！">
</textarea>

1.7特殊字符

&nbsp;空格 &lt;<    &gt; >

2.雪碧图

.warp{
  width: 30px;
  height: 30px;
  background-color: rgb(167, 167, 167);
  border-radius: 50%;
  position: relative;
  float: left;
  margin-left: 20px;
}
.weibo{
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(images/icons_type.png) no-repeat;
  background-position-x: -36px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -11px;
  margin-top: -11px;
}