[2018/06/15]手机适配蓝色专注CSS For ff版狼吻5++[端午节福利1]

Bouroz · 发表于 2018-6-15 19:57:01

本帖最后由 Bouroz 于 2018-6-16 01:04 编辑

2018端午节福利三连发之一

提示1：本CSS适用的词典见ff大神的帖子:
https://www.pdawiki.com/forum/fo ... &extra=page%3D1

提示2：本CSS修改自sunset的帖子：
https://www.pdawiki.com/forum/fo ... peid%26typeid%3D109

感谢两位大神！

修改内容：
1. 更改了主配色，使蓝色更加纯粹专注；
2. 降低例句的字号，颜色改为灰色，侧面使解释更加直观，便于手机查看时，使注意力集中在解释文字上；
3. 其他细节小改动。

配图如下：

修改说明：

   本CSS主要是为了加强解释，弱化例句，使其更适合在手机上观看。

   本来为了手机查看，想大刀阔斧的好好改动一下这个CSS，比如除上述内容外，
还想增加解释的背景色、方框内容自动弹出和彩蛋自动打开等等功能.........

   然而现实就是，只学了几篇速成教程贴的我，改动时各种出错。

   本文涉及词典的格式很杂，全靠ff大神的强悍编程能力组合在一起并表现完美，
想要大改，除了改动CSS和JS，词典mdx的内容也要增加定义。

   大改的要求远超我的能力范围，我就只能自己试试，尽量自己满意的手机版CSS，
结果就是本帖的内容了。

   现在想想，其实没实现的大多也是一些伪需求，解释框自动打开其实没什么用，
彩蛋内容质量不高，要不ff大神也不会列其为彩蛋了。进这个论坛的，谁手机里没有
几部词典，不会真有人纠结那点彩蛋的。

CSS如下：

本帖隐藏的内容

链接：https://pan.baidu.com/s/1A4xDlPk6t3liPffbUA-DOw 密码：zenu

Bouroz · 发表于 2018-6-15 21:47:52

恐咖兵糖发表于 2018-6-15 21:36
LDOCE5的extras也有很多原生例句，还有额外搭配，也很有参考价值，可以一看。FF大的词典有很多默认不展开， ...

多谢建议！手机上，点开操作感觉多了一份互动，还蛮有趣的，个人比较喜欢。原来是感觉彩蛋不太好打开，就想弄个默认打开算了，后经仔细研究，发现不打开是有道理的，FF大神想的比较周到了。以后有机会，还会微调的，就是不知道L0ng6的帖子是哪个，能附个链接吗？我个人喜欢简约，能突出重点的，当然，是在手机端查看。最后，端午节快乐！

恐咖兵糖 · 发表于 2018-6-16 17:27:25

和你喜好相同，简约版易于快速提取信息。也很喜欢蓝白风格。搜索LD0CE6可以查到
2017.8.28的重排。这个版本字体样式觉得还是不错的。间距也恰到好处。你觉得怎么样？https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=21568&highlight=LDOCE6

恐咖兵糖 · 发表于 2018-6-15 21:36:36

LDOCE5的extras也有很多原生例句，还有额外搭配，也很有参考价值，可以一看。FF大的词典有很多默认不展开，个人觉得很不错。作为彩蛋的语料库和business用的确实不多。如果说手机阅读，字体也可以改改。字体可以参考L0ng6的蓝白风格。最后，端午节快乐！

wht1979 · 发表于 2018-6-15 20:07:37

原作者的好多东西我是不会改，就拿个简单例子说，我就想把单词的几个意思的阿拉伯数字后的加个横杠或一个点统一下都不能。

tsisrep · 发表于 2018-6-15 20:16:28

wht1979 发表于 2018-6-15 20:07
原作者的好多东西我是不会改，就拿个简单例子说，我就想把单词的几个意思的阿拉伯数字后的加个横杠或一个点 ...

http://www.w3school.com.cn/cssref/selector_after.asp
看下这个行不

jiaoyulilun11 · 发表于 2018-6-15 20:24:18

楼主，说实话，彩蛋对某些人而言是最有价值的。那是一些例句集合，对于学英语更有参考价值

Bouroz · 发表于 2018-6-15 20:27:51

jiaoyulilun11 发表于 2018-6-15 20:24
楼主，说实话，彩蛋对某些人而言是最有价值的。那是一些例句集合，对于学英语更有参考价值 ...

非专业人士，不懂啊，个人感觉需求不是那么强，毕竟现在词典这么多，欧路的原声例句简直不要太强。当然，最主要的，我不会改........

jiaoyulilun11 · 发表于 2018-6-15 20:29:37

楼主，我说了些题外话，你别见怪啊。你改的css很舒服。

Bouroz · 发表于 2018-6-15 20:34:05

jiaoyulilun11 发表于 2018-6-15 20:24
楼主，说实话，彩蛋对某些人而言是最有价值的。那是一些例句集合，对于学英语更有参考价值 ...

哈哈，不至于，就是聊天么，端午节快乐！

jiaoyulilun11 · 发表于 2018-6-15 20:37:00

Bouroz 发表于 2018-6-15 20:34
哈哈，不至于，就是聊天么，端午节快乐！

也祝楼主端午节快乐！大家都节日快乐！

liujun0408 · 发表于 2018-6-15 20:49:49

谢谢分享！楼主辛苦！排版漂亮，收藏了1

wht1979 · 发表于 2018-6-15 21:00:42

本帖最后由 wht1979 于 2018-6-15 21:13 编辑

谢，我还得多学学你们。
很好的学习的案例。

多谢

小书童米 · 发表于 2018-6-16 07:43:14

几个词典颜色都很舒服，想下下来用，谢谢分享！！很不错的配色！

Danielsir · 发表于 2018-6-16 08:37:28

楼主肯学肯做的精神值得我们大家学习，表示一直支持你！

backdream · 发表于 2018-6-16 13:55:40

可惜原帖权限不够看不到，先保存着以后用。

Bouroz · 发表于 2018-6-16 17:57:37

确实很漂亮，作品跟sunset是一个级别的，后续会考虑参考引入的

学习用的 · 发表于 2018-6-17 22:20:41

从福利3 找过来的！多谢楼主端午节的福利

makesth · 发表于 2018-6-19 08:29:43

十分感谢楼主分享，特别喜欢冷淡纸质版，找了好久。

makesth · 发表于 2018-6-19 08:29:43

十分感谢楼主分享，特别喜欢冷淡纸质版，找了好久。

drongh · 发表于 2018-6-19 21:43:55

非常感谢，不错的颜色。
就是么有mdx文件。米不够。

ppptttrrr · 发表于 2018-6-20 22:13:46

谢谢楼主分享

下载试试看怎么样先

laoshen413 · 发表于 2018-6-23 21:25:31

一点点改进，就带来许多使用的惊喜。

yhmc · 发表于 2018-6-23 23:52:25

改得很喜欢，谢谢制作，谢谢分享！！！

哈喽啊 · 发表于 2018-6-24 12:09:02

再看看，谢谢楼主的g分享巴巴ggg爸爸巴巴爸爸gg

[改版] [2018/06/15]手机适配蓝色专注CSS For ff版狼吻5++[端午节福利1]

本帖隐藏的内容

评分

评分

[改版] [2018/06/15]手机适配 蓝色专注CSS For ff版狼吻5++[端午节福利1]

本帖隐藏的内容

评分

评分

[改版] [2018/06/15]手机适配蓝色专注CSS For ff版狼吻5++[端午节福利1]