TA的每日心情 | 衰 2018-6-16 18:13 |
---|
签到天数: 158 天 [LV.7]常住居民III
|
本帖最后由 Yyang. 于 2018-4-14 22:06 编辑 $ E/ k2 _6 P3 w
( z7 s+ c% T# A8 Z4 w
7 [+ V% `' d! L8 g0 u1 }
% [9 b$ o( q5 Q8 L, }# b1 }0 ]本贴需要结合咩妹子的 css 教程连接【CSS教学贴+L大韦氏修改CSS】小白式修改CSS方法
9 [+ D& s w% s
; ]( p3 [% k/ U/ T4 ?, g+ B一千个读者心中有一千个哈姆雷特。( d, P6 y" d( m+ F! g' S" j
每一个人对词典的布局都有自己的喜好。
. }5 @ t* W! l" j( c在手机上的布局不一定在电脑上相同,反之依然。6 @9 @4 b+ C9 L3 |
论坛上对css的修改最详细的讲解是咩妹纸的小白教程,咩妹子的 css 教程连接【CSS教学贴+L大韦氏修改CSS】小白式修改CSS方法,但是有些步骤不怎么详细,今天发帖教程。
' F+ x" Z) [1 _4 J8 D3 _" Y' W+ Y: W零基础大力丸教程,讲解不多全是图不跳步骤。
+ s! M0 @+ Q" l3 Y" \( W3 v5 e, u
1 A+ P% F7 u3 s `5 Y+ a1 m对下面问题,写出了自己的理解9 s' b9 q" m- w9 Q8 j
1.有mdd,但是没有外置的css怎么办?
/ ]" a! z2 V; [+ a3 [2.没有mdd也没有css怎么办?+ z! u+ {4 u8 _) C' H/ @
3.为什么我在style里面改,但是css里面没有改呢?5 c: t. C: U2 F4 b
4.如何通过两个排版选择修改自己想要的?; k$ ^/ f# F7 ?7 T( C" n* k
5.怎么选择一些颜色呢?
1 M6 p. ~# [4 p. a3 t5 M* ?: m
4 I) i) F( G, P, ]( m! T6 ]4 }( B/ m% Z6 G3 H
一 需要软件: b7 D3 P4 n7 i; I
1.[2018-3-3]MdxExport3.5-MDX与MDD资源导出小工具3 @& G% x: }8 J, S- ]0 V
https://www.pdawiki.com/forum/thread-17709-1-1.html
& @7 G& r r7 A0 o2.[MDXBuilder] MdxBuilder 3.0 Beta2
0 r: F5 y7 Z; S/ @4 ?6 s* i; q$ w( rhttps://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=3747$ k8 N( n: O$ J. m+ p1 l# D
3.Mdict Editor Tool v2.0.35 -- 多功能个性化词典制作工具
7 n# {3 B; {) |# r2 A( D ]https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=3747
. A4 S+ E4 `* ~0 ^0 w% R( t4 h) e4.emeditor64 百度- o- X3 ~, ~! v- e0 \! \3 i4 M
5.MDict" I" O# R- u& H' @
http://www.mdict.cn/wp/?lang=zh. ^4 b4 i3 Y' q, ]! t! D4 \0 d7 d
6.Google浏览器
- R5 v" h2 |2 D$ K+ {6 `7 M5 l5 J7.css相关手册 看附件 密码852963! ?! I g- m. x0 l. `
- q! O9 x: t5 z2 W3 a/ Z- V
二 步骤0 Q$ u/ B% a/ a& `/ m- r1 G. U) C4 @( Q0 n% M
1.选择我们想要修改的词典,今天选择最有代表性的lang5++,这本ff大的词典有两个js,两个css.
' x9 r% j5 V* N7 m: U) Q* o# a( V" e(说明:1.每一词典几乎都有额外的css,都是这些css有一个或者是多个,这个不需要在意,我们一个个来看
7 m" t. J y: U$ f, r- ~ N 2.我们中意的词典只有mdx,mdd没有看见css怎么办?继续看" Z5 G ?$ V) r4 Y
3.js是控制着展开的,以及动画,lang5++有心人会看见在点击小喇叭时候,小喇叭有阴影)
0 v, X1 s3 q3 C) q1 o# N' X* u
" x8 m$ C6 {7 ?$ V3 o3 ?1.第一步,我们需要得到css才可以修改
1 V4 q9 u1 F1 n3 l8 B s- O& }5 p: j: z-说明:没有css怎么办,工具:MdxExport3.5-MDX与MDD资源导出小工具' L% ?$ h- y( O8 V# N K
1)有mdd,通常css是在里面的' V( V* s8 o: B7 ^' Y8 L
2)没有mdd,那么css是写在mdx的txt里面的
% x- p# e/ H) K& Q# A \7 [" a 看图5 a" s. R+ a: N1 V- z/ a9 ~/ [% _
) X# G8 h2 R$ j$ U; Q8 A" k3 v. F6 |: A9 q2 }. X9 K9 |
- W/ r7 L3 [( ~& I5 p- Q
回到文件夹,会看见多出一个文件夹在里面
* P% p* X$ R: a+ i5 }. x5 U, f' g) p: {# U; J/ J$ G& b, N/ C
这里面的就是css(记住这个文件名,到时候你修改后的css名字也是这个,要一致)
W+ x0 x, z' [ 3 P3 L' {# o- w6 I4 e
说明一下2./没有mdd,那么css是写在mdx的txt里面的,下面我们看单单的mdx:英语词根词缀.mdx/5 M2 ]3 A$ D c& D7 X6 R( j
- y" z# O* U# `, J# O- i- I4 n# Y$ n( Y9 j
使用emedtray打开txt,. U/ j; i5 m' C% ~0 H
/ G: ^+ U+ D% Q" J2 w. I对应的是字体的颜色,可以通过/替换/这个功能实现局部的修改
3 |3 L2 U0 F; F U! g. T1 D: C4 {! ^9 \; H
" l, {; e. _2 A2.第二步
/ T3 V2 ^0 ?, d6 Y3 y4 n5 ~1)提取词典中的单词html的表现形式
9 V" x7 D0 g7 e常用单词take,go,principle,for; n: v9 U; U# F
2)打开mdict4 v+ j8 P$ Z+ P2 F8 j
3)安装词库
- N' B5 Z: ^6 _* ~9 i4)提取源
. Z" \. C* r: j+ d
& j$ k" Y) x( |) V5 Q) U D4 |0 b! n. Q. R- {" ^ I
. U! O0 ]3 `$ `( E/ v3 F0 x u2 M! |+ F" i
3.第三步 打开Google浏览器,把刚刚提取的文件导入到狗狗浏览器& V: r; S1 G" b7 G- `9 h
1 N' Z& b# a; e8 K
' b1 v+ |- L6 g) k1 w- h
按ctrl+shift+i或者在右上角冒号处点击----更多工具----开发者工具
6 W ]6 `( q" D- R& H7 F2 y$ N2 u
( ?1 [" k! y; R4 T+ ^! m5 h7 b
注意:ff大的css有两个,这两个css分辨控制着不同的排版
/ T+ A5 E. `' V4 {; A+ `我们一一的来使使+ z6 T! A. n4 T/ j- N
我们先试试LM5style.css这个文件,拽入/白白嫩嫩的空白处/
( I. S6 ~- h: z9 R- ], Z 说明一下,lang5++的两个css控制的不一样,所以你单单导入LM5style.css这你只能看见部分的排版,尝试把css同时导入/白白嫩嫩的空白处/你就能看见和手机上相似的排版,那我们看看LM5style.css到底是控制的是什么呢?" m1 s% F; |% i- U5 `# k
+ Z$ _$ |2 e7 l9 {% y) c
4 d! {/ M9 W( J+ L- T
+ r# A. F3 j. ?
% g5 Y( T; E0 p) C& x( d1 g3 C ctrl+shift+c快捷键
9 Y& q0 k( s0 L; u0 R
6 u" x3 u- N! s6 b- `3 ] 隐藏的命令为display:none
% |) l: n% k" i8 Q3 ~4 W2 _8 x2 F, W$ @. ?1 L& b
& s+ {% t( {, }) X' |! B
问题出现& m: s) s6 s" v( w+ K
8 C! U T* |$ `0 x) {
% u* P% R+ I W! [
" ?+ Y' n3 r. K/ G 可能这里css中就没有写入这个class="DEF LDOCE_switch_lang switch_siblings"* M" ~) n8 K% O* S7 b7 j5 d$ q
但是我们可以清楚的看见在Elements中有class="DEF LDOCE_switch_lang switch_siblings"这个那么我们做如下操作1 S3 r: X/ X- P' e6 q/ _
4 W7 j/ ~ x6 @, u
# V0 r2 M; u/ n$ R- F; \$ f& f) g
' i( i% [" b( r 我们先修改我们理想的样式先,我以修改颜色为例5 W0 x4 r- J, S! z5 b' Q) G4 e7 K
6 {1 S; q2 v& Y( D8 n+ W, b5 k, Q. J G: |( a4 ~+ [
5 a% _8 O$ j- s3 g. J
第四步---尝试修改背景颜色
& ?0 T3 \" d1 l' o9 T. F6 k" Y2 c
5 j3 _: d8 i" G6 X) n( N; e3 y两个不同排版比较修改
# ~& f) v' m) V/ h# Y) J" A
! ]2 b' e- R' T' N& B
& Z4 d- P3 E9 K4 i; b; w对于颜色的选择- R, J! H2 g# I- w
通过各大网页选择你喜好的颜色( L6 Q0 t; P9 r' \+ R9 `2 {, }
9 z9 x) w1 P! S$ S+ v9 U1 m+ b
2 z& [# c9 o: c9 B; W0 H大爷都读到这里了给一个咱呗,1米2米不嫌少,50,100米来着不拒~, _4 ^4 v9 x6 I1 D
/ s$ u; x% ?" w! G; K( T
5 f$ U0 f6 r" a2 K- Q0 }& Q( ]) e% Z: l
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
评分
-
20
查看全部评分
-
|