任务十二：学习CSS 3的新特性
任务目的
- 学习了解 CSS 3 都有哪些新特性，并选取其中一些进行实战小练习
任务描述
- 实现 示例图（点击查看） 中的几个例子
- 实现单双行列不同颜色，且前三行特殊表示的表格
- 实现正常状态和focus状态宽度不一致的input文本输入框，且鼠标焦点进入输入框时，宽度的变化以动画呈现
- 不使用JavaScript，实现一个Banner图轮流播放的效果，且点击右下角的1，2，3可以切换到对应Banner图片
任务注意事项
- 本任务只涉及 HTML 及 CSS
- HTML 及 CSS 代码结构清晰、规范
- 除了任务中的3个小任务，尽可能多地尝试 CSS 3 的其他新特性
任务完成与总结：
整个任务能够分为三小块，第一块就是表格，难度并不大；
第二块是输入框的变化，需要注意一个问题：
第三块是我薄弱的地方，在这里好好总结下，首先，看下HTML结构 ：
现在一步步来分析CSS代码，首先要把父盒子进行相对定位和溢出内容隐藏，而且父盒子需要设置一个背景色进行伪装，这是必须。接着ul和li都要设置绝对定位，其中ul的绝对定位以父盒子为参考物，而li的绝对定位则以ul为参考物。li的位置要向左偏离百分之百，在事件触发时调用slider-out动画：
有一点要理解的是，在li选择事件触发时，被选择的那个li执行的是slider-in动画，而不是全局的slider-out动画，目的是为了营造一个类似手风琴连贯的效果。
两个动画效果：
为了避免页面刷新和载入时有动画效果，因此设置了ul的动画：