页面布局

 下面我们使用（响应式布局）来布局一下页面

响应式布局包含的三个重要方面：

  1、媒体查询：是一种CSS语法。可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供CSS规则。

  2、流式布局：是使用em或者百分比等相对单位设定页面总体高度，让布局能够随屏幕大小而缩放。

  3、弹性图片：是使用相对单位确保图片再大也不会超过容器的宽、高度。

CSS3强化了CSS2,增加了media query功能

   media query语法：

  @media 设备类型 [ and 设备特性]

  设备类型：screen 适用于计算机显示器

  设备特性：max/min-width 匹配浏览器窗口的宽度

@media screen and (min-width: 576px)

    {
     .dabox div{ width: 100%;}
    }

@media screen and (min-width: 768px)

    {
     .dabox div{ width: 50%;}
    }

@media screen and (min-width: 992px)

    {
     .dabox div{ width: 33.333%;}
    }

@media screen and (min-width: 1200px)

    {
     .dabox div{ width: 25%;}
    }

看下面截图

浏览器窗口宽度大于 576px，宽度width:100%

浏览器窗口宽度大于 768px,宽度width:50%

浏览器窗口宽度大于 992px,宽度width:33.333%

浏览器窗口宽度大于 1200px,宽度width:25%

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

页面动画效果（animation动画）

留意下面图片中小圆点的颜色，它的颜色一直在变也一直在无限循环。

下面这些代码就是实现动画的效果

 首先在HTML这里写个div块级元素包含一个行内元素span标签

然后再到CSS写下面的代码

把div看成是一个盒子，它的宽高是400px;  width: 400px;  height: 400px;

设置它的边框： border: 2px solid #900;

设置它的外边距上下100px 水平居中：margin:100px auto;

设置它的背景颜色： background: #F9F7F7; 

 span 标签是个行内元素，要把它转换为块级元素：display: block;

 把span 标签也看成是一个盒子 宽、高为40px: width: 40px; height: 40px;

 把它变成一个圆行，就是图中的小圆点:border-radius: 50%;

 给它一个背景颜色：background-color: #900;

 调用动画：animation-name: around;

 运动时长: animation-duration: 5s;

 运动路劲: animation-timing-function: ease;

 动画延迟时长: animation-delay: 1s;

 运动次数: animation-iteration-count: infinite; 注意‘infinite’是无限循环。

 动画播放方向: animation-direction: normal;
             normal是默认值，如果设置为normal时，动画的每次循环都是向前播放
             如果设为alternate的时候，他的作用是，动画播放在第奇数次向前播放,第偶数次向反方向播放。                                                                   
 动画时间外属性: animation-fill-mode: none;

animation-name属性主要是用来调用 @keyframes 定义好的动画。

0% {transform: translateX(0); background-color: #FB031A;} 起点。

25% {transform: translateX(360px); background-color: #FB07D3;}水平方向向右180px。

50% {transform: translate(360px,360px); background-color: #0B01F4;} 水平方向向右180px，垂直方向向下180px。

75% {transform: translate(0, 360px); background-color: #00F9DE;} 垂直方向向下180px。

100% {transform: translateY(0); background-color: #04F820; }回到原点。

给这个盒子添加一个伪类：hover

鼠标移进时停止播放，移出继续播放：animation-play-state: paused;

这些动画的特效根据你个人的喜欢来使用，圆点在滚动的时候到每个方向的颜色都不一样，一直变换着，这些颜色根据你个人的喜欢可以更改，你也可以把圆点的背景颜色换成你喜欢的图片，像不同的颜色一样，可以用5张不一样的图片换上去，那div大盒子的背景，你也可以换成你喜欢的图片。

还有那些动画延迟时长、运动的时长、运动的次数、运动的方向、运动路劲、动画播放方向，
这些都可以根据你自己个人喜欢去更改，上面的代码是详细的参考。