Hexo博客主题NexT使用自定义的CSS样式
来源:互联网 发布:高性能javascript 2015 编辑:程序博客网 时间:2024/04/30 04:06
原文地址 http://magicer.xyz/2015/10/hexo-custom-style/
今天,创建自己的about页面的时候,像使用自定义的css样式,就像这是不是NexT可以使用自定义的CSS样式,片尝试了一下,还是可以的,因为markdown支持html标签,使用自定义的CSS样式还是不错的。下面总结一下具体的使用过程:
添加样式支持
为了不吧原先的像是文件搞得太乱,这里,添加子集的样式文件。
首先,在样式文件的source
文件夹下找到css
文件夹,打开main.styl
文件,在最后添加:
//My Layer //-------------------------------------------------- @import "_my/mycss";
新建自定义样式
找到样式文件夹css
新建_my
文件夹,在其中新建mycss.styl
文件,之后就可以按照stylus的格式自定义样式了。
例子
例如:我想在文章中添加个自定义样式的按钮,怎么做呢???
打开新建的mycss.styl
文件,在其中添加样式:
.myButton { background-color:#0f94bd; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; padding:11px 27px; text-decoration:none; text-shadow:0px 1px 0px #2f6627;}.myButton:hover { background-color:#5cbf2a;}.myButton:active { position:relative; top:1px;}
引用:在想要引用的时候添加
<a href="#" class="myButton">MyButton</a>
样式如下:
MyButton
由于这里不是Hexo环境所以效果显示不出来 可以转到原文地址查看效果
效果已经出来了,怎么样??是不是瞬间高大上。。有想要使用的样式,自行百度,找到后粘贴即可使用。
推荐
推荐一个css button样式的生成网站:http://www.bestcssbuttongenerator.com/
0 0
- Hexo博客主题NexT使用自定义的CSS样式
- hexo修改Next主题的样式
- hexo使用next主题,并且使用”多说“给博客的文章添加评论功能
- hexo next 主题打开博客过慢的解决办法
- 基于Hexo+Next主题的个人博客搭建定制优化
- Hexo配置使用Next主题
- Hexo的Next主题配置
- hexo博客框架--nexT主题进阶设定
- Hexo+Pages静态博客-Next主题篇
- 【转】Hexo的Next主题配置
- hexo的next主题打赏
- hexo的next主题常用设置
- hexo安装next主题的步骤
- Hexo--Next主题优化
- hexo next主题配置
- 最简便的方法搭建Hexo+Github博客,基于Next主题
- 给hexo个人博客 next主题添加背景图片
- Mac搭建Hexo博客及NexT主题配置优化
- 文件/目录操作(2)—— mkdir、rm、touch命令
- 开关电源[1] 噪声与消除
- [leetcode]Number of Islands
- IOS 9 同时兼容http以及https请求
- “丑男”同时交10多个女友,财色屡屡得手是因为他苦读心理学?
- Hexo博客主题NexT使用自定义的CSS样式
- 省市联动——季度-月份下拉列表框——jQuery版
- SSH无密码登录
- Spring研究笔记------事务探究
- system执行linux命令通过返回值判断是否成功
- linux 删除已输入的命令
- hdu 4998 Rotate 计算几何 点的旋转
- 增加vim y命令的最大复制行数
- PHP刷新输出缓冲