收集与整理
1，使用overflow:hidden和:after{content:"";display:table-row;}
2，使用:after写三角形
例如：位置在上方的三角形。左右使用left，right来确定位置
:after {position: absolute;top: -9px;right: 24px;content: "";display: inline-block;border-bottom: 9px solid #FFF;border-left: 9px solid rgba(0, 0, 0, 0);border-right: 9px solid rgba(0, 0, 0, 0);}
3，使用transform和transition来让图片旋转和慢入慢出
需要注意的是必须是块元素。行内元素使用无效。
4，使用font-awesome，图标问题彻底解决，连美工都不需要了。
高大上的网站：点击访问font-awesome
5，ul li a之间的配合
.nav {float: left;margin-left: 50px;list-style: none;line-height: 51px;font-size: 16px;} /*定义与外部的关系float, margin-left，及内部list-type, line-height, font-size*/
.nav li {float: left;margin: 0 1px;}/*li负责横排还是竖排，定义每一个item的间距*/
.nav li a {display: block;padding: 0 20px;} /*将a转化为块元素，设置padding*/
.nav .active, .nav a:hover{background: url(../images/bg-select.png);}