css3导航 列表

1、css3中应用了伪类 :hover,鼠标位于a之上时,绝对定位下拉列表和宽度。但是没有定义left和top,列表会显示在标签a的下方。目前测试除了ie8,其他浏览器都没问题。

2、伪元素::before和::after,表示在某个元素之前之后插入内容{content:"",transform:,}等

3、计数器。http://www.w3cplus.com/css3/css-counters.html

父元素中:counter-reset:计数器名 [起始值]

子元素{counter-increment:计数器名 [增长速度] &:before{content:"-"counter(计数器名) ; margin-right:10px;}}

或者子元素:before{content:counter(计数器名 [起始值]) "、"counter-increment:计数器名 [增长速度]}

4、鼠标滑动变大 :hover{transform:scale(2); left:-10px;}

5、为了页面效果更炫,还会加一点text-shadow box-shadow opacity

6、box-sizing 有三个值content-box:遵从w3c以前的规则宽高不包括padding和border

border-box:宽高包括padding和border

padding-box:宽高包括padding //ie浏览器不识别

-webkit-border-sizing //safari webkit浏览器

-moz-border-sizing  //ff浏览器

border-sizing:   //opera其它浏览器

原文地址:https://www.cnblogs.com/yaodi/p/4087886.html