frontend

A collection of 12 posts

frontend

PostCSS - A tool for transforming CSS with JavaScript

PostCSS 是一个使用 JS 插件转换 CSS 样式的工具。这些插件可以检查(lint)CSS,支持 CSS Variables 和 Mixins,编译尚未被浏览器支持的先进的 CSS 语法,内联图片,以及其它很多优秀的功能。 PostCSS 在工业界被广泛地应用,其中不乏很多有名的行业领导者,如:维基百科、Twitter、阿里巴巴、JetBrains。PostCSS 的 Autoprefixer 插件是最流行的 CSS 处理工具之一。 PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则(通过把 CSS 规则转换成一个抽象语法树的方式)。在这之后,

frontend

BrowserSync 页面自动重载工具

网站前端开发过程中,每一次修改代码,都要手动刷新浏览器才能看到页面的变化。有了 LiveReload 工具就通过程序维护一个本地的静态服务器,实现静态资源变化,浏览器自动重新刷新的功能。 Python 下面有个名为 httpwatcher 工具,直接在静态资源根目录执行 httpwatcher 就可以实现页面变更自动刷新。 刚刚又找到一个 NodeJS 环境下的实现 BrowserSync,可以和 gulp 混合使用,相比要更灵活。 安装 Linux 环境下以普通用户身份安装时通常需要 sudo,因为模块默认会存放在 /usr/lib/node_modules 目录,另外还需要创建软连接到 /usr/bin 目录,普通用户没有这些权限。 $ sudo npm install -g browser-sync 快速使用

UIkit

UIkit Tab 与 Switcher 不在同级 div

默认情况下,二者各为一个 ul 同级并列,无需特殊设置即可直接实现 tab 切换。但当 uk-tab 在一个 div 里面,uk-switcher 在另外一个 div 里面的时候,它们之间就失去联络了。 这时需要在 uk-tab 上添加 uk-switcher="connect: #detail",同时在 uk-switcher 上添加 id="detail",这样就可以实现标签切换了。 <div id="tab" class="uk-position-bottom">

frontend

UIkit 官方文档离线部署

毕竟项目官网在国外,网络条件不好的时候,离线文档就显得比较有用了。 克隆仓库 $ git clone https://github.com/uikit/uikit-site.git 满足包依赖 $ cd uikit-site uikit-site $ yarn 编译安装 uikit-site $ yarn setup 在本地跑起来 我喜欢用 Python,所以一个命令就能把本地的离线版本跑起来: uikit-site $ python3 -m http.server 8080 Serving HTTP on 0.0.0.0 port 8080 (http://0.0.0.

frontend

HTML img 标签居中显示的方法

往常居中 img 标签,我会直接在父级标签上添加 text-align: center;,但今天碰到的情况是编辑器直接把 img 加入到了正文,即与段落 p 标签同级,同属于一个正文 div 标签。 直接在 div 上设置文本居中势必影响其他的子标签,当然也可以在编辑器上动手,比如让编辑器自动给 img 套一层 p 标签之类的,但真心杀鸡牛刀。如果能直接对 img 进行居中设置就最理想了,这里找到了一个方法,效果不错: #news-page { img { clear: both; display: block; margin: auto; } } 这里使用的是 less 语法,注意与 css 的不同。

frontend

CSS 为 DIV 添加尖角样式

如上图,给 div 添加一个尖角样式。原理是用两个 div 叠加在一起形成该效果,一个 div 是普通的方框,另一个 div 则是通过给 4 个边设置一样粗的 border 形成四个三角形拼成的正方型,将其中 3 条边设置为透明,从而形成三角形的尖角。 // 白色小三角 .triangle { width: 0; height: 0; border-style: solid; border-width: 0 5px 8.7px 5px; border-color: transparent transparent #ffffff transparent; margin-left: 10px; } Reference CSS

You've successfully subscribed to Herald's Tech Notes!