![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
Web全栈开发
Vue Vue.js React Angular javaScript ES6 js HTML5 H5 webpack (React Native)
HBuilder Mui jQuery (uni app) 微信小程序 mpvue APICloud element-ui (ant deisign)
CSS CSS3 Node.js WEB前端 Web全栈开发 Layui Egret flutter Taro ionic gulp
展开
-
45个值得收藏的 CSS 形状
CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。我们还可以使用 CSS 伪元素中的 ::before 和 ::after,这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧,我们可以只用一个...原创 2019-08-25 14:55:22 · 144 阅读 · 0 评论 -
教你从零开始搭建一款前端脚手架工具
前言在实际的开发过程中,从零开始建立项目的结构是一件让人头疼的事情,所以各种各样的脚手架工具应运而生。笔者使用较多的yoeman,express-generator和vue-cli便是当中之一。它们功能丰富,但最核心的功能都是能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效。作为一个不折腾会死星人,在熟悉了使用方法以后就开始琢磨起它们的原理来了。...原创 2019-08-25 15:18:22 · 304 阅读 · 0 评论 -
静态网站生成器是如何工作的
在过去的几年里,开源静态网站生成器的数量增长迅速,StaticGen 上几乎找得到每一种语言实现的版本。静态网站相比动态网站具备无需依赖应用服务器,性能优越,部署简单等特点。特别适合生成静态文档,个人博客,饱受开发者的青睐。相比学会使用,掌握工作原理也尤为重要。一个静态网站生成器的工作流程通常有以下几个步骤:读取源文件(e.g. 约定 markdown 格式)资源预处理模板引擎...原创 2019-08-28 15:18:01 · 151 阅读 · 0 评论 -
「前端词典」这些功能其实不需要 JS,CSS 就能搞定
直接入题1. 每个单词的首字母大写其实我第一次看到这个功能的时候就是使用 JS 去实现这个功能,想都没想 CSS 可以完成这个功能。马上就屁颠屁颠的写了一个方法:```function capitalizeFirst( str ) { let result = ''; result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) =>...原创 2019-08-29 14:46:25 · 151 阅读 · 0 评论 -
多网站项目的 CSS 架构
复杂的 CSS 架构,可不是你在科班里能学到的东西。我在互联网行业的第四份工作,是在我国一家领先的媒体新闻公司中任职一名 CSS/HTML 专家,我的主要职责就是开发可重用的、可扩展的、用于多网站的 CSS 架构。在本文中,我将与大家分享我在构建多网站架构领域中积累的知识和经验。附注:如今,正规的项目都会用到 CSS 预处理器。而在本文中,我会使用 Sass 预处理器。用层构建世界在开...原创 2019-08-29 14:48:51 · 71 阅读 · 0 评论 -
不可思议的纯 CSS 滚动进度条效果
问题先行,如何使用 CSS 实现下述滚动条效果?就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短。在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用...原创 2019-08-29 14:51:31 · 90 阅读 · 0 评论