css sprites和checkbox开关

1.css sprites 图片精灵

<ul>
    <li><i>插背景图</i></li>
</ul>

2.新增选择器

:before         
    h2:before/after{
        content:"111122"    在前面插入
        background:red;
        
    }
.xxx::before/::after{
    content:none;
}

3、全局样式清除浮动

.clearfix:after{
    content:"."
    display:block;
    clear:both;
    visibillity:hidden;
    height:0;
}

4、:first-letter: 选取以哪个标签元素为首的字母

5、:first-line: 选择哪个标签元素的首行

点文字也能选中
<input type="checkbox" id="eat"><label for="eat">吃</label>

6、做开关

<input type="checkbox" id="apple"><label for="apple"></label>

input{
    display:none;
}

:checked 修改复选框选中后的状态

7、选中之后出现下拉菜单

li{
    
    background:;
    line-height:
}
div{
    display:none;
}
input{
    display:none;
}
lable{
    display:block;
    height:
    width:
}
input[type=checkbox]:checked+label+div{
    display:block;
}

8、vertical-align:middle;垂直居中

9、outline:none;文本框外边框

10、placeholder:... 文本框文字提示信息