Leaflyer

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

写在前面：

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

更新后的版本：戳这里。

CSS部分
卡片模板

以下：

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 />

背面

{{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>

{{/拓展}}

卡片类型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}}

背面

{{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>

{{/拓展}}

卡片类型3：DICTATION

正面

<div class=D>DICTATION</div>

<p><div class=Word> </div>

<p><div class=PhoneticSymbol> </div>

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

背面

<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>

{{/拓展}}

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

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

（完）

2015-06-11 热度：23 评论：5 标签： Anki CSS HTML

热度(23)