浪子带你从零学排版

浪子兄:看到你也半夜还在论坛,希望不是因为我的问题影响你的休息。如果是,那就抱歉了。还有几句话,想了想,还是表达清楚的好,不合适,请指正。


这么真诚朴实的话,确实让我以为有问题,找浪子兄。可是才过10天,我问了个现在看来,你一开始以为简单的不能再简单,后来证明实际上也不是完全有把握解决的问题,姑且说至少还是要费点功夫吧,咋就变成了

这个反差还真有点让人不敢相信是同一个人说的。
作为小白,不耻下问,你也鼓励大家问,本来没什么难为情的。如果我什么都知道,哪里该用什么代码,怎么用,如何避免代码间相互影响,我还需要请教你吗?我都可以与你切磋技艺了。
所以,下面几句话与你共勉。在“教导”别人遇到问题要思考,动脑筋,动动手的时候,自己也要斟酌一下那些话该讲,那些话不该讲。起码要切实搞明白问清楚对方的问题的关键,自己也动动手,看是不是真的能解决问题。如果仅仅按照自己的理解,以为解决了问题,而不是以对方按你的方法是否解决问题,就开始发言教导对方。至于渔还是鱼,就看个人体会了。是不是?

“专家”两个字,真的不敢当,截至目前我写过的CSS也没多少,正在学着写。

看了你们的对话,我觉得他/她这人挺好的呀,热心,直率。你别太敏感了。平常心嘛。

从别人那儿获得无尽的“少把手”教学,这种希望是不切实际的。

1 个赞

我的话可能有点过激,不过还是希望你能走一下我当初走的弯路,比如我要修改颜色,就先查css重color的项,然后通过调成一个鲜艳的颜色来找到它对应词典中的位置,这种过程可能对于小白,也包括我,是需要走的,就算知道是弯路,但是对于css的学习是很有用的
其次,我在那个教程里很强调,多翻翻css手册,那里面基本涵盖css的所有基础知识,随着你翻的次数增多和修改css的次数增加,你就知道我说那番话的意思了,不是不让你问,而是应该先思考的,很抱歉,我没有看完你的帖子,我以为你是看到问题直接问的,在这里说声抱歉,还请海涵
如果我不让人问的话,那我开这小白教小白的帖子有何意义呢?开这个帖子就是把小白领进门,然后教给一个大的方向,至少让小白们知道如何去修改,而不是一看到css就晕了,手足无措。因为我本身对css也是刚刚入门,我的目的是领什么也不懂的,进来,然后大家一起讨论,可能中间会有一些歧义,分岔,我的期望是在“讨论中互相促进,讨论中互相成长”。

1 个赞

如果你觉得我的帖子不能给你带来入门的作用,那么还请移步别处,去别处看看。
我在此之前,已经去看了很多遍pda论坛上大佬的教学,他们的可不会像我一小步一小步把你领进门,他们心中的小白,是有一定基础知识的,而非根本就不知道css的一点点知识。Hugh大的那个只说工具,但是这些工具的具体用法,怎么用?没说,需要你自己去搜,运气好的话能搜到,运气不好,搜不到。怎么办?放弃?还是咬牙自己学,自己体验?
因为我只是通过自己的琢磨才积累的那一点点经验,没有人教给我你怎样怎样从这到那该怎么做,没人,我只是通过最初的做法:从css的第一行,修改颜色,然后找对应关系。修改完颜色,又是字体。字体改完又学怎么调间距,这中间没有人教我,也没有教导视频可参考,手里头有的也就是很久很久之前那些人发的粗略的指导操作和css手册。如果你没有办法沉下心去修改css,那样的话,说句不好听的话:趁早放弃。修改css跟使用Anki、Goldendict一样,是个无底洞,刚接触的时候,没有什么,一旦了解越多,就会陷入其中越深,碰壁也会越来越多
就像Anki,一般人就只是把它当作背单词的软件,其实呢,它不应该只是记单词,也可以去记自己这个阶段需要记的东西,而这些东西,需要自己去做,这就是它的难点,还有Anki的展示风格,里面有很多坑,你踩上,就需要花很多时间去查,去实践,可能最后都没有办法解决
说这么多,没有其他意思,就是希望你能沉下心,再去看一遍我的那个领进门的教程,我后续也会继续完善的,比如间距,然后有的词典没有css,css内嵌在mdx中,需要通过正则表达式来修改词典。
教程不是一下子就能写好的,需要实践、发现问题、想办法解决、总结问题,最后再分类梳理。
如果你觉得我不能给你解决的话,还请你请教别人:三人行,必有我师焉。

1 个赞

并非敏感,只是不能接受什么都没搞清楚,就想当然地认为提问人不动脑,不思考,不动手(自己认为3个帽子吧),以一种居高临下的态度讲话。
至于希望获得无尽的“手把手”教学,这种愿望是从来没有的,从来没有。以我的人生经验,还是知道凡事要靠自己,外援只是锦上添花,没有也罢。
说实话,这部韦氏高阶是我一直在用的,排第二,第一是ODE3,ODE基本能满足我的所有要求,极少数情况下参阅一下韦氏高阶,因为是美语,且是双解。韦氏版本很多,CSS也很多,都非常好,自己改造了其中的一个,用得也很好,昨天只是一时兴起,想把以前没搞明白的找机会弄明白了,其实一直用,不改也是没事的。没想到一来二去,领了几个帽子回来,所以说好奇害死猫。

1 个赞

看了你的长贴,了解更进了一步。你的热心给人印象深刻,那种要把自己的经验得失传授他人的愿望如此强烈,令人叹服。这种人现如今已经很少了。为此,我必须再次表示由衷的敬意。
但话说回来,总体感觉你真是替别人考虑太多了。每个人学习的目的不同,基础也不一样,要求当然不同,所以大可不必以自己揣度他人,至于学习深浅,坚持还是放弃,学那个大神的教程等等,你的教程要如何编写,我们完全没必要在此讨论,个人取舍就是了。
我们因为这个提问,有这几段对话,也无所谓恩怨,我只是不能接受没有简单问询调查,就发出“不动脑子,不思考,不动手”这种武断的condescending tone and attitude而已。至于你一开始认为我的问题简单表现的那种良好感觉,我很是羡慕,因为我无论何时何地何事都没有过。
此事就此罢手,以后不再讨论,也不再回复。
对于你曾经的古道热肠,不论对我有多大意义,我都要说声感谢。也希望你的教程如你所愿,成为小白们学习的入门“圣经”,看了就能自己上手,不用再四处发问,避免再遭受我同样的“待遇”。

不管怎么样,我还是会把教程继续完善,到时候会加声音,图文加声音三者相互辅导,设身处地地为他人着想只是想模仿阿弥陀佛兄和站长,目的就是回报freemdict论坛,仅此而已

不知道兄台是否还是用搜索’href’的方法在atom中定位。其实可以直接搜css的名字,比如oledc9.css,一步到位,然后退格删除。

还有,感觉atom不用也是可以的,太大了,老电脑卡。
1 notepad++之类的编辑器打开css
2 在chrome中定位到元素的位置,直接修改,同样所见即所得,效果满意后,就把改动的代码复制到css文件里保存即可。

再,如果手头没有合适的录音设备。
可以把整个流程想说的话,完整的提前写好。
录制过程中,到某一步就用鼠标反复选中要讲的话,表示讲到这里了。能节省打字时间,压缩教程时长。

最后,对兄台的分享精神表示大力支持和感谢。

atom主要是支持实时显示修改的css
css+html,这样修改的话比较直观,直接修改css,那个缺一点直观的显示,对于新手很不友好
教程以后有时间就会录一个视频,发到bilibili和咱们论坛上

1 个赞

修改词典的绝对高度

工具:
1.mdxexport
2. memditor(只要不是系统自带的文本编辑器就行,容易崩溃哦)
3.mdxbuilder

首先我是用hanyl05版的英汉大词典发现这个问题的,与css无关。绝对高度的话,只看height:
如果height没有很高的数值的话,就直接去mdx中看看,看mdx中有没有height限制


经过排查,css中没有有关控制整体布局的height,那么,就只能解压mdx看看其中有没有控制全局的高度
接着下一步
解压mdx:打开mdxexport,然后找到你要修改的英汉大词典mdx,把它拖进mdxexport,解压即可

解压完,好家伙,我直接好家伙,169M,你要是用记事本打开,我敢说电脑直接卡死机!
用emeditor或uedit打开就行,推荐emeditor


用编辑器打开后,迎面而来的就是height:2000px;好家伙,就是这个2000px害的我们查词后,下面有很大的一片空白,很碍事,想让它自适应,就调成100%
(注:一般替换快捷键是ctrl+H
替换过程及其结果
·
最后的步骤当然是打包咯
因为英汉大词典没有图片和音频,所以只有mdx,所以data就不用选了,第一个选项是你要打包的txt文件,第二个是输出文件,路径自定义,在选路径的时候,记得名字要与原mdx名字一致,且要加上.mdx,切记切记

课后小总结:
height 这个设在body的大括号里面就是全局高度,所以固定高度会产生一些不可控的问题:词典展示不全或留太多空白。
因为css中没有全局高度的设定,所以我们需要先看css,再看mdx,再利用替换完成我们预期的想法。
打包完成之后再去看就没有空白了。
height overcome!

在CSS文件中,写入:


body {
    height: auto !important;
}

就能达到目的。请看MDN上这篇长文:

这样也可以,谢谢

建议CSS初学者先把 CSS Selectors; Cascade, Specificity, and Inheritance 这两部分弄懂。学CSS,一是学规则(只用看几个网页),二是学设计(这对我来说很难)。

幸亏把这个帖子重新看了一遍,才发现这么关键的一层楼没看到。

确实vscode更牛逼一点,不需要改html里的内容,直接可以预览。而且免安装包才80m。

记得安装预览插件preview on web server。

装好后,快捷键是ctrl alt V。

建议浪子兄台试试。 :crazy_face:

条条大路通罗马,工具不同,目的一样

请教你个问题,用你说的插件,我发现我只要用插件打开html到浏览器就会一直下载文件,也不知道只是什么文件,感觉是是dmx里的音频图片什么的,不知道怎么解决,而且就算打开了,更改css后也不会在html界面显示修改

你也可以不用下载插件,直接在浏览器里打开修改

看起来确实很费时间精力,辛苦了各位 :wink:版本太多,没专门的合集区,找资源我都感觉费时间哈

1 个赞

建议更新一下教程。
刚装完atom,顺便去github看了下,发现整个项目已经归档,install搜索atom-html-preview显示certificate has expired,Community Packages似乎也已经关闭,只能用vscode作接下来的部分。

CSS手册部分有点过时了,可以和doyoe的手册对照着看。后者是18年制作的,相对更新。

感谢大佬的教程,真心建议更新下。