Leaflyer

Anki英语单词类型模板 v1.0 分享

写在前面:

        这个样式是自己在使用Anki的过程中一点一点调整,修改完善的,我对CSS懂的没多少,所以代码可能不规范,不同设备显示可能有差别。把它发出来是因为几个用Anki的小伙伴在使用交流时,觉得这个卡片设计挺好,所以发出来希望共同完善。

        更新后的版本:戳这里


  1. CSS部分

  2. 卡片模板

以下:

     1.   CSS部分

  •   卡片基本设置

.card {

    font-size: 25px;

    text-align: center;

    line-height: 15px;

    color: black;

    background-color:#f5f5f5;

}


  • 指定字体

@font-face { font-family: kt; src: url('_kt.ttf'); }

@font-face { font-family: times; src: url('_times.ttf'); }


  • 三种卡片的类型显示在顶部的样式

.R {

    font-family: times;

    font-size: 18px;

    font-weight:600;

    letter-spacing: 5px;

    text-align:center;

    color: #b7d5eb;

    height: 35px;

    line-height: 35px;

    padding: 1px 0px 0px 0px;

    border: 0px solid #b7d5eb;

    border-radius:30px;

    background-color: #338eca;

}

/*By Leaflyer*/

.S {

    font-family: times;

    font-size: 18px;

    font-weight:600;

    letter-spacing: 5px;

    text-align:center;

    color: #c1e7b8;

    height: 35px;

    line-height: 35px;

    padding: 0px 0px 0px 0px;

    border-radius:30px;

    background-color: #56a844;

}

/*By Leaflyer*/

.D {

    font-family: times;

    font-size: 18px;

    font-weight:600;

    letter-spacing: 5px;

    text-align:center;

    color: #f7c4b8;

    height: 35px;

    line-height: 35px;

    padding: 0px 0px 0px 0px;

    border-radius:30px;

    background-color: #ec6c4f;

}

/*By Leaflyer*/


  • 单词

.Word {

    font-family: times;

    text-align:center;

    letter-spacing: 2px;

    height: 35px;

    line-height: 35px;

    color: #303030;

    font-size: 32px;

}


  • 音标

.PhoneticSymbol {

    font-family: times;

    text-align:center;

    color: #666666;

    font-size: 18px;

}

/*By Leaflyer*/


  • 三种卡片单词词性显示(仅颜色不同)

.PartOfSpeechR {

    font-family: times ;

    font-size: 28px;

    text-align: center;

    height: 31px;

    line-height: 30px;

    color: #FFFFFF;

    padding: 1px 8px;

    display: inline-block;

    border-radius: 3px;

    background-color: #338eca;

 }

/*By Leaflyer*/

.PartOfSpeechS {

    font-family: times ;

    font-size: 28px;

    text-align: center;

    height: 31px;

    line-height: 30px;

    color: #FFFFFF;

    padding: 1px 8px;

    display: inline-block;

    border-radius: 3px;

    background-color: #56a844;

 }

/*By Leaflyer*/

.PartOfSpeechD {

    font-family: times ;

    font-size: 28px;

    text-align: center;

    height: 31px;

    line-height: 30px;

    color: #FFFFFF;

    padding: 1px 8px;

    display: inline-block;

    border-radius: 3px;

    background-color: #ec6c4f;

 }

/*By Leaflyer*/


  • 释义

.Paraphrase {

    font-family:kt ;

    font-size: 25px;

    text-align: center;

    color: #2d2d2d;

    line-height: 30px; 

    display:inline;

}

/*By Leaflyer*/


  • 例句

.BlockquoteEn {

    font-family: times;

    text-align: left;

    font-size: 15px;

    text-indent:0em;

    color:#333333;

    line-height: 18px;

    padding: 0.5em 0.5em;

    border-left: 5px solid #bbbbbb;

    background-color: #eeeeee;

}

/*By Leaflyer*/


  • 例句翻译(这里没有做更多调整,只是调整字号)

.BlockquoteZh {

    font-family: kt;

    text-align: left;

    font-size: 16px;

    text-indent:0em;

    color:#333333;

    line-height: 18px;

    padding: 0em 0.5em;

    border-left: 5px solid #bbbbbb;

    background-color: #eeeeee;

}

/*By Leaflyer*/


  • Hint样式

.hint {

    font-family:kt ;

    font-size: 18px;

    text-align: left;

    color: #333333;

    line-height: 22px; 

}

/*By Leaflyer*/


  • 分割线(仅颜色不同)

.hr1{

    height: 2px;

    border-radius:3px;

    background-color: #338eca;

    width:40%;

    border:0px solid #f5f5f5;

    display:inline-block;

}

/*By Leaflyer*/

.hr2{

height: 2px;

border-radius:3px;

background-color: #56a844;

width:40%;

border:0px solid #f5f5f5;

display:inline-block;

}

/*By Leaflyer*/

.hr3{

height: 2px;

border-radius:3px;

background-color: #ec6c4f;

width:40%;

border:0px solid #f5f5f5;

display:inline-block;

}

/*By Leaflyer*/


     2.   卡片模板


卡片类型1:RETICE(背诵)

  • 正面

<div class=R>RETICE</div>

<p><div class=Word>{{单词}}</div>

<p><div class=PhoneticSymbol>{{音标}}</div>

<p>

<hr class=hr1 />{{发音}}<hr class=hr1 />

<!--By Leaflyer-->

  • 背面

{{FrontSide}}

<p>

{{#词性1}}

<div class=PartOfSpeechR>{{词性1}}</div>

{{/词性1}}

{{#释义1}}

<div class=Paraphrase>{{释义1}}</div>

{{/释义1}}

{{#词性2}}

<p>

<div class=PartOfSpeechR>{{词性2}}</div>

{{/词性2}}

{{#释义2}}

<div class=Paraphrase>{{释义2}}</div>

{{/释义2}}

{{#例句}}

<p>

<div class=BlockquoteEn>{{例句}}</div>

{{#例句翻译}}<div class=BlockquoteZh>{{例句翻译}}</div>{{/例句翻译}}

{{/例句}}

{{#词组短语}}

<hr class=hr1 />

<div class=hint>{{hint:词组短语}}</div>

{{/词组短语}}

<br>

{{#拓展}}

<div class=hint>{{hint:拓展}}</div>

{{/拓展}}

<!--By Leaflyer-->


卡片类型2:SPELLING(拼写)

  • 正面

<div class=S>SPELLING</div>

<br>

<br>{{#词性1}}

<div class=PartOfSpeechS>{{词性1}}</div>

{{/词性1}}

{{#释义1}}

<div class=Paraphrase>{{释义1}}</div>

{{/释义1}}

{{#词性2}}

<p><div class=PartOfSpeechS>{{词性2}}</div>

{{/词性2}}

{{#释义2}}

<div class=Paraphrase>{{释义2}}</div>

{{/释义2}}

<!--By Leaflyer-->

  • 背面

{{FrontSide}}

<p><hr class=hr2 />{{发音}}<hr class=hr2 />

<p><div class=Word>{{单词}}</div>

<p><div class=PhoneticSymbol >{{音标}}</div>

<p>

{{#例句}}

<p>

<div class=BlockquoteEn>{{例句}}</div>

{{#例句翻译}}<div class=BlockquoteZh>{{例句翻译}}</div>{{/例句翻译}}

{{/例句}}

{{#词组短语}}

<hr class=hr2 />

<div class=hint>{{hint:词组短语}}</div>

{{/词组短语}}

{{#拓展}}

<br>

<div class=hint>{{hint:拓展}}</div>

{{/拓展}}

<!--By Leaflyer-->


卡片类型3:DICTATION

  • 正面

<div class=D>DICTATION</div>

<p><div class=Word>&nbsp;</div>

<p><div class=PhoneticSymbol>&nbsp;</div>

<p><hr class=hr3 />{{发音}}<hr class=hr3 />

<!--By Leaflyer-->

  • 背面

<div class=D>DICTATION</div>

<p><div class=Word>{{单词}}</div>

<p><div class=PhoneticSymbol>{{音标}}</div>

<p><hr class=hr3 />{{发音}}<hr class=hr3 />

<p>

{{#词性1}}

<div class=PartOfSpeechD>{{词性1}}</div>

{{/词性1}}

{{#释义1}}

<div class=Paraphrase>{{释义1}}</div>

{{/释义1}}

{{#词性2}}

<p>

<div class=PartOfSpeechD>{{词性2}}</div>

{{/词性2}}

{{#释义2}}

<div class=Paraphrase>{{释义2}}</div>

{{/释义2}}

{{#例句}}

<p>

<div class=BlockquoteEn>{{例句}}</div>

{{#例句翻译}}<div class=BlockquoteZh>{{例句翻译}}</div>{{/例句翻译}}

{{/例句}}

{{#词组短语}}

<hr class=hr3 />

<div class=hint>{{hint:词组短语}}</div>

{{/词组短语}}

{{#拓展}}

<hr class=hr3 />

<div class=hint>{{hint:拓展}}</div>

{{/拓展}}

<!--By Leaflyer-->


代码就是以上这些了,一些小细节暂时没有去理,不过问题应该不大的了。

另外附一张成语积累的卡片设计图:

(完)

 
评论(5)
热度(21)
  1. lixiangqian12345Leaflyer 转载了此文字

© Leaflyer | Powered by LOFTER