[180725]牛津8英汉双解重排更新

tsisrep · 发表于 2018-5-30 01:20:13

7.25 修改多个bug，只需下载css覆盖即可;48楼有相关字体文件
6.26 隐藏多余空行，只需下载css覆盖即可
6.12 更新一些细节，只需下载css覆盖即可

首先感谢：

      EarthWorm精美的牛8：https://www.pdawiki.com/forum/thread-22034-1-5.html
      漫步_roamlog的双解重排：https://www.pdawiki.com/forum/fo ... 2722&fromuid=252908
      dfsfd的官网完美版美化：https://www.pdawiki.com/forum/fo ... 6763&extra=page%3D1
      这部词典排版已经非常完善。本次修改基于dfsfd的版本。

      另外感谢 fearfare090807 大神。之前一直想要点击切换的双解词典，自己也尝试做了些DEMO，水平有限功能很简陋：
      https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=20567
      https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=20565
      之后fearfare090807大神的帖子一发布，我告诉自己，那就是我要的滑板鞋。

      由衷感谢各位的分享。

一些想法：

      平时自己使用手机较多，在手机较小的屏幕上看起来总是没有电脑上舒服，尝试针对手机屏幕做一点优化：
      1.由于手机屏幕宽度较小而长度较长，改横向内容为【纵向内容】，重排词头等，方便从上到下阅读。
      2.格式化相关内容，用【不同颜色】及【固定的位置】区分出释意、语法、搭配、例句，方便在手机上快速提取信息。
      3.优化间距使不同释义间具有区分度，方便在手机上快速定位。
      4.重点突出解释部分。

一点尝试

      非专业，现学了一点css知识，抛砖引玉供大家探讨哪种排版更适合手机阅读。
      css没有重新写，修改后很乱，在深蓝上进行了测试，只是一个demo，表达下自己排版上的想法，大家可以继续修改完善，也可以根据喜好调整配色，大家有好看的配色也发上来分享下。

DEMO：

无阴影版:

配色参考：

了解一点CSS之后发现，排版根本是个体力活

购买主题 已有 163 人购买 本主题需向作者支付 10 粒米 才能浏览

PurlingNayuki · 发表于 2018-5-30 11:10:41

針對手機排版，其實延展來說是做好自適應，能用相對單位的部分儘量用相對單位，就能簡單地取得相對良好的效果。

thinkinginlast · 发表于 2018-6-6 00:28:35

动手建议，不错，楼主辛苦，感谢各位达人奉献心得。

fearfare090807 · 发表于 2018-5-30 13:04:47

PurlingNayuki 发表于 2018-5-30 11:10
( Z. } T0 D1 q' e& X& _8 F+ Z4 G針對手機排版，其實延展來說是做好自適應，能用相對單位的部分儘量用相對單位，就能簡單地取得相對良好的效 ...

相对单位根本和手机排版没任何关系的，也没任何帮助。
那就是解决同一个页面在系统（包括手机）或浏览器下字体整体放大缩小个一两级的问题。

浏览器标准字号是16px, 手机还是16px, 相对单位和绝对单位有什么区别吗？间隔并不会缩小的。如果你用GD为标准，那个标准字号是13px, 用相对单位的话到手机上间距反而拉大了。

手机和桌面分辨率差别实在太过巨大，要两边都安排的明白，只有另起一套方案，简单的，比如字典，就在原方案上修补， @media 指令就是作这个的。你去看collins online, oxford online 的css, 全是一大堆这种指令，绝对单位到处都在用。

复杂的，那就完全另起一套全新的方案才行，比如本站。

luke2122 · 发表于 2018-5-30 01:39:07

看起来很赞啊谢谢分享

HMPT · 发表于 2018-5-30 08:04:57

很有个性啊

weird · 发表于 2018-5-30 08:51:01

很不错！建议去除阴影效果，或许会更好

tsisrep · 发表于 2018-5-30 08:55:27

weird 发表于 2018-5-30 08:51/ `. Q @$ p3 y# b4 ?/ K" j
很不错！建议去除阴影效果，或许会更好

文件夹里有无阴影版

JAMES_ROWAN · 发表于 2018-5-30 09:13:21

这个好看

yangxiups · 发表于 2018-5-30 09:32:37

十年了。主要是在手机上用。

24042271@qq.com · 发表于 2018-5-30 09:59:56

谢谢大侠分享！你的最漂亮！

myimee · 发表于 2018-5-30 10:40:00

色彩比较丰富，但是总体比较和谐。

kyletruman · 发表于 2018-5-30 11:40:58

PurlingNayuki 发表于 2018-5-30 11:10
% k4 t. |, m9 }. A針對手機排版，其實延展來說是做好自適應，能用相對單位的部分儘量用相對單位，就能簡單地取得相對良好的效 ...

手机紧凑排版最好，可以一次性最大限度看到更多的释义

H-梦想缤纷 · 发表于 2018-5-30 11:57:04

支持下这个排版哈

tsisrep · 发表于 2018-5-30 11:57:35

PurlingNayuki 发表于 2018-5-30 11:105 [$ v) B- A& ^6 X& ?/ u2 Z- _8 N; c. P
針對手機排版，其實延展來說是做好自適應，能用相對單位的部分儘量用相對單位，就能簡單地取得相對良好的效 ...

大神，相对单位怎么使整块内容排版改变，也需要修改display方式吧

tsisrep · 发表于 2018-5-30 11:58:57

kyletruman 发表于 2018-5-30 11:409 j4 K: K# z+ V0 ?0 B1 ~
手机紧凑排版最好，可以一次性最大限度看到更多的释义

没有间距一下砸过来一版内容容易让我头大，个人喜好，不过间距也好改

wht1979 · 发表于 2018-5-30 12:39:44

近来更新了词典才知道这货用着好，可编排真是体力活。为你的付出表示感谢。

dfliaoyue · 发表于 2018-5-30 13:05:12

个人见解，黄底部分和整体风格不搭。而且黑色加粗本来就是非常显眼的样式，加上其他内容又偏浅，所以没必要加个黄底。

tsisrep · 发表于 2018-5-30 14:35:10

dfliaoyue 发表于 2018-5-30 13:056 C$ R- s. s- } b$ u
个人见解，黄底部分和整体风格不搭。而且黑色加粗本来就是非常显眼的样式，加上其他内容又偏浅，所以没必要 ...

我主要调整的是排版结构，配色方面你可以按自己喜好修改下，css搜索shiyi改color就行，有好看配色截图回复分享下哈

sculiuchang · 发表于 2018-5-30 14:43:53

有点意思，排版以便好用、易用，这个很关键哈。

clarkbu · 发表于 2018-5-30 14:52:03

这种重体力活要大力支持的！

skmpzj · 发表于 2018-5-30 17:51:06

不错还可以，颜色还可以低调点谢谢。

pesticides · 发表于 2018-5-30 18:19:47

排版看着很不错，楼主辛苦了

a200166 · 发表于 2018-5-30 20:03:01

谢谢你的辛苦付出！

zhao1054586851 · 发表于 2018-5-31 08:22:59

排版美观，继续加油！

kider96 · 发表于 2018-5-31 10:19:04

That's very interesting!

		自动登录	找回密码
密码			免费注册

[改版] [180725]牛津8英汉双解重排更新

本帖被以下淘专辑推荐:

评分