新牛津2nd2.4【CSS】2019.12.20


初版。。。之前的排版整齐有序,被我整得毫无次序,哈哈,不管啦~

词典内有作者,请作学习之用途

(2019.12.15) 初步排版了一下,把词性跳转,词频,翻译全部打开,虽然还有些问题,哈哈,还能用。

点击下载:

新牛津2nd2.4

提取码: 32tr

去动画,按住翻译,主要用于PC,有些朋友困扰于鼠标划过产生的“麻烦”。。。

2019.12.20去动画按住翻译.zip (5.2 KB)

3 Likes

谢谢分享。挺不错的,对css越来越得心应手了。

建议排ODE 3/e 双解版 英汉切换版 (20191225)
https://www.pdawiki.com/forum/thread-37804-1-1.html

此帖还有FF的ODE Living Online的添加双解 中文释义
https://www.pdawiki.com/forum/thread-34955-1-1.html

这个2.3.1双解比英文版少了很多内容,这些辅助内容对于英语立体学习挺有用的,但国内出版的双解原版由于篇幅、成本所限去掉了。所以说Online版添加中文释义是最好的版本

1 Like

啊,你总能找到好词典,我好久没关注新发的词典啦,谢谢提供信息。
我稍后看看。

  1. 如图,右侧没显示完全
  2. 然后有个奇怪的现象,我正好装了论坛里的 Macmillan British English Dictionary 2019 部分双解版 12.08,点击蓝色的按钮会跳转到该字典去,如果把MBE2019双解删了,则跳转正常
  3. 最后能否出个不要鼠标焦点显示效果的版本。。。
    以上,瑟瑟

哈哈,好像有些平台是有些兼容性问题,最烦这个了,再排个版本吧,mac的单词那一行浮动到顶部么?(就是这张图片的Tell /tel/ 这一行应该是向下移动会置顶的)
调这个算啦,鼠标那个
/* 蓝 */

.spanel {
right:0px;
}
/* 红 /
.panel {
right:0px;
}
/
鼠标-翻译(删除) */
div.example>p.en:hover+p.cn {
display: block !important;
position: absolute;
background-color: white;
z-index: 1;
opacity: 0.9;
color: #1e1e1e;
font-weight: bold;
width: calc(100% - 4.1em);
box-shadow: -1px 0px 12px #c5c5c5;
animation: blk 0.3s linear;
-webkit-animation: blk 0.3s linear;
transition: 0.4s;
padding: 4px 12px;
margin:0px 0px 0px 16px !important;
}
.sub_defs.ssingle div.example>p.en:hover+p.cn {
display: block !important;
position: absolute;
background-color: white;
z-index: 1;
opacity: 0.9;
color: #1e1e1e;
font-weight: bold;
width: calc(100% - 7.1em);
box-shadow: -1px 0px 12px #c5c5c5;
animation: blk 0.3s linear;
-webkit-animation: blk 0.3s linear;
transition: 0.4s;
padding: 4px 12px;
margin: 0px 0px 0px 16px !important;
}
.phrase div.example>p.en:hover+p.cn {
display: block !important;
position: absolute;
background-color: white;
z-index: 1;
opacity: 0.9;
color: #1e1e1e;
font-weight: bold;
width: calc(100% - 7.1em);
box-shadow: -1px 0px 12px #c5c5c5;
animation: blk 0.3s linear;
-webkit-animation: blk 0.3s linear;
transition: 0.4s;
padding: 4px 12px;
margin: 0px 0px 0px 16px !important;
}


tell词头那一行不会动,但是下面的悬浮会被下一行的遮挡,希望下一版能把这个效果去掉可以么?

还有那个蓝色按钮调整到其他词典的问题,你那不会嘛?

哈哈,我没Mac,Mac真漂亮!
其实这个冲突,我不明白什么原因。。。
o(╥﹏╥)o


这个红色在哪里改?我改了css里的1223行的right:15px,但是只对蓝色生效了

改这两个吧

/* 蓝 */
.spanel {
right:0px;
}

/* 红 /
.panel {
right:0px;
}

另外,你觉得间距还有问题么?

这两个对吧?

都是单独的.spanel和.panel
一个是红,一个是蓝

image 这是红色调成15,蓝色调成20的效果,然后鼠标那个不止那3段要注释,
总算调完了,谢谢

哈哈,不好意思,忘了一段。。。

div.example>p.en:hover {
display: block !important;
background-color: white;
z-index: 1;
opacity: 0.9;
color: #1e1e1e;
font-weight: bold;
box-shadow: -1px 0px 12px #c5c5c5;
animation: blk 0.4s linear;
-webkit-animation: blk 0.4s linear;
transition: 0.4s;
padding:4px 24px;
}

还有下面一段,一共三段

哈哈,Hover在Mac是有什么不对么 ლ(′◉❥◉`ლ)
用Hover也是不想动Mdx了,其实CSS实现点击效果还是比较简单的。

是会遮挡,然后可能字典太多了,会有点延迟,所以索性去掉好了

然后如果是可以实现单句点击切换双解,那这当然是最好了哈哈,希望下个版本可以出个点击版?

Hover有时候是有点头疼,手机轻点,遮挡的部分,点击或hover中文翻译,上一个例句会小时。
点击的话要改内部的HTML的内联CSS和标签,牛津9OL版有个标签改改就可以完全改颜色样式了,不搞了,改几部喜欢的词典,过得去就行啦 o(╥﹏╥)o

嗯,这样已经很满足了,谢谢了~~~

哈哈,长期看词典的话,还得排得清晰明了 (^o^)/~

那就麻烦大佬你了哈哈哈

对了,字体文件也是放到同一个目录层级下就可以了嘛?