Loading... [CodePen](https://codepen.io/) 是一个前端在线开发工具,可以让用户在线体验代码的效果,再也不用担心每次效果都需要截图给大家预览了。相信几乎所有的程序员都知道这个网站吧。 注册登陆可以选择 facebook、github 或 Twitter 直接登陆。 进来[个人设置](https://codepen.io/settings/profile),修改个人信息。  进入 [编辑器设置](https://codepen.io/settings/editor) 修改代码高亮风格,还可以修改字体和大小,修改快捷键为 Sublime Text  开启代码提示,页面搜索:**Autocomplete** 勾选。 加入常用的 css 代码作为模板 ```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](http://www.googlefonts.net/) 以 Lobster 字体为例,复制地址,引入 css   <hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于:乐心湖's Blog</p><p class="content-copyright">本文链接:<a class="content-copyright" href="https://www.xn2001.com/archives/627.html">https://www.xn2001.com/archives/627.html</a></p><p class="content-copyright">声明:博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" target="_blank" rel="nofollow noopener noopener" one-link-mark="yes">CC BY-SA 4.0 协议</a> ,转载请注明出处!</p></blockquote> 腾讯云社区邀请各位技术博主加入,福利多多噢! Last modification:January 28th, 2021 at 09:30 pm © 允许规范转载 Support 如果觉得我的文章对你有用,请随意赞赏 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat