全栈工程师成长记

编程重新定义人生

第七周遇到的“CSS”坑

其实从第二周开始就一直有遇到 CSS 的坑,因为在第一周做 Joblisting 项目的时候,并没有太多的排版要求,基本放几个 Table 标签就算是可以了。而从第二周的 JDstore 项目开始,随着页面数量及内容的增加,不用到 CSS (甚至还要包括JS、JQ)就会很难合理的呈现内容,更不用谈及 Onboarding 或者用户体验之类。

本周三在做 project index 的 Tab 切换效果时就再次遇到 CSS 大坑。我想要实现的效果是点击切换”最新项目“或者”往期项目“之后,当前标签页的选项卡可以高亮显示——以任何一种样式提示用户正在浏览的页面。综合分析下来有三种方案:

  1. 使用 Gem active_link_to。但这个在用户后台已经使用,由于具体样式还不知道怎修改,所以再用在首页就不太适合了。
  2. JS + CSS。JS也是一个坑,先绕行……
  3. 纯 CSS。似乎比较容易实现,就只能选它了。

然而在实现的过程中,由于对每个 class 应该用到的属性不甚了解,各个 div 的嵌套关系也在相互影响,还有不少地方涉及到之前已有 class 的更改,真有牵一发而动全身的感觉,所以最后花了几个小时还是很难调试出自己想要的效果。

总结起来,还是要把基本功练好,这样不至于盲目的改各个属性却不得要领。

附上两个链接