css应用实例（http://www.runoob.com/css/css-examples.html）

1.加载进度条
1.当在<div></div>中嵌套使用<P></p>或者<div></div>等元素时，设定的嵌套的元素的高度即为外层元素高度；
2.学会对@-webkit-keyframes的使用：
a.-webkit-animation: html-css 2s ease-out;
b.

@-webkit-keyframes html-css {
            0% {
                width: 0px;
            }
            100% {
                width: 90%;
            }
        }

2.文字覆盖图像
1.opacity的使用，用于覆盖的对象opacity: 0;，覆盖时opacity: 1;
2.覆盖对象位置的固定position: absolute;，同时top: 0; bottom: 0;left: 0; right: 0;
3.文字滑动覆盖图像（对文字所在对象），注意transition和几个位置的使用：
a.从上到下

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}
.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

b.从下到上

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}
.container:hover .overlay {
  height: 100%;
}

c.从左至右

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}
.container:hover .overlay {
  width: 100%;
}

d.从右至左

.overlay {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}
.container:hover .overlay {
  width: 100%;
  left: 0;
}

3.分页样式
1.设置边框半径使边框棱角变为椭圆border-radius:4px<!--(左上角)--> 10px<!--(右上角)--> 20px<!--(右下角)--> 30px<!--(左下角)-->;，若只设置一个值，则表明四个角一个设置，同时还可以调整四个角的半径，使之变为圆形或者椭圆形；
2.阴影与阴影颜色box-shadow: 10px 8px 16px 16px rgba(0,0,0,9);

4.加载（动画效果）

5.开关样式

6.水平滚动菜单栏
1.规定需要滚动文本不进行换行：white-space: nowrap;
2.设置滚动：overflow: auto;
3.若设置垂直滚动，则只需在设定好文本大小后添加overflow-y: auto;即可。

7.响应式登陆表单