name - artist
00:00

      添加文章美化框

      向TYPECHO加入美化框

      请注意,本文编写于 105 天前,最后修改于 98 天前,其中某些信息可能已经过时。

      前言

      通过美化框,我们可以实现文章区分、强调,让文章显得更加清晰。
      WordPress的同学也可参见《WordPress文章添加彩色美化框及彩色按钮》
      以下是美化框示例:

      绿色提示框
      红色提示框
      黄色提示框
      灰色提示框
      蓝色提示框
      黑色提示框
      虚线提示框
      绿边提示框
      红边提示框
      橙边提示框

      方法

      • CSS部分(可以加入主题Style.CSS文件里,也可新建CSS文件
      /*彩色代码框样式开始*/
      #sc_notice {
       color: #7da33c;
       background: #ecf2d6 url('https://tabbyvps.oss-cn-hongkong.aliyuncs.com/sc_notice.png') -1px -1px no-repeat;
       border: 1px solid #aac66d;
       overflow: hidden;
       margin: 10px 0;
       padding: 15px 15px 15px 35px;
       }
      #sc_warn {
       color: #ad9948;
       background: #fff4b9 url('https://tabbyvps.oss-cn-hongkong.aliyuncs.com/sc_warn.png') -1px -1px no-repeat;
       border: 1px solid #eac946;
       overflow: hidden;
       margin: 10px 0;
       padding: 15px 15px 15px 35px;
       }
      #sc_error {
       color: #c66;
       background: #ffecea url('https://tabbyvps.oss-cn-hongkong.aliyuncs.com/sc_error.png') -1px -1px no-repeat;
       border: 1px solid #ebb1b1;
       overflow: hidden;
       margin: 10px 0;
       padding: 15px 15px 15px 35px;
       }
      #sc_tips {
       color: #777;
       background: #eaeaea url('https://tabbyvps.oss-cn-hongkong.aliyuncs.com/sc_tips.png') -1px -1px no-repeat;
       border: 1px solid #ccc;
       overflow: hidden;
       margin: 10px 0;
       padding: 15px 15px 15px 35px;
      }
      #sc_blue {
       color: #1ba1e2;
       background: rgba(27, 161, 226, 0.26) url('https://tabbyvps.oss-cn-hongkong.aliyuncs.com/sc_blue.png') -1px -1px no-repeat;
       border: 1px solid #1ba1e2;
       overflow: hidden;
       margin: 10px 0;
       padding: 15px 15px 15px 35px;
      }
      #sc_black {
       border-width: 1px 4px 4px 1px;
       border-style: solid;
       border-color: #3e3e3e;
       margin: 10px 0;
       padding: 15px 15px 15px 35px;
      }
      #sc_xuk {
       border: 2px dashed rgb(41, 170, 227);
       background-color: rgb(248, 247, 245);
       margin: 10px 0;
       padding: 15px 15px 15px 35px;
      }

      接上(因为主题的原因,代码在安卓上只能显示60行,所以还请自动补全下面代码)

      #sc_lvb {
       margin: 10px 0;
       padding: 10px 15px;
       border: 1px solid #e3e3e3;
       border-left: 2px solid #05B536;
       background: #FFF;
      }
      #sc_redb {
       margin: 10px 0;
       padding: 10px 15px;
       border: 1px solid #e3e3e3;
       border-left: 2px solid #ED0505;
       background: #FFF;
      }
      #sc_orange {
       margin: 10px 0;
       padding: 10px 15px;
       border: 1px solid #e3e3e3;
       border-left: 2px solid #EC8006;
       background: #FFF;
      }

      以上图标链接如果怕失效,可以自己替换成自己的。附:图标素材下载

      使用

      • 如果你是将CSS代码加入主题Style.CSS文件里,则直接使用:
      <div id="sc_notice">绿色提示框</div>
      <div id="sc_error">红色提示框</div>
      <div id="sc_warn">黄色提示框</div>
      <div id="sc_tips">灰色提示框</div>
      <div id="sc_blue">蓝色提示框</div>
      <div id="sc_black">黑色提示框</div>
      <div id="sc_xuk">虚线提示框</div>
      <div id="sc_lvb">绿边提示框</div>
      <div id="sc_redb">红边提示框</div>
      <div id="sc_orange">橙边提示框</div>
      • 如果是新建的CSS,则先在编辑器里先引入CSS,即:<link rel="stylesheet" type="text/css" href="CSS存放的地址" />

      See the Pen 文章美化框 by ChaunceyWoo (@chaunceywoo) on CodePen.

      - The End -

      添加新评论  

      本站已启用评论投票,被点踩过多的评论将自动折叠,请多回复有意义的评论。

      已有 10 条评论

      很常用的样式,做的很标准。赞一个

      喜欢就好~

      优秀,其实原创也不是钻芒博客,网上一搜一大堆,原创早就不知道是谁了

      那就尴尬了。

      还好,不过这些你主题内置了的

      是吗?

      多看主题文档啊,亲~

      哦,好的,谢谢