form表单相关-登录框

1.form

2.input

    2.1 input类型

<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>

复选框checkbox,单选框radio

<form>
我喜欢自行车：
<input type="checkbox" name="Bike">
<br />
我喜欢汽车：
<input type="checkbox" name="Car">


男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
</form>

下拉列表select

<select name="cars">
<option value="volvo" selected="selected">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

文本域

<textarea rows="10" cols="30">

2.2 input

2.2.1获得焦点事件

 .input{

    border: 1px solid #ddd;;

 }

.input:focus{
    outline: 2px solid #03a9f4;
}
//登录框获取焦点时，外边框颜色改变

3.html中的对a标签设置margin和padding的top、bottom不起效果解决办法

a标签是块级元素，所以magin和padding的上下属性不起作用
解决办法：为a标签添加
display：block；

 

......待更