杰的记事本-腾讯云开发者社区

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

杰的记事本

专栏成员

231

文章

506006

阅读量

32

订阅数

利用Purgecss移除未使用到的样式

css vue.js 打包 javascript

我们做项目时，通常会使用一些常用的css框架，比如我会经常用到 tailwindcss ，bootstrap 等等，但是使用这些框架后，打包出来的css文件过于庞大，而且很多样式是我们没有使用到的，完全没有必要打包进去。还有一种情况是我们的网站进行改版了，有些样式已经不再使用了，但是我们没有在css文件中移除，导致css越来越大。这时候我们就可以用 Purgecss来只打包我们项目中正在使用到的样式来减小css文件体积。本篇文章使用 tailwindcss 在 vue中的例子进行说明：

javascript.shop

2020-04-17

2.1K0

分享一些Chrome开发工具的用法

css node.js javascript

在元素面板选择一个元素,然后在控制台输入$0,就会在控制台中得到刚才选中的元素。如果页面中已经包含了 jQuery,你也可以使用$($0)来进行选择。

javascript.shop

2020-02-17

9990

flex space-between最后一行对齐问题的解决方案

html https css 网络安全

常见的一个图文列表设计，通常是这样的，两端顶着容器，中间的间距平均分，如下图的某东商品列表的设计：

javascript.shop

2020-02-11

3.1K0

position:sticky的尝试

css https 网络安全 html

sticky这种设计效果是经常出现的，比如陶宝右侧的工具栏，当我们向下滚动到它的位置时，它就会黏住顶部跟随滚动，类似position: fixed的效果，只不过它的触发条件是当我们滚动到所在位置时，才触发fixed的效果的：

javascript.shop

2019-12-10

9400

flex下省略号的问题及whitespace nowrap

css flex min output width

最近在搞微信小程序，发现flex下使用省略号是没有效果的，而且还会打乱预期的结构，查询statckoverflow知道需要在父级设置min-width:0; 但是在我的尝试下，依然不行，原来在上层父级就是flex那一级别也需要设置 min-width:0; 就是可以理解为省略号标签的flex-item以及所在的flex父级都需要设置min-width:0;

javascript.shop

2019-09-18

6430

CSS3实现loading效果转圈圈

8个点实际对应于box-shadow的8个投影，图片大小标准32px*32px，考虑到点的八卦布局以及大小限制，因此，我们的容器本身只有3px*3px，于是，有如下的实现代码：

javascript.shop

2019-09-05

6.5K0

CSS兼容性的一些Hack方法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

javascript.shop

2019-09-05

1.1K0

HTML的书写规范

html 编程算法 css

The following document outlines a reasonable style guide for HTML development. These guidelines strongly encourage the use of existing, common, sensible patterns. They should be adapted as needed to create your own style guide.

javascript.shop

2019-09-05

6930

几个小处理提高前端性能

css 渲染 html

一、最最基本的 CSS顶部, JS底部 YUI compressor/Gzip CDN 有必要的CSS Sprite Ajax可缓存以上没什么好说的。二、CSS渲染、页面重绘以及回流尽量避免类似.a.b{}.list a{}以及其他一些复杂选择器，以提高整站整体CSS渲染。避免某些expression表达式，避免IE6的AlphaImageLoader png透明滤镜，可以试试使用fireworks生成png8 alpha透明（目前photoshop只有png8 索引透明）。适当定高，例如如果d

javascript.shop

2019-09-05

1.2K0

vw, vh视窗宽高单位的使用

不过“我看见你”和“我触碰你”是不一样的。正好，机缘巧合，最近又与这两个单位想见。大致琢磨了下，貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局。想到这里，自己不由得小兴奋了下，于是决定抽时间研究研究（虽然最近整iPad忙得屁股尿流~~）。

javascript.shop

2019-09-05

2.5K0

HTML5点击全屏的方法

这个按钮是？我移了好几遍，没有title提示。图形也不具有代表性，一个圈圈意思是？——圈人？？是不是啊？？不敢点，点了不知道会发生什么，浏览器会不会关掉！！我思想斗争做了很久，终于弱弱地点了一下~~

javascript.shop

2019-09-04

4.7K0

SASS/SCSS入门

sas sass css ruby

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

javascript.shop

2019-09-04

1K0

CSS隐藏内容的几种做法

在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。后宫选秀——一个一个看。

javascript.shop

2019-09-04

1.5K0

display:table-cell自适应布局下连续单词字符换行

这种方式实现的自适应布局，元素宽度无需定值，且margin(浮动部分)与padding自由设置，支持百分比宽度（table-cell内），且可以无限制嵌套，兼容性不错，在我看来是最佳自适应布局方式。

javascript.shop

2019-09-04

5980

怎样简单的提高网站性能

html 缓存 css 网站 javascript

用户的耐心不是线性的。第1秒的时候基本上没有人会放弃这个站点。但是，1秒开外之后，如果没有适当的反馈的话（例如浏览器标头显示页面标题），用户开始以一个加速的比率离开。到3~4秒的时候，一般的站点会一半的潜在用户。当然，具体的阈值根据网站、用户行为和意图以及其他因素不同而有所不同……但万变不离其宗。

javascript.shop

2019-09-04

2.4K0

inline-block空格间距问题的解决

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

javascript.shop

2019-09-04

8580

高度不固定的图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。

javascript.shop

2019-09-04

3K0

text-align属性对position:absloute/fixed的元素无效

text-align属性对position:absloute/fixed的元素无效

javascript.shop

2019-09-04

1.8K0

在Email中的HTML规范

目前，兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上这个Doctype。

javascript.shop

2019-09-04

2.3K0

一些原生写法可以替代Jquery方法

jquery php css ajax javascript

jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。

javascript.shop

2019-09-04

2.1K0

点击加载更多

社区活动

【纪录片】中国数据库前世今生

穿越半个世纪，探寻中国数据库50年的发展历程

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态