首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

灵活运用CSS开发技巧

前言 √灵活运用CSS开发技巧 请戳这里,持续更新 √灵活运用JS开发技巧 请戳这里,持续更新 何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。...在线演示 使用overflow-x排版横向列表 要点:通过flexbox或inline-block的形式横向排列元素,对父元素设置overflow-x:auto横向滚动查看 场景:横向滚动列表、元素过多但位置有限的导航栏...在线演示 使用text-overflow控制文本溢出 要点:通过text-overflow:ellipsis对溢出的文本在末端添加… 场景:单行文字溢出、多行文字溢出 兼容:text-overflow、...在线演示 使用transform模拟视差滚动 要点:通过background-attachment:fixed或transform让多层背景以不同的速度移动,形成立体的运动效果 场景:页面滚动、视差滚动文字阴影...、视差滚动文字虚影 兼容:background-attachment、transform 代码:在线演示 ?

4.5K20

Material Design — 网格列表(Grid lists)

类型 仅图像 单行文本(可带图标) 两行文字(可带图标) 操作 垂直滚动 筛选 替代 Lists Cards ---- 用法 网格列表最适合呈现同类数据,通常为图像,并且针对视觉理解和区分类似数据类型进行了优化...主要操作 ·填充整个tile,因此不会通过图标或文字的形式呈现 ·在一个特定grid list中的所有tile中都保持一致。...次要操作与文案的位置 ---- 行为 滚动 grid lists通常只能垂直滚动。 不鼓励横向滚动grid lists,因为滚动会干扰典型的阅读模式,影响理解。...一个明显的例外是水平滚动单行图像grid list,例如图库,它与典型的阅读模式相符合。 切断grid lists初始滚动位置中的网格图块,以传递出内容溢出的滚动方向。 ?...Grid lists展示图像优先于文字,Lists展示文字优先于图像。 要在整个网格列表中保持一致的节奏,请截断过长的文本内容。或者,增加grid的大小,以便tiles可以容纳较长的标题。

3.4K120
领券