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

Hexo博客主题NexT使用自定义的CSS样式_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:05:34

原创

1801人浏览过

原文地址 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的格式自定义样式了。

例子

例如：我想在文章中添加个自定义样式的按钮，怎么做呢？？？

立即学习“前端免费学习笔记（深入）”；

猫眼课题宝

5分钟定创新选题，3步生成高质量标书！

查看详情

打开新建的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环境所以效果显示不出来可以转到原文地址查看效果

效果已经出来了，怎么样？？是不是瞬间高大上。。有想要使用的样式，自行百度，找到后粘贴即可使用。

大家都在看：

html函数如何构建评论区的表单 html函数多行文本域的属性设置如何通过Komodo Edit配置HTML团队协作的详细教程 html代码怎么SEO_html代码搜索引擎优化方法与标签使用技巧 HTML数据怎样进行特征提取 HTML数据特征工程的实践技巧 html滚动条滚动条轨道怎么加边框_html滚动条轨道边框样式设置方法

Hexo博客主题NexT使用自定义的CSS样式_html/css_WEB-ITnose

添加样式支持

新建自定义样式

例子

推荐

大家都在看：