# 词典制作：从一个简单的图片词典开始

**URL:** <https://forum.freemdict.com/t/topic/16539>\
**Category:** 技术交流与词典编修\
**Tags:** 新手指南\
**Created:** [2022 年10 月 25 日 10:56 UTC](https://forum.freemdict.com/t/topic/16539 "2022-10-25T10:56:28Z")\
**Posts on this page:** 1\
**Showing post:** 11

<div class="post-metadata">

作者： ![alexpeng](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/alexpeng/32/19592_2.png) [@alexpeng](https://forum.freemdict.com/u/alexpeng)\
发布日期： [2022 年10 月 25 日 12:44 UTC](https://forum.freemdict.com/t/topic/16539/11 "2022-10-25T12:44:48Z")

</div>

## 六、制作成模拟单栏

[Mastameta](https://forum.freemdict.com/u/mastameta) 大佬的模拟单栏真好用，我想要，我想要……

### 1.图像词头

1. 同“二、加入上下页导航1.1”，在Em中制作成三列页码。

2. 查找：

```auto
^(\d{3})\t(\d{3})\t(\d{3})\n

```

替换为：

```auto
GHMY\1\n<link href="古汉名言.css" rel="stylesheet" /><div><book><c1><img src="GHMY\1.png"></c1><c2><img src="GHMY\1.png"></c2></book><zm><a href="entry://GHMY\2">上一页</a> <a href="entry://GHMY\3">下一页</a></zm>\n</>\n

```

### 2.文字词头

同“二、加入上下页导航2.”。  
或，  
同“五、制作成“伪图文版2.”。

合并两个文本文件，打包，完成。

### 3.样式表

```auto
hw {display:inline-block; font-size:24px; color:#000064; font-weight:400;}
hw:before {content:"【"; color:#800000; font-size:.9em; }
hw:after {content:"】"; color:#800000; font-size:.9em; }
a:link {color:currentColor; text-decoration:none;}
a:visited {color:currentColor}
a:link:hover {color:#b30015}

book {display:flex; flex-flow:column nowrap; align-items:center; position:relative;
	border-radius:.4em; border:1px solid #f5ece0; background-color:#fcf6ee;
	width:98%; max-width:100%; padding:.3em .3em .3em .3em; overflow:hidden}
book img {width:100%; height:auto; }
c1, c2 {display:block; width:100%; overflow:hidden}
c2 {display:none}

@media (max-width:51em) {
	book {max-width:25em; padding:.5em .2em; margin:.3em 0 0 0; clear:right}
	c1, c2 {width:99.5%; display:inline-block; padding:0 0 .5em}
	book img {width:200%}
	c1>img {margin:-12% 0 -3% .5%}
	c2>img {margin:-12% 0 0 -100.5%}
}

zm {display:block; text-align:center;}

```

保存到文本文件中，并重命名为“古汉名言.css”。

### 4.实现原理

在一个页面中插入两张同样的图片。  
窗口足够宽时，按窗口宽度显示整页图像，并隐藏后一张图。窗口足够窄时，则将图片宽度设置成窗口宽度的两倍，前一张图让其显示左半侧，后一张图让其显示右半侧。  
有的词典软件貌似因不支持图片放大的操作，而无法使用‘模拟单栏’。

---

_[View the full topic](https://forum.freemdict.com/t/topic/16539)._