Hexo博客主题NexT使用自定义的CSS样式

@Deprecated

原文地址 http://blog.magicer.xyz/2015/...css

今天,建立本身的about页面的时候,像使用自定义的css样式,就像这是否是NexT能够使用自定义的CSS样式,片尝试了一下,仍是能够的,由于markdown支持html标签,使用自定义的CSS样式仍是不错的。下面总结一下具体的使用过程:html

添加样式支持

为了避免吧原先的像是文件搞得太乱,这里,添加子集的样式文件。
首先,在样式文件的source文件夹下找到css文件夹,打开main.styl文件,在最后添加:web

//My Layer
    //--------------------------------------------------
    @import "_my/mycss";

新建自定义样式

找到样式文件夹css 新建_my文件夹,在其中新建mycss.styl文件,以后就能够按照stylus的格式自定义样式了。markdown

例子

例如:我想在文章中添加个自定义样式的按钮,怎么作呢???hexo

打开新建的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;
}

引用:在想要引用的时候添加code

<a href="#" class="myButton">MyButton</a>

样式以下:
MyButton
因为这里不是Hexo环境因此效果显示不出来 能够转到原文地址查看效果htm

效果已经出来了,怎么样??是否是瞬间高大上。。有想要使用的样式,自行百度,找到后粘贴便可使用。blog

推荐

推荐一个css button样式的生成网站:http://www.bestcssbuttongener...get

相关文章
相关标签/搜索