CodePen 是一个前端在线开发工具,可以让用户在线体验代码的效果,再也不用担心每次效果都需要截图给大家预览了。相信几乎所有的程序员都知道这个网站吧。

注册登陆可以选择 facebook、github 或 Twitter 直接登陆。

进来个人设置,修改个人信息。

进入 编辑器设置

修改代码高亮风格,还可以修改字体和大小,修改快捷键为 Sublime Text

开启代码提示,页面搜索:Autocomplete 勾选。

加入常用的 css 代码作为模板

display: flex;\njustify-content: center;\nalign-items: center;\nmin-height: 100vh;

去编辑器测试一下,New Pen

在 css 编辑中写入 bflex 关键词,按住 tab 就会自动生成我们写好的模板。

一些编辑技巧

输入 ul>li*10{$},编辑多行 li,只需要选中 <li> 按 ctrl+d

引入 vue.js ,可以自己加,也可以在搜索框搜

引入字体,Google Fonts

以 Lobster 字体为例,复制地址,引入 css


Last modification:June 9, 2021
如果觉得我的文章对你有用,请随意赞赏