「CSDN技能树」-《网络技能树》测评 - bug及建议评价

目录

【BUG】：

发现bug

bug产生原因猜想：

解决思路：

结论：

【改进建议】：

内容质量

【期待】

【评价】

---

        此文章中，我将学习《网络技能树》，以小白的视角发表一些使用下来的感受和建议。

【BUG】：

发现bug

        在学习到 认识传输介质下的<通信方式> 这一知识点时，我发现左移 "我的笔记" ，文章内容会被遮挡，没有自动换行，而之前的文章都满足随窗口大小自动换行的需求。

bug产生原因猜想：

        我通过chrome的控制台尝试先获取文章中的元素，发现元素们的盒子宽度都超过了 “主内容的盒子（.mainContainer）“

        由于其他文章的文字都是会随主内容框的缩小而自动换行，所以我猜想不会是文字元素的问题，且我发现文字和块引用（灰色内容）/ 代码段超出盒子的距离相同，由此判断是因为块引用（灰色部分）/ 代码段 的元素撑开了主盒子导致文字无法通过主盒子宽度的缩小而换行从而被遮挡。

解决思路：

        我通过chrome的控制台尝试 删除 此文章中所有的 <code>标签。（代码段标签）

全部删除后，发现文字可以又可以自动换行了，且元素宽度没有再超过主盒子（.mainContainer）由此判断是灰色部分内容的原因

刷新页面 重新观察一下，我看见 在主内容盒子最大化 的情况下，代码块 的内容默认被遮盖（虽然最下面有左右滚动条，但这并不利于PC端的阅读体验）

 

结论：

我认为的原因：

        鉴于文章内容是引入的其他博主的博客原文，我判断是csdn在设计 “博客创作” 代码段 标签 时候，由于当时没有 在文章的一旁做 “我的笔记” 这个需求，于是在设置样式时，默认

<code></code>

这个标签的内容不会被随父盒子的宽度变小而换行，而是随父盒子的宽度变小而添加左右滚动条，

这在博客中是没问题的，因为主内容盒子的宽度足够宽，同时也利于移动端的左右滑动；

但现在增加了 “我的笔记”编辑框 这个需求，那么主内容盒子的宽度就会被迫设计的小一些。

从而出现了用户体验上的bug，我认为是可以优化一下的。

                                                                 

        所以是 <code></code> 这个标签的问题，此标签里的内容 在一行内过长 时，当长到超越父盒子宽度时，会自动生成一个左右滚动条 来支撑<code></code>的盒子宽度，这时其他文本元素就只会去识别<code></code>的盒子宽度，而不会去识别父盒子宽度变化，例如：                                                            <blockquote></blockquote>、<p></p>文本标签等

        优化这个标签的属性也许可以解决问题。

        我也查看了其他技能树含代码段的文章 ，比如（Python入门技能树/进阶语法）进阶语法有很多章都有这个问题，若 代码块 的内容在 一行内过长，会出现上述问题导致文字被遮盖。

---

【改进建议】：

内容质量

1. <网络拓扑的分类>，在 按网络中计算机所处的地位分类 中，两个分类的图片相同，作为小白的我无法理解就放两张相同的图且没有其他文字描述，如何让我区分他们的差别，

疑问：难道是图片放错了？

2. <认识网络模型> 网络模型概述 中，网络模型概念比较抽象，通篇都是文字，小白很难从中学习到知识，建议优化此内容，比如添加图解，提高学习效率。

---

【期待】

        1. 希望增加 在线代码编辑器

        2. 希望增加一个 语言学习路径 ，比如 学前端要学会哪些技术才能去找工作，帮助小白少走弯路，提高学习效率。

---

【评价】

对于这个模块《网络技能树》：我的评价介于 一般 和 好 之间。

        技能树这个板块的出现，使我们又有了拓展新技能的学习之地，加上可以通过学习知识获得对应的技能勋章，在学习完一个知识点后绿叶UI的点亮，也使我们的学习更充满激情和成就感。

        整体UI和排版做的不错。

        给出偏一般的原因是：我目前学习的是《网络技能树》，内容质量不适合小白学习，偏生硬，知识社区没有亮点去引导学员进行讨论。

        答题月榜上应当显示当月的学习天数，而不是总学习天数。建议增加显示个人学习的天数和做题量，去与榜上人员进行比较，从而提高学习积极性。