超级零基础小小小白Css修改教程贴

Yyang. · 发表于 2018-4-14 21:46:02

本帖最后由 Yyang. 于 2018-4-14 22:06 编辑

本贴需要结合咩妹子的 css 教程连接【CSS教学贴+L大韦氏修改CSS】小白式修改CSS方法

一千个读者心中有一千个哈姆雷特。
每一个人对词典的布局都有自己的喜好。
在手机上的布局不一定在电脑上相同，反之依然。
论坛上对css的修改最详细的讲解是咩妹纸的小白教程，咩妹子的 css 教程连接【CSS教学贴+L大韦氏修改CSS】小白式修改CSS方法，但是有些步骤不怎么详细，今天发帖教程。
零基础大力丸教程，讲解不多全是图不跳步骤。

对下面问题，写出了自己的理解
1.有mdd，但是没有外置的css怎么办？
2.没有mdd也没有css怎么办？
3.为什么我在style里面改，但是css里面没有改呢？
4.如何通过两个排版选择修改自己想要的？
5.怎么选择一些颜色呢？

一需要软件
1.[2018-3-3]MdxExport3.5-MDX与MDD资源导出小工具
https://www.pdawiki.com/forum/thread-17709-1-1.html
2.[MDXBuilder] MdxBuilder 3.0 Beta2
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=3747
3.Mdict Editor Tool v2.0.35 -- 多功能个性化词典制作工具
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=3747
4.emeditor64 百度
5.MDict
http://www.mdict.cn/wp/?lang=zh
6.Google浏览器
7.css相关手册看附件密码852963

二步骤
1.选择我们想要修改的词典，今天选择最有代表性的lang5++，这本ff大的词典有两个js，两个css.
（说明：1.每一词典几乎都有额外的css，都是这些css有一个或者是多个，这个不需要在意，我们一个个来看
         2.我们中意的词典只有mdx，mdd没有看见css怎么办？继续看
         3.js是控制着展开的，以及动画，lang5++有心人会看见在点击小喇叭时候，小喇叭有阴影）

1.第一步，我们需要得到css才可以修改
-说明：没有css怎么办，工具：MdxExport3.5-MDX与MDD资源导出小工具
      1）有mdd，通常css是在里面的
      2）没有mdd，那么css是写在mdx的txt里面的
看图

回到文件夹，会看见多出一个文件夹在里面

这里面的就是css（记住这个文件名，到时候你修改后的css名字也是这个，要一致）

说明一下2./没有mdd，那么css是写在mdx的txt里面的，下面我们看单单的mdx：英语词根词缀.mdx/

使用emedtray打开txt，

对应的是字体的颜色，可以通过/替换/这个功能实现局部的修改

2.第二步
1）提取词典中的单词html的表现形式
常用单词take，go，principle，for
2）打开mdict
3）安装词库
4）提取源

3.第三步打开Google浏览器，把刚刚提取的文件导入到狗狗浏览器

按ctrl+shift+i或者在右上角冒号处点击----更多工具----开发者工具

注意：ff大的css有两个，这两个css分辨控制着不同的排版
我们一一的来使使
我们先试试LM5style.css这个文件，拽入/白白嫩嫩的空白处/
说明一下，lang5++的两个css控制的不一样，所以你单单导入LM5style.css这你只能看见部分的排版，尝试把css同时导入/白白嫩嫩的空白处/你就能看见和手机上相似的排版，那我们看看LM5style.css到底是控制的是什么呢？

ctrl+shift+c快捷键

隐藏的命令为display：none

问题出现

可能这里css中就没有写入这个class="DEF LDOCE_switch_lang switch_siblings"
但是我们可以清楚的看见在Elements中有class="DEF LDOCE_switch_lang switch_siblings"这个那么我们做如下操作

我们先修改我们理想的样式先，我以修改颜色为例

第四步---尝试修改背景颜色

两个不同排版比较修改

对于颜色的选择
通过各大网页选择你喜好的颜色

大爷都读到这里了给一个咱呗，1米2米不嫌少，50，100米来着不拒~

09rmb · 发表于 2018-4-15 16:23:54

@kyletruman 不给个精华吗

QQending2 · 发表于 2018-5-2 22:09:24

本帖最后由 QQending2 于 2018-5-2 22:48 编辑

mdzz，我上一个号某名被说水贴被封了。

所需软件的
第2步，Mdict的官网也提供下载地址：http://www.mdict.cn/download/MdxBuilder.zip，同样的R2版本，不知道谁是原创的。
第3步链接给错了，还是第二步的，正确链接应该是 https://www.pdawiki.com/forum/fo ... hread&tid=18986
第5步主流的一些写代码用的文本编辑器应该都行吧。倒是听说emeditor的csv处理比较好。

总之还是谢谢提供思路了

再补充一句：感觉http://runoob.com这个网站对新手挺友好的……
我作为萌新，接触各种东西的时候，感觉都能查到一些，就是资料不全，只是特别基础的部分有。

abcd~ · 发表于 2018-4-15 11:27:20

dfliaoyue 发表于 2018-4-15 10:27
用替换。找到每个词条开头的特点，用普通替换或正则替换法加上对css的链接。然后用正则替换一点点把写在 ...

大神! 请问你可以写个教程吗
虽然我也可以自己上网找什幺正则的
但是我相信有人教图文并茂会学得更快
其实我之前都有看过hugh大的教程
不知怎的就是做不到…

abcd~ · 发表于 2018-4-14 21:55:00

本帖最后由 abcd~ 于 2018-4-14 21:57 编辑

贊一個啊樓主
完全將小白們的問題都寫出來了
是一個十分詳細的教學

PS 樓主懂得在mdx中寫個css嗎？
就是在editor中加個<lef... css...>那個
我不太懂用啊...
懂得的話可以再分享多個教學嗎?

Yyang. · 发表于 2018-4-14 21:57:49

abcd~ 发表于 2018-4-14 21:55
贊一個啊樓主
完全將小白們的問題都寫出來了
是一個十分詳細的教學

哈哈哈谢谢你的肯定

Yyang. · 发表于 2018-4-14 22:01:01

abcd~ 发表于 2018-4-14 21:55
贊一個啊樓主
完全將小白們的問題都寫出來了
是一個十分詳細的教學

这个不怎么会呢，改起来比较麻烦，好像要使用什么替换，还在研究中，如果懂了第一时间发帖，哈哈！十分谢谢你的评分

eudict · 发表于 2018-4-14 23:42:07

好帖子，只是希望楼主能换个头像，真的太出戏了

Yyang. · 发表于 2018-4-15 07:15:44

eudict 发表于 2018-4-14 23:42
好帖子，只是希望楼主能换个头像，真的太出戏了

看我那迷人的眼睛你有没有爱上我

dfliaoyue · 发表于 2018-4-15 10:27:31

abcd~ 发表于 2018-4-14 21:55
贊一個啊樓主
完全將小白們的問題都寫出來了
是一個十分詳細的教學

用替换。找到每个词条开头的特点，用普通替换或正则替换法加上对css的链接。然后用正则替换一点点把写在文本的样式换成css里的样式名。

09rmb · 发表于 2018-4-15 11:18:28

这两天登不上论坛，顶贴晚了

PbutH · 发表于 2018-4-15 12:13:21

重量级帖子出来了，点个赞！

dfliaoyue · 发表于 2018-4-15 13:28:23

abcd~ 发表于 2018-4-15 11:27
大神! 请问你可以写个教程吗
虽然我也可以自己上网找什幺正则的
但是我相信有人教图文并茂会学得更快

我也不是很会，都是边查边用的…

kyletruman · 发表于 2018-4-15 16:27:42

本帖最后由 kyletruman 于 2018-4-19 01:12 编辑

09rmb 发表于 2018-4-15 16:23
@kyletruman 不给个精华吗

是否要加精华帖需要看相应版块版主的意见，其他人也无权干涉，擅自干涉反而会坏事。是否加精，版主自有他的道理，超级版主级别的论坛管理成员应该充分尊重和完全支持各个版块版主的管理工作，尊重各个版块版主的管理模式。

09rmb · 发表于 2018-4-15 16:33:44

kyletruman 发表于 2018-4-15 16:27
是否要加精华帖需要看相应版块版主的意见，其他人也无权干涉，擅自干涉反而会坏事。是否加精，版主自有他 ...

K大这回复也太官方了吧，活力一点的版本有没有

Yyang. · 发表于 2018-4-15 18:49:59

09rmb 发表于 2018-4-15 16:33
K大这回复也太官方了吧，活力一点的版本有没有

摸摸头哈哈哈

kanliuxing · 发表于 2018-4-25 09:10:37

谢谢楼主替小白写的教程，这下可以照着做啦。

shinbade · 发表于 2018-4-25 13:28:07

看了楼主的文章，小白跃跃欲试了。

QQending · 发表于 2018-5-2 17:56:20

堪称教程索引了吧……

altan · 发表于 2018-5-7 11:20:07

很是详尽，小小白终于知道各个文件是干嘛用的了，谢谢解答

褪色的图腾 · 发表于 2018-5-14 17:34:14

这个必须要收藏的，我这段时间一直用楼主的adh排版，但是在手机上用，感觉字体稍大了一点，从楼主这里学到了不少东西，等下试试把字体改一下。

wht1979 · 发表于 2018-5-19 15:36:45

Yyang. 发表于 2018-4-15 07:15
看我那迷人的眼睛你有没有爱上我

这样的问题咋办

还有all也上下这样，我按你的改了改，没改过来。

Yyang. · 发表于 2018-6-16 18:11:12

wht1979 发表于 2018-5-19 15:36
这样的问题咋办

还有all也上下这样，我按你的改了改，没改过来。

这个help本身是不带底部颜色的吧？后加上的？你的边框距离没有修改吧

wht1979 · 发表于 2018-6-16 18:37:31

Yyang. 发表于 2018-6-16 18:11
这个help本身是不带底部颜色的吧？后加上的？你的边框距离没有修改吧

没动任何东西，下载了直接往里一丢就用了。底色是欧陆可选的几个主题颜色

这是默认的主题，我上面选的是棕褐色主题。

Yyang. · 发表于 2018-6-16 21:07:25

wht1979 发表于 2018-6-16 18:37
没动任何东西，下载了直接往里一丢就用了。底色是欧陆可选的几个主题颜色

这是默认的主题，我上面选的是 ...

三种方案
.help下的
1.取消底色/
2.margintop变大
3.padding缩小

[教程] 超级零基础小小小白Css修改教程贴

评分

本帖被以下淘专辑推荐:

评分