字表检索：修订间差异
来自潮语辞书
更多操作
创建空白页面 |
小无编辑摘要 |
||
| （未显示同一用户的2个中间版本） | |||
| 第1行： | 第1行： | ||
<html> | |||
<head> | |||
<style> | |||
.entry-wrapper { | |||
display: block; /* 手机默认竖排 */ | |||
gap: 1.5em; | |||
} | |||
/* PC 端响应式：两列并排，且容器等高 */ | |||
@media screen and (min-width: 768px) { | |||
.entry-wrapper { | |||
display: flex; | |||
flex-wrap: wrap; /* 允许换行 */ | |||
gap: 1.5em 2em; /* 上下和左右间距 */ | |||
} | |||
.entry-section { | |||
flex-basis: calc(50% - 1em); /* 两列，每个占一半宽度减去间距 */ | |||
max-width: calc(50% - 1em); | |||
display: flex; /* 使子元素可拉伸 */ | |||
flex-direction: column; | |||
justify-content: flex-start; | |||
align-items: stretch; | |||
} | |||
} | |||
/* 你原有的样式 */ | |||
.entry-section { | |||
border: 1px solid #333; | |||
border-radius: 8px; | |||
padding: 12px; | |||
margin-bottom: 1.5em; | |||
background-color: #1e1e1e; | |||
box-shadow: 2px 2px 6px rgba(0,0,0,0.5); | |||
} | |||
.entry-header { | |||
display: flex; | |||
align-items: center; | |||
margin-bottom: 15px; | |||
height: 100%; | |||
} | |||
.entry-char { | |||
font-size: 5.5rem; | |||
line-height: 1; | |||
border-right: 1px solid #444; | |||
padding-right: 16px; | |||
margin-right: 16px; | |||
user-select: none; | |||
min-width: 90px; | |||
color: #ffffff; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.entry-char a { | |||
text-decoration: none; | |||
color: inherit; | |||
} | |||
.char-links { | |||
margin-top: 8px; | |||
font-size: 0.9rem; | |||
display: flex; | |||
justify-content: space-between; | |||
width: 90px; | |||
} | |||
.char-links img { | |||
width: 20px; | |||
height: 20px; | |||
vertical-align: middle; | |||
filter: invert(100%) brightness(200%); | |||
} | |||
.char-links a[href*="zdic.net"] img { | |||
filter: none; | |||
} | |||
.pronunciation-table { | |||
width: 100%; | |||
border-collapse: collapse; | |||
color: #e0e0e0; | |||
} | |||
.pronunciation-table th { | |||
color: #bbbbbb; | |||
font-weight: bold; | |||
white-space: nowrap; | |||
width: 4em; | |||
padding: 1px 0; | |||
text-align: left; | |||
vertical-align: middle; | |||
} | |||
.pronunciation-table td { | |||
padding: 5px 10px; | |||
vertical-align: middle; | |||
text-align: left; | |||
} | |||
.pronunciation-table tr:not(:last-child) { | |||
border-bottom: 1px dashed #444; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div class="entry-wrapper"> | |||
<div class="entry-section"> | |||
<div class="entry-header"> | |||
<div class="entry-char"> | |||
<a href="/index.php/丫">丫</a> | |||
<div class="char-links"> | |||
<a href="https://zi.tools/zi/丫" target="_blank" rel="noopener noreferrer"> | |||
<img src="https://ziphoenicia-1300189285.cos.ap-shanghai.myqcloud.com/home_svg/zi-tools.svg" alt="字統"> | |||
</a> | |||
<a href="https://www.zdic.net/hans/丫" target="_blank" rel="noopener noreferrer"> | |||
<img src="https://www.zdic.net/favicon.ico" alt="漢典"> | |||
</a> | |||
</div> | |||
</div> | |||
<div style="flex-grow: 1;"> | |||
<table class="pronunciation-table"> | |||
<tr><th>韩腔</th><td>a1文</td></tr> | |||
<tr><th>榕腔</th><td>a1</td></tr> | |||
<tr><th>练腔</th><td>a1</td></tr> | |||
<tr><th>练腔</th><td>a1</td></tr> | |||
<tr><th>练腔</th><td>a1</td></tr> | |||
<tr><th>练腔</th><td>a1</td></tr> | |||
<tr><th>练腔</th><td>a1</td></tr> | |||
</table> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="entry-section"> | |||
<div class="entry-header"> | |||
<div class="entry-char"> | |||
<a href="/index.php/亚">亚</a> | |||
<div class="char-links"> | |||
<a href="https://zi.tools/zi/亚" target="_blank" rel="noopener noreferrer"> | |||
<img src="https://ziphoenicia-1300189285.cos.ap-shanghai.myqcloud.com/home_svg/zi-tools.svg" alt="字統"> | |||
</a> | |||
<a href="https://www.zdic.net/hans/亚" target="_blank" rel="noopener noreferrer"> | |||
<img src="https://www.zdic.net/favicon.ico" alt="漢典"> | |||
</a> | |||
</div> | |||
</div> | |||
<div style="flex-grow: 1;"> | |||
<table class="pronunciation-table"> | |||
<tr><th>韩腔</th><td>ya4</td></tr> | |||
<tr><th>榕腔</th><td>ya4</td></tr> | |||
<!-- 其他读音 --> | |||
</table> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="entry-section"> | |||
<div class="entry-header"> | |||
<div class="entry-char"> | |||
<a href="/index.php/娅">娅</a> | |||
<div class="char-links"> | |||
<a href="https://zi.tools/zi/娅" target="_blank" rel="noopener noreferrer"> | |||
<img src="https://ziphoenicia-1300189285.cos.ap-shanghai.myqcloud.com/home_svg/zi-tools.svg" alt="字統"> | |||
</a> | |||
<a href="https://www.zdic.net/hans/娅" target="_blank" rel="noopener noreferrer"> | |||
<img src="https://www.zdic.net/favicon.ico" alt="漢典"> | |||
</a> | |||
</div> | |||
</div> | |||
<div style="flex-grow: 1;"> | |||
<table class="pronunciation-table"> | |||
<tr><th>韩腔</th><td>ya4</td></tr> | |||
<tr><th>榕腔</th><td>ya4</td></tr> | |||
<!-- 其他读音 --> | |||
</table> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="entry-section"> | |||
<div class="entry-header"> | |||
<div class="entry-char"> | |||
<a href="/index.php/桠">桠</a> | |||
<div class="char-links"> | |||
<a href="https://zi.tools/zi/桠" target="_blank" rel="noopener noreferrer"> | |||
<img src="https://ziphoenicia-1300189285.cos.ap-shanghai.myqcloud.com/home_svg/zi-tools.svg" alt="字統"> | |||
</a> | |||
<a href="https://www.zdic.net/hans/桠" target="_blank" rel="noopener noreferrer"> | |||
<img src="https://www.zdic.net/favicon.ico" alt="漢典"> | |||
</a> | |||
</div> | |||
</div> | |||
<div style="flex-grow: 1;"> | |||
<table class="pronunciation-table"> | |||
<tr><th>韩腔</th><td>ya1</td></tr> | |||
<tr><th>榕腔</th><td>ya1</td></tr> | |||
<!-- 其他读音 --> | |||
</table> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</body> | |||
</html> | |||
