TA的每日心情 | 衰 2018-6-16 18:13 |
---|
签到天数: 158 天 [LV.7]常住居民III
|
本帖最后由 Yyang. 于 2018-4-14 22:06 编辑 W1 w" F9 ?: G' i7 r+ v& p4 I
z- x# c1 u/ Y& ?, D
9 o9 o" _6 Z3 n
. m$ r7 u8 b# }; f8 V本贴需要结合咩妹子的 css 教程连接【CSS教学贴+L大韦氏修改CSS】小白式修改CSS方法
; \/ E# ~3 Y( r9 i! z5 Q+ G3 c* Q& H9 \1 H
一千个读者心中有一千个哈姆雷特。
' | Y! f0 J0 b- q3 _$ L每一个人对词典的布局都有自己的喜好。
6 k' ]' P. z) k: B$ W+ I在手机上的布局不一定在电脑上相同,反之依然。
7 C6 _5 Y" q% b" Y& K& C论坛上对css的修改最详细的讲解是咩妹纸的小白教程,咩妹子的 css 教程连接【CSS教学贴+L大韦氏修改CSS】小白式修改CSS方法,但是有些步骤不怎么详细,今天发帖教程。% f; ~6 w7 y7 M! m* j5 `6 S
零基础大力丸教程,讲解不多全是图不跳步骤。
# U% m5 |4 ]8 c5 H( k# ^
1 m) K; Y, c, G对下面问题,写出了自己的理解
' i0 O# s+ e7 v8 c! @0 u1.有mdd,但是没有外置的css怎么办?* K' n/ }( Z0 L6 Q) f, y( ]
2.没有mdd也没有css怎么办?
, K d7 ?0 O: ^# C" j3.为什么我在style里面改,但是css里面没有改呢?* r# n$ r2 \1 @1 n. l! K, v
4.如何通过两个排版选择修改自己想要的?
1 @8 h! e; E. ^5.怎么选择一些颜色呢?
' n4 _8 A/ ^" Z; {; H5 B
1 T" ]& Q& m6 ]% b+ b8 U; A* ]1 z' L8 u- w; Q+ ^7 n9 Y
一 需要软件
# ^9 { F9 _8 X! q& O9 y+ z1.[2018-3-3]MdxExport3.5-MDX与MDD资源导出小工具 Y7 G* T' g. h. O2 E+ c! r `
https://www.pdawiki.com/forum/thread-17709-1-1.html, f! F2 \' ] o% n7 [$ @ c1 E
2.[MDXBuilder] MdxBuilder 3.0 Beta2
3 @$ Z7 ~: L( ^ C' C: j, ehttps://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=37475 l4 u6 T/ u! u8 ?/ P- }
3.Mdict Editor Tool v2.0.35 -- 多功能个性化词典制作工具
' j4 B- L! m; `; \https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=37477 n) X# H" z* e1 N
4.emeditor64 百度
( K% d% m, A9 I( [4 T4 F$ ]5.MDict, j9 _- _' w$ l) b( f% P- @
http://www.mdict.cn/wp/?lang=zh
8 y G% Q2 X% x& c6 {6.Google浏览器
7 ]* d# ]; i6 ]* q, [# [7.css相关手册 看附件 密码852963; l( O) h. R1 H- D, J) t
% h, o& n. k4 F9 ^) t) b3 ]: f
二 步骤
1 u' o! K) i* X* X! l0 b( q2 J 1.选择我们想要修改的词典,今天选择最有代表性的lang5++,这本ff大的词典有两个js,两个css.
1 `! U/ f; u$ A1 F8 ?(说明:1.每一词典几乎都有额外的css,都是这些css有一个或者是多个,这个不需要在意,我们一个个来看
/ K8 D5 A: O7 d 2.我们中意的词典只有mdx,mdd没有看见css怎么办?继续看
) Y: `7 H4 W1 R2 a 3.js是控制着展开的,以及动画,lang5++有心人会看见在点击小喇叭时候,小喇叭有阴影)& F5 z5 L# f% p( M
! U' P$ X, F3 g" z
1.第一步,我们需要得到css才可以修改/ Q- N' U$ Z U) Y
-说明:没有css怎么办,工具:MdxExport3.5-MDX与MDD资源导出小工具' ?, c1 C0 G' f; I5 ^3 s- y F
1)有mdd,通常css是在里面的
( z* Y) P5 [7 z8 Y8 J) N9 C 2)没有mdd,那么css是写在mdx的txt里面的
: d! B. E8 j. g 看图
$ [# X1 H$ W, K: a# A# Z1 x8 E& C# }" O* k$ X# @
& W0 n3 {5 B: C" e0 |0 e$ i6 T8 M( ^' R& v" m( z: u0 ~7 R
回到文件夹,会看见多出一个文件夹在里面
# d- Z" m6 B% ~; Z2 v7 s) F: u! N6 }& u, j4 Y
这里面的就是css(记住这个文件名,到时候你修改后的css名字也是这个,要一致)
8 Q! I9 s0 p. O
) U' }0 W' c, M: n& p3 D0 r 说明一下2./没有mdd,那么css是写在mdx的txt里面的,下面我们看单单的mdx:英语词根词缀.mdx/
3 |8 M& ?+ m- x. @6 R1 V3 L* h! \6 Q3 ?% G r; T
; U% ~- H, ^! B0 [ 使用emedtray打开txt,7 `4 [ Z8 q" h; D6 X
# V# A8 ^$ x$ h) G/ ?. R对应的是字体的颜色,可以通过/替换/这个功能实现局部的修改* Q7 {$ J4 w. r; d
6 H+ P; v }' k2 \% c1 ^: i8 F* y- v3 C
2.第二步
( y% ]1 W# S% @) O$ c( f J1)提取词典中的单词html的表现形式
" L; R' |5 D, u3 e常用单词take,go,principle,for% x; {# j6 U# | T
2)打开mdict
4 i: }& s" {% G; B" a. l3)安装词库
% V& ^1 a. E$ W4 _4)提取源; E8 \& O) B R5 l: E
6 K: P! V {. m7 L8 @* j
3 L( w3 {6 d: z) t9 E% C
O1 ?# }$ |1 c' |5 ]% ~& Z7 x% \7 k, V2 _+ P a9 m1 ^* c
3.第三步 打开Google浏览器,把刚刚提取的文件导入到狗狗浏览器, n0 Z) c# [) M
$ |0 Z+ c% u, z: V$ I0 V& ^' U9 t) k* g8 q
按ctrl+shift+i或者在右上角冒号处点击----更多工具----开发者工具5 X4 {$ I" g# ~, @- K) @
8 I, _5 U3 L9 a
$ J' @5 }9 ~4 i* K# X. a# Z2 e& q
注意:ff大的css有两个,这两个css分辨控制着不同的排版
+ [ d$ J) z, X! l1 w我们一一的来使使0 f9 j- i) z1 e# G9 d
我们先试试LM5style.css这个文件,拽入/白白嫩嫩的空白处/
~$ i% P1 E! g5 \. S' `1 z 说明一下,lang5++的两个css控制的不一样,所以你单单导入LM5style.css这你只能看见部分的排版,尝试把css同时导入/白白嫩嫩的空白处/你就能看见和手机上相似的排版,那我们看看LM5style.css到底是控制的是什么呢?
: l# w" B5 h- G & {& H: A; E! e1 s5 u
6 x6 q3 O5 Z) q3 K
/ J; l- N4 z" F" z( f2 c, J
% {0 k& g2 `) z ctrl+shift+c快捷键. q8 c4 d1 q/ J( E
$ ^& M5 C& j* Z3 u& C 隐藏的命令为display:none ^, T$ e3 t, t5 ^4 x b6 `2 X7 `
1 G e D. v; c4 s/ e: Y# m2 v9 a
1 x' i4 Q3 G% N1 I6 `+ u
问题出现# Q9 `' r# Y1 H; Z1 }7 l- M
" O* M* T: J8 |+ X/ }: K- X
+ k4 A H9 e6 {4 X! h4 U7 r
/ p8 } t2 g; p) G, ]. k3 | 可能这里css中就没有写入这个class="DEF LDOCE_switch_lang switch_siblings"+ B/ G5 s8 W2 D7 m
但是我们可以清楚的看见在Elements中有class="DEF LDOCE_switch_lang switch_siblings"这个那么我们做如下操作$ e' A: ~9 g) @& ]- v9 A0 U
& T2 M; w, r) [' Q9 P; ^ Y& D" P; w/ G0 V( i1 n5 J: ^
3 s5 w7 d; B# H
我们先修改我们理想的样式先,我以修改颜色为例
) t; V! ~$ t5 D8 j) n& _$ N( @
$ o% X) X- V3 B& p% M$ I# e3 Q
: ~% H" j; h5 R) c3 g9 ?5 p. V, L/ m# O0 ?
第四步---尝试修改背景颜色, d$ Z+ K% g/ h2 g7 v) [5 _
! E( J" j* w3 O
两个不同排版比较修改* d+ Q( J* C$ Z: h
/ A! Z' `! I$ c8 m, m O# n8 |0 V p7 R$ q6 S: d
对于颜色的选择
; l$ n" T8 \2 m" D1 I通过各大网页选择你喜好的颜色
' z! |0 _, n# K6 L5 ^" K
; ~* E; b# I. b( w7 g
: x! I. I2 B$ J; f大爷都读到这里了给一个咱呗,1米2米不嫌少,50,100米来着不拒~
* N, J0 ]5 l% M: k$ v/ H
2 M# K' f6 S" f9 p
" W" `7 L5 M. P0 y
/ c; P5 m' I2 t' h |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
评分
-
20
查看全部评分
-
|