Hexo ブログ テーマ NexT はカスタム CSS スタイルを使用します_html/css_WEB-ITnose

元のアドレス http://magicer.xyz/2015/10/hexo-custom-style/

今日、カスタム CSS スタイルを使用するなど、独自の About ページを作成するときに、これは NextT ではないように使用できますカスタム CSS スタイル 試してみましたが、うまくいきました。マークダウンは HTML タグをサポートしているため、カスタム CSS スタイルを使用すると良いでしょう。以下に具体的な使用プロセスをまとめます:

スタイルサポートを追加する

元のスタイルファイルを台無しにしないように、ここでスタイルファイルのサブセットを追加します。
まず、スタイル ファイルのソース フォルダーの下にある css フォルダーを見つけ、main.styl ファイルを開き、最後に次の内容を追加します:

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

新しいカスタム スタイルを作成します

スタイル フォルダー css を見つけ、新しい _my フォルダーを作成します、その .styl ファイル内に新しい mycss を作成すると、スタイラス形式に従ってスタイルをカスタマイズできます。

例

例: 記事にカスタム スタイル ボタンを追加したいのですが、どうすればよいですか? ? ?

新しく作成した 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;}

Quote: 引用したい場合は

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

を追加します

スタイルは次のとおりです:
MyButton
これは Hexo 環境ではないため、効果は表示されないので、元のアドレスにアクセスして効果を確認できます

効果が出てきました、どう思いますか？ ?それは一瞬の偉大な瞬間ではないでしょうか？ 。使用したいスタイルがある場合は、自分で検索して見つけて貼り付けて使用します。

おすすめ

CSS ボタン スタイル生成 Web サイトをお勧めします: http://www.bestcssbuttongenerator.com/696768c32f47e6bd76c608d3a5aeda4f10 |