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

技术交流与词典编修
11

六、制作成模拟单栏

Mastameta 大佬的模拟单栏真好用，我想要，我想要……

1.图像词头

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

  2. 查找：

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

替换为：

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.样式表

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.实现原理

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

6 个赞