|
|
页面采用了卡片式的设计,在鼠标滑过时,卡片会向上浮起(这一效果来自小米的官网),同时页面整体是响应式的,在 >900px 的页面上一行显示三个卡片,在 600px~900px 大小的页面上一行显示两个卡片,在 <600px 的页面上则一行只显示一个。: M* N7 [8 e+ V4 e+ ]2 R
! I, y7 M8 g( `* p" M
如果卡片中的文字过长,还会自动进行“裁剪”,多出的文字会被“...”替代(只支持现代浏览器)。
t3 Y8 O- K$ ~! J3 |+ V' ^' T# A& Y
(点击查看演示)
# G& V5 S/ B7 c4 O4 a4 r7 e( p$ h' C7 k# |" d
它的浏览器兼容性非常好,就算是在低版本的 IE 上,页面也不会出现错乱。全部代码如下:
% c5 Y2 Z) n' O9 N! N+ U. i/ K- v: [- g" i3 o7 O% E
2 m9 f3 @" f+ ~* a/ ?* _! k' W) k. C8 c* a4 J5 V$ f$ y
|
|