|
页面采用了卡片式的设计,在鼠标滑过时,卡片会向上浮起(这一效果来自小米的官网),同时页面整体是响应式的,在 >900px 的页面上一行显示三个卡片,在 600px~900px 大小的页面上一行显示两个卡片,在 <600px 的页面上则一行只显示一个。% N$ G7 b, c' G: P
# p6 ^! i' X( Z 如果卡片中的文字过长,还会自动进行“裁剪”,多出的文字会被“...”替代(只支持现代浏览器)。% L5 e- K- @) O1 n
(点击查看演示)
3 @; h. X. f8 `5 D. V7 y- l4 z! Q
m" @" Q1 K4 \+ J) M" m; U0 d 它的浏览器兼容性非常好,就算是在低版本的 IE 上,页面也不会出现错乱。全部代码如下:
- i% O: l; R/ O D: b! U7 H Z# V6 e& T8 f& y0 p! w! z
4 F' h) f; Y0 @9 l) @6 `8 S
% p j" U: k A. B |
|