很多时候我们需要在大屏时横排比较好看,在小屏时竖排好看。这里就看小编教你怎么用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' 这就有了边框了。