柯林斯“同音异义词 homophones”图片词典 首次制作

还没来得及说,这是特意针对双栏词典的特性,屏幕较小时会自动把页面切成两半。对于不是双栏的词典(比如楼主这本),不需这个特性的,直接去 .css 文件把这块部分改成下面这样就行了:

/*图片自适应单双栏 (如不需要则注释下面两段, 并开启 display:none 那行)*/
/*@media screen and (max-width:720px) {
div.main-img {width: 100%;overflow:hidden;}
div.main-img div.left{position:relative;width: 200%;z-index:2;}
div.main-img div.right{position:relative;width: 200%;margin-left:-100%;z-index:1;}
}*/   /*【额外pic设置】div.main-img div.pic{clip-path: polygon(0 0, 100% 0, 100% 94%, 0 95%);margin-top: 0.5em;}*/  /* margin-bottom: -4.5em; */
/*@media screen and (min-width:721px) {
div.main-img{width:100%;overflow:hidden;margin-top: 0.5em;}
div.main-img div.left{position:relative;display:hidden;margin:0;padding:0;}
div.main-img div.right{position:relative;width:100%; display: none;} 
}*/   /* 【right部分】高度H÷宽度W   margin-top: -147.3235%; */
div.main-img div.right {display:none;}

这个特性是由 @W2K 提供的,很好用,我就纳入进来了

3 个赞