|
|
页面采用了卡片式的设计，在鼠标滑过时，卡片会向上浮起(这一效果来自小米的官网)，同时页面整体是响应式的，在 >900px 的页面上一行显示三个卡片，在 600px~900px 大小的页面上一行显示两个卡片，在 <600px 的页面上则一行只显示一个。
# ~) L- M" ~. M/ [. e& x! j* D7 G Q( Q/ r" s
如果卡片中的文字过长，还会自动进行“裁剪”，多出的文字会被“...”替代(只支持现代浏览器)。2 r5 q: {0 b$ [' J+ S! C$ \
(点击查看演示）
! c! W+ ]2 c1 i4 _
' ~0 N f9 v+ G+ f, l+ l2 ` 它的浏览器兼容性非常好，就算是在低版本的 IE 上，页面也不会出现错乱。全部代码如下：
3 I( g, d% Z T8 j1 w2 l
6 E& t: ^, \" o k0 y' y1 p; N
+ h$ @ L1 j2 F& X$ M. D. B) S* T( j
5 k |- ~: K1 e B# z9 ~% H |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2018-11-23 00:15:18