|
|
页面采用了卡片式的设计，在鼠标滑过时，卡片会向上浮起(这一效果来自小米的官网)，同时页面整体是响应式的，在 >900px 的页面上一行显示三个卡片，在 600px~900px 大小的页面上一行显示两个卡片，在 <600px 的页面上则一行只显示一个。
1 D* p4 o7 W- W3 c% B7 h% m9 ~3 n& J, j
如果卡片中的文字过长，还会自动进行“裁剪”，多出的文字会被“...”替代(只支持现代浏览器)。
; q; C8 y, @! j5 v* I7 u: Z, u
(点击查看演示）
% S0 L$ q$ O9 n
9 j) h8 x j# J, j, { 它的浏览器兼容性非常好，就算是在低版本的 IE 上，页面也不会出现错乱。全部代码如下：
" k2 P. y: p4 p; n; R; h
/ n4 R S* P& C3 N6 y) S k$ t9 s% d$ b' _$ b s+ @$ Y% d: @. f4 ~9 Y
8 n8 w+ t" H4 y" L |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2018-11-23 00:15:18