多语言展示
当前在线:280今日阅读:190今日分享:11

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

很多时候我们需要在大屏时横排比较好看,在小屏时竖排好看。这里就看小编教你怎么用CSS完美解决这个问题。
工具/原料

电脑。

方法/步骤
1

如图写上完整的html代码纯手写,这里写上几个DIV,并排,写上一图片。

2

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

3

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

4

现在我们先看看效果。当我们屏屏幕很大时,引用的是第一个CSS。右浮动的。这样就排成一行了。这里起作用的是这行,他引用了这行里边的CSS文件来排版。

6

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

7

当我们‍鼠标移上去, onmouseover='this.className='Aimg'' onmouseout='this.className='Bimg'' 这两句就生效,移上去就是 class='Aimg',移开就class='Bimg' 这就有了边框了。

推荐信息