[前端案例05]小米商城的tab栏

1.main::befor给.main元素的所有子元素之前加一个子元素，main::after 给.main元素的所有子元素之后加一个子元素 2.hover标签可以作用于伪元素，使用时中间不加空格 li:hover::after{} 3.状态伪类:checked，一些特定的可以有被选中状态的标签才能用这个选择器，多用于type为raido或checkbox的input标签(似乎无法作用于text文本)； 4.通过连用伪元素和状态伪类checked可以制作大号按钮，虽然名义上伪类(::after)是跟随在元素之后的，但事实上网页会将其看作子元素，其状态受到父元素影响。 li input:checked::after{ background-color: pink; } 5.opacity: ;用于设置元素的不透明度，当该值为0时元素完全透明，当该值为1是元素完全不透明。 6.z-index: ;用于设置元素在z轴上的位置，其效果类似于多层透明玻璃，数值越大元素所在玻璃位置越靠前，该值可以为负数。 7.在宽高后使用单位vw或vh会使元素根据窗口大小动态改变位置，该功能可以用于制作部分动画，但是需要注意的是，如果子元素大小固定，父元素大小的改变可能会影响子元素的位置。 8.绝对定位的宽度参考对象也是定位位置参考对象 9.单击没有边框的input输入框时其外围会出现蓝色边框，使用属性outline: none;可以去除该效果。 10.伪类选择器:target：当元素被作为超链接(href="#")目标访问时会触发该选择器，同时页面会跳转到该元素的位置。 #txt1{ display: none; } /* 访问时显示 */ #txt1:target{ display: block; color: red; font-size: 50px; } 11.transform: rotate( 数字deg);属性用于旋转元素，当值为正数是顺时针旋转，当值为负数时逆时针旋转，输入的数字可以大于360，且可以添加动画效果。 transform: rotate(-45deg);(逆时针旋转45度)