day05

margin的小问题

子元素作为父元素的第一个元素，给它margin-top会存在问题；
解决办法：

1.给父元素    
overflow: hidden;
2.给父元素设置伪元素
parent{content:""；display: table；}

1.表单

input输入框type不同
1.text2.password3.submit4.radio
5.checkbox
<input type="text">

1.1一个简单的登陆界面

<form>
<div>
<lable 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>

定义和用法

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

1.2单选框

<div>
<label for="male">男<label>
<input id="male" type="radio" name="sex" value=""男>
<label for="male">女<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="开车">开车

1.4下拉选框

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

1.5文本域

<textarea placeholder="吐槽专区">
&nbsp空格 （less than）&lt< 
（greater than） &gt>

边框修饰

box-shadow: 0px 0px 15px 3px rgba(51,51,51,0.53);