优雅使用CodePen

优雅使用CodePen

钟小湖

January 11, 2021

235views

No comments

1974 words

编程记

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

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

进来[个人设置](https://codepen.io/settings/profile)，修改个人信息。

![](https://cdn.xn2001.com/img/2021/1610353416.png                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               )

进入 [编辑器设置](https://codepen.io/settings/editor)

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

![](https://cdn.xn2001.com/img/2021/1610355933.png)

开启代码提示，页面搜索：**Autocomplete** 勾选。

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

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

去编辑器测试一下，New Pen

![](https://cdn.xn2001.com/img/2021/1610356369.png)

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

![](https://cdn.xn2001.com/img/2021/1610356654.png)

一些编辑技巧

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

![](https://cdn.xn2001.com/img/2021/1610356855.png)

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

![](https://cdn.xn2001.com/img/2021/1610359888.png)

![](https://cdn.xn2001.com/img/2021/1610360133.png)

引入字体，[Google Fonts](http://www.googlefonts.net/)

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

![](https://cdn.xn2001.com/img/2021/1610360274.png)

![](https://cdn.xn2001.com/img/2021/1610360312.png)

![](https://cdn.xn2001.com/img/2021/1610360375.png)<hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal">版权属于：乐心湖's Blog本文链接：<a class="content-copyright" href="https://www.xn2001.com/archives/627.html">https://www.xn2001.com/archives/627.html</a>声明：博客所有文章除特别声明外，均采用 <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> ，转载请注明出处！</blockquote>

腾讯云社区邀请各位技术博主加入，福利多多噢！

Last modification：January 28th, 2021 at 09:30 pm

如果觉得我的文章对你有用，请随意赞赏

优雅使用CodePen

钟小湖 • 2021 年 01 月 11 日

Leave a Comment Cancel reply