CSS怎么设置大屏时横排小屏时坚排以及图片动画

1、如图写上完整的html代码

纯手写，这里写上几个DIV，并排，写上一图片。

2、然后写第一个CSS这个CSS里边有一一个关于DIV的排列的问题。第一个DIV是必须右浮动的。 这样这些DIV就会排成一行，不换行。

3、第二个CSS里的DIV里是没有 float:left;也就是不左浮动。现随胆个CSS里都有图片的CSS。

4、现在我们先看看效果。当我们屏屏幕很大时英仗随，引用的是第一个CSS。右浮动的。这样就排成一行了。

<link href="hello.css" rel="stylesheet" type="text/css" media="screen and (min-width: 640px) and (max-width: 1920px)"><!---这个你看就懂了--->

这里起作用的是这行，他引用了这行里边的CSS文件来排版。

5、当我们的屏幕大小小于640时，显示是这样的。

这里起作的是诉暗这行。

<link href="hello2.css" rel="stylesheet" type="text/css" media="screen and (max-width: 640px)"><!---最大宽度为640时调hello2竖排样式用---

6、我们再来看看鼠标移上去的效果。这里没有边框的，使用是这个CSS  class="Bimg" 

7、当我们‍鼠标移上去， onmouseover="this.className='Aimg'" onmouseout="this.className='Bimg'" 这两句就生效，

移上去就是 class="Aimg"，移开就class="Bimg"

这就有了边框了。