body {
font-family: ‘Noto Sans SC’, Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fdfdfd;
}
.container {
max-width: 900px;
margin: 20px auto;
padding: 0 15px;
}
.story-block {
background-color: #fffde7;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
margin-bottom: 20px;
line-height: 1.6;
}
.tab-group {
margin: 20px 0;
}
.tab-buttons {
display: flex;
justify-content: space-around;
margin-bottom: 10px;
flex-wrap: wrap;
gap: 8px;
}
.tab-buttons button {
padding: 10px 20px;
cursor: pointer;
background-color: #ffe082;
border: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s;
}
.tab-buttons button.active {
background-color: #ffca28;
}
.tab-content {
display: none;
background-color: #fff8e1;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.tab-content.active {
display: block;
}
h2 {
margin-top: 0;
color: #2e7d32;
}
h3 {
color: #2e7d32;
margin: 20px 0 10px 0;
}
ul {
padding-left: 20px;
}
li {
margin-bottom: 6px;
}
strong {
color: #2e7d32;
}
/* HSK2+ GREEN tooltips */
.hanzi-hsk2plus {
position: relative;
cursor: help;
color: #2e7d32 !important;
font-weight: bold;
border-bottom: 2px dotted #2e7d32;
padding: 0 2px;
margin: 0 1px;
display: inline-block;
}
.hanzi-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #2e7d32, #4caf50);
color: #fff !important;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
line-height: 1.4;
white-space: nowrap;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(46,125,50,0.4);
min-width: 140px;
text-align: center;
font-family: Arial, sans-serif;
}
.hanzi-hsk2plus:hover .hanzi-tooltip,
.hanzi-hsk2plus:focus .hanzi-tooltip {
opacity: 1;
visibility: visible;
}
.hanzi-tooltip::after {
content: ”;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: #2e7d32;
}
.hanzi-tooltip .pinyin {
color: #fff176 !important;
font-weight: bold;
margin: 0 0 2px 0;
font-size: 14px;
}
.hanzi-tooltip .english {
color: #e8f5e8 !important;
margin: 0;
font-size: 12px;
}
/* Basic HSK1-2 – black, no tooltip */
.hanzi-basic {
color: #333;
}
猫、老鼠与牛的故事 | Cat, Rat & Ox Story
中文故事 | Chinese
English Story
猫 māo cat (HSK2) 老鼠 lǎoshǔ rat (HSK3) 牛 niú ox/cow (HSK2)
很久以前 ，玉皇大帝Yù Huáng Dàdì Jade Emperor (HSK5+) 要举行大比赛dà bǐsài great race (HSK4) 。猫 māo cat (HSK2) 老鼠 lǎoshǔ rat (HSK3) 好 朋友péngyǒu friends (HSK1) 。游泳yóuyǒng swim (HSK2) 。老鼠lǎoshǔ rat (HSK3) 说：“我们找牛niú ox (HSK2) 帮忙 吧！”牛niú ox (HSK2) 又强壮qiángzhuàng strong (HSK4) 又善良shànliáng kind (HSK5) 。猫 māo cat (HSK2) 老鼠lǎoshǔ rat (HSK3) 跳到牛背niú bèi ox’s back (HSK3) 上。牛niú ox (HSK2) 慢慢走进河hé river (HSK2) 里。猫māo cat (HSK2) 觉得太阳 很暖和 ，闭上眼睛 睡觉shuìjiào sleep (HSK2) 。老鼠lǎoshǔ rat (HSK3) 聪明cōngmíng clever (HSK3) ，他想得到第一名dì yī míng first place (HSK3) 。悄悄地qiāoqiāo de quietly (HSK3) 把猫bǎ māo the cat (HSK2) 推下水tuī xià shuǐ push into water (HSK3+) ！猫māo cat (HSK2) 大叫 ，掉进冰冷bīnglěng icy cold (HSK4) 河hé river (HSK2) 里。岸边ànbiān shore (HSK3) 时，老鼠lǎoshǔ rat (HSK3) 从牛头niú tóu ox’s head (HSK3) 跳下来 ，跑pǎo run (HSK1) 到岸上àn shàng bank/shore (HSK2) 。玉皇大帝Yù Huáng Dàdì Jade Emperor (HSK5+) 说：“老鼠lǎoshǔ rat (HSK3) 第一名dì yī míng first place (HSK3) ！”牛niú ox (HSK2) 第二个 。猫māo cat (HSK2) 很晚 才游yóu swim (HSK2) 到岸边ànbiān shore (HSK3) ，已经没有名次méiyǒu míngcì no place (HSK3+) 了。猫māo cat (HSK2) 记恨jìhèn hold grudge (HSK5+) 老鼠lǎoshǔ rat (HSK3) 。猫māo cat (HSK2) 还 追zhuī chase (HSK2) 老鼠lǎoshǔ rat (HSK3) ！[web:12]
Cat, Rat and Ox
Long ago, the Jade Emperor held a great race. The Cat and Rat were good friends but couldn’t swim.
词汇 | Vocabulary
语法 | Grammar
表达 | Expressions
文化 | Culture
HSK2+ 重点词汇 | Key HSK2+ Words
猫 māo cat (HSK2) 老鼠 lǎoshǔ rat (HSK3) 牛 niú ox (HSK2) 游泳 yóuyǒng swim (HSK2) 强壮 qiángzhuàng strong (HSK4) 聪明 cōngmíng clever (HSK3) 推下水 tuī xià shuǐ push into water
语法要点 | Grammar Points
把…推下水 – 把 structure (disposal)[web:12]从…跳下来 – 从 (from a place)第一名/第二名 – 数字 + 名 (ordinal numbers)所以…今天还… – 因果关系 (cause-effect)
实用表达 | Useful Phrases
我们找牛帮忙吧！ – Let’s ask Ox for help!悄悄地把猫推下水 – Quietly push cat into water老鼠第一名！ – Rat is first place!猫记恨老鼠 – Cat holds grudge against rat
生肖文化 | Zodiac Culture
生肖顺序 : 鼠第一，牛第二，猫无位[web:12]玉皇大帝 : 中国神话天帝猫追老鼠 : 解释现实中猫鼠关系
// Tab functionality for all groups
document.querySelectorAll(‘.tab-group’).forEach(group => {
const buttons = group.querySelectorAll(‘.tab-btn’);
const contents = group.querySelectorAll(‘.tab-content’);
buttons.forEach(button => {
button.addEventListener(‘click’, () => {
buttons.forEach(btn => btn.classList.remove(‘active’));
contents.forEach(content => content.classList.remove(‘active’));
button.classList.add(‘active’);
const targetTab = button.dataset.tab;
document.getElementById(targetTab).classList.add(‘active’);
});
});
});
Leave a Reply