css和js排版过程中所遇问题汇总

沈洛爻

作为一个文科生小白，用一两个月的时间入门css和js不得不说是一件及其痛苦的事，中间也踩了不少坑，因此在此开一贴，作为记录自己css和js排版过程中遇到的难题解决的思路和办法，以方便后来的人（尤其是头脑发热想排版坑的文科生）提高排版的效率，不至于自己在网上到处摸索。
) A+ u: H) k  d: X+ ?3 l! x2 v
本帖针对有一定css基础和js基础的人，如果你目前没有任何基础，建议在网上看视频稍微了解下，在实际开发中遇到问题时再回来看看此贴。视频地址如下：


% v$ u# \) y# ~& x黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动
: ?* {& O+ P/ i6 M# o4 [; t* `

( `* J: w0 h, j$ R$ V3 ~JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑
0 g) Z0 X: x0 _  l! k
+ S+ X" o: y. c. i3 P! E* V5 q
还有一个最经典必看的教程，千万不要跳过！


& n6 x0 |' O# V最最最最详细的手把手地教你修改css
4 G) T+ S- E/ H6 b6 d2 f7 @3 g
) V- G  F2 ?6 G' U+ Y& R& {
1.【关于入门学习的路径问题】
9 x) s0 x8 `0 V: h; E4 v
  [. }: W0 `" p. c) W
$ b& r# t4 ]- [6 S9 g! E! n先大体了解html，css和js的区别和联系。html重点掌握div和span的区别，搞清楚什么是块级元素、行内元素和行内块元素，以及不同的标签具有的不同固有属性，剩下的比如表单表格什么的，不用怎么看，在实际排版时可能会碰到一些没见过的属性，不要慌，这些可能都是词典制作者自定义的属性，这些不影响；css需要重点掌握选择器的使用，选择器的使用非常非常重要！！其次是定位和浮动，定位尤其重要，一定要掌握，定位要记住“子绝父相”需要添加top，right属性；最后是伪元素以及一些修改的属性快速过一下就行了。如果看到不懂的部分，再单独看相对应的例子，千万不要迷失在例子的海洋里！
7 y  V( c  y0 D4 L" f

最后是js，js可以说是个大坑，如果精力不允许，建议直接跳到jquery部分观看，js前面的部分太磨人，但是是用来打地基的，特别是一些循环、数组的概念，如果没有明确的掌握的话，后面可能无法检验出问题所在。断点调试一定要学会！而且一定要记住，js是编程语言！不是标记语言！编程语言就意味着程序是从上到下来运行的，因此如果出现别的功能都用不了而某一部分的功能能用，那就可以很快地排查大概是那个部分的代码出现了问题。注释要写好，不然调试的时候会非常乱！
7 u8 m* D7 A' l0 B/ L3 P3 u/ d
7 M, W1 [- s- ]
在学习的时候，一定要边学边思考，这部分功能对我的排版有什么用？如果感觉有具体的用处，请立刻到自己的排版中实践。如果遇到问题，再回来继续看教程，这样子印象会深很多！
2 l$ V  ^2 A% w, u8 N. l5 V
) h$ K* Q+ s6 ?7 s' R
# q; }% C- Y3 A; s* x5 D3 x2.【关于单词软件的调试问题】
像mdict，欧路这些词典软件，其本质上，都是一个浏览器，mdx里面装的是一个一个词条，软件就把这些一个一个词条展示成一个一个网页。经过我自己的测试，mdict的内核应该是ie8到ie9，欧路的话很高，mdict能兼容的欧路都能，而且欧路支持css3和html5！简直是福音！所以排版的时候一定要注意，css3和html5的功能，有些mdict是不能用的，而欧路能用，比如sessionstorage和localstorage，只能用在欧路，而不能用在mdict。
" f. K+ F, \2 [; Q& e& L( N' M& @

: U7 N) f; [8 |【mdict】
我个人的排版习惯于用mdict右键获取源码，复制到一个新的html来用浏览器修改。但是用mdict的时候存在一个问题，那就是有时候词典本来需要js来实现扩展解释栏展开的功能，因为mdict获取的源码中没有js，而无法在浏览器中重现展开部分的内容：
; c. @% T' v( r4 e" T9 m

5 d% b3 s3 u8 g  y* x, ?  A0 k

; V& P. a4 \/ _& y" R因此就无法对这部分进行css修改或者js修改。怎么办呢？我用牛津89和朗文5试手的时候，发现mdd里面都会有一个js的文件，把里面的js复制出来，新生成一个js，链接到html上，就能成功复原。因此如果遇到像有这种交互功能的js无法在网页上还原时，可以去mdd里面找一找没有js，有些词典运气好的话，直接会有一个外置的js给我们用，我们直接在上面添加自己的代码就可以了。

9 C5 z/ ^8 V7 T" J. l; C: H: R【欧路词典】
欧路这个软件真的是让我一言难尽，好的方面好上天，差的方面无力吐槽。最新版的欧路中，安卓，苹果全都是支持html5，但是好像window端的欧路和mdict内核是一样，不支持html5和部分css3。而且一定要注意，欧路的所有词典是共用一个html页面的！！！因此不要轻易使用像html、body、div和*这几个标签，如果用了这几个标签，那很容易你这个词典的效果会继承到下一个词典中去。同时也因为这个原因，css定位中fixed这个属性，轻易不要调用，因为它会把元素一直固定在页面的某个地方，你就算划了这个词典，下个词典还是会出现这个元素！如果非要用的话，要配合jquery的offset等属性，如果是想仅仅定位背景图片的话，请用背景图标附着这个属性。


欧路还有一个神奇的地方，例如牛津10的like词条，最下面的 like 其实 -like ，我查了mdx发现，这是两个词条，因此，欧路把这两个词条都放到一个html。这会产生什么问题？很简单，js会执行两次或者冲突。具体表现为出现几次重复的图案。这个时候怎么办呢？参考下面这个帖子：


# a' n+ `3 r5 q, W1 Y欧路Windows版执行JS两次
7 ]8 Q( l# P( t- y
2 `- }5 D( A# d2 O6 Z/ Y$ f( [
; Q% ?; h8 P2 ]6 j' l7 J1 {5 M解决办法就是将自己写的所有代码，包括jquery的ready（）全部包含进window.onload中。具体原理，我应该是window.onload只能执行一次，而jquery的ready（）可以执行多次而不被覆盖。或者在ready（）里面的最前面添加上这么一段if (window.自取名字) return;window.自取名字 = true;即可
% i4 @5 o' s# Y' y  Z, z9 S
欧路很多问题都是因为多个词典库用同样一个界面展示而出现的问题，只要多往这方面去想，很多问题都会解决。

7 A' v# X. J2 ~. q
; N* Z) N+ U6 _2 p6 c$ m3.【关于js的问题】
0 O: E& N1 N' K. `如果说css最重要的是审美，那么js最重要的就是思维，是想法。想实现一个功能，那就要学会把这个功能拆分开，先实现什么步骤，后实现什么步骤，一定要规划好。例如最经典的，中英切换，我没有看ff和精装牛津9的源码，因为太长了，，，但是要实现这个效果，我起码有两个办法。中英切换，可以分解为点击英文，然后出现对应中文。好，重点就来了，怎么定位中文？第一种方法，我想的就是用所有同一类名的英文，组成一个集合，然后把对应的中文也组合成一个集合，如果词典没问题的话，一般这两个集合的索引号是对应的，那么就可以用索引号来定位；如果像牛津10这样标签有点复杂的话，可以用兄弟元素定位的方法。我点击了这个英文，那他后面的第一个兄弟元素就要显示，这样也可以。
' |% j+ m) T6 R0 a- l
# Y6 {7 y4 {1 h- w现在突然发现，mac端仿佛是不能用localstorage的，用local会自动变成sessionstorage的效果，每次退出后会清楚缓存，，不知道是什么原因，，

4.【关于python的问题】（1）python write函数，写入文件只能写入一半的问题：解决办法
* T# o; d$ q/ e5 [* v

•     writeFile.write(data)
  ; I) c. p# C" ]" f
  ( }3 k8 B  d8 o; k& O
• 
  + Z9 v, O1 e7 f
  0 g! p% Y8 r9 E6 A0 }# Q$ t writeFile.flush()
  2 w( `9 f/ d6 f! ~9 ^' u
  " J. M% u( t: \" a( l/ Q
• 
  
  , x! g4 s- v- s, G9 l. L% d

参考链接

- |7 W, R8 S" C
! _+ d4 ~( D; n  }& A7 J$ X( y（2）TypeError: sequence item 0: expected str instance, list found
$ ]- j/ ?9 m- T解决办法
5 z! M9 x3 T1 E0 P2 f. w# b7 x, O" ".join('%s' %a for a in lists)
7 e5 E( |* B% T5 y# }参考链接
  B( m# w4 s; b! ^0 b& C- s4 L未完待续..

shiruxue

感谢楼主无私分享！

deeke

要学明白CSS，请把《CSS权威指南 第4版》看一遍，绕不开的。

% {  g$ c, N0 y3 I0 c' ^3 ^' G

沈洛爻

deeke 发表于 2022-3-7 20:30
% ^) c5 E0 _  g要学明白CSS，请把《CSS权威指南 第4版》看一遍，绕不开的。

" J% l1 B" F: l2 u我不是程序员专业的，也没有打算转行做程序员，我只是在网上通过学习达到自己想要的结果，每个人都很忙，不会有专门的时间来钻研这些东西，我写这些东西只是为了像我一样想要速出成果的人应该怎么办，而不是做个科研专家