标签：CSS

前端里 - 小鱼 发布于 2023-12-09

1、文字超出部分显示省略号 单行文本的溢出显示省略号（一定要有宽度） p{ width:200rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 多行文本溢出显示省略号 p { display...

阅读(569)评论(0)赞 (3)标签：CSS / CSS3

前端里 - 小鱼 发布于 2023-10-06

滚动是我们网站的用户最常用的操作之一，添加滚动效果是增强用户体验的好方法。例如，对于内容很长的页面增加进度提示，在用户滑动页面的时候增加动画效果等等，这些很小的改进都可以帮助用户更好的使用网站的功能。这篇文章收集了8个实现网站滚动效果的 CSS & JavaScript ...

阅读(620)评论(0)赞 (5)标签：CSS / JavaScript

前端里 - 小鱼 发布于 2023-02-26

前言 在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较...

阅读(701)评论(0)赞 (4)标签：CSS / JavaScript

前端里 - 小鱼 发布于 2023-02-11

照片库（相册）是很多网站的必备功能，因为独特地呈现图像的能力可以帮助网站脱颖而出。网页开发者设计师正在利用这一优势，他们使用最新的 CSS 和 JavaScript 技术来创建抽象布局和引人注目的特效。从简单的网格画廊到超凡脱俗的用户界面，各个特效都有。这边文章收集了8个独特的照...

阅读(804)评论(0)赞 (5)标签：CSS / JavaScript

前端里 - 小鱼 发布于 2020-11-18

本文作者：张敏 原创声明：本文为阅文前端团队 YFE 成员出品，请尊重原创，转载请联系公众号 (id: yuewen_YFE) 获取授权，并注明作者、出处和链接。 背景 传统的swiper太重了，里面封装了很多我们不需要的功能，而一个简单的滚动功能没必要那么重的文件。于是就想着自...

阅读(2410)评论(0)赞 (9)标签：CSS

前端里 - 小鱼 发布于 2020-07-12

周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在（有兴趣的可以看我一年前发布的关于 C...

阅读(2105)评论(0)赞 (7)标签：CSS

前端里 - 小鱼 发布于 2018-10-27

回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享，所以对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。 浏览器的渲染过程 本文先...

阅读(1789)评论(0)赞 (5)标签：CSS

前端里 - 小鱼 发布于 2018-08-15

七月虽然不是一个丰收的季节，但却是一个十分酷热的月份。不知有多少小伙伴跟我一样，顶着大太阳奔波在各种面试的征途中。面试是一个漫长的过程。但是也是一个让你快速提升的过程。其中包含了无数的血与泪。去面试前首先我们必须有牢固的基础知识，足够丰富的项目经历(就我而言差不多是三个完整项目经...

阅读(767)评论(0)赞 (35)标签：CSS / JavaScript

前端里 - 小鱼 发布于 2017-10-22

笔者所在的前端团队主要从事移动端的H5页面开发，而团队使用的适配方案是: viewport units + rem。具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 。 笔者目前（2017.08.12）接触到的移动端适配方案中，「利用视口单位实现适配布局」是最好的方案。...

阅读(3033)评论(0)赞 (5)标签：CSS / 动画

前端里 - 小鱼 发布于 2017-03-25

Bulma 是一个基于 Flexbox 的现代化的 CSS 框架，设计的初衷就是移动优先（Mobile First），模块化设计，可以轻松用来实现各种简单或者复制的内容布局，浏览器支持：浏览器支持：Chrome、Edge、Firefox、Internet Explorer (10...

阅读(3838)评论(0)赞 (22)标签：CSS / Flexbox