导读：花了将近两个月，JavaScript的学习视频算是做完了。里面的例子，都敲过一遍，但有少数的几个就是实现不了，比如：百度分享侧栏随着滚动条移动；菜单切换只对第一个起作用等，也就先放着了。现在，就总结一下这一阶段的学习。
一、内容
视频内容，主要还是从两个方面讲，前半部分是基础的一些知识，后面的是一个博客前端的具体应用。这里面有 很多的小技巧可以用来改善画面或者提高网页显示性能。比如轮播器和动画，可以将导航和菜单做成动态的；而延迟/预加载则可以在用户需要的时候加载内容，这样就避免了加载一些不必要的东西。永远只显示用户可视范围内的的内容。
可以说前面的基础知识，都是保障后面具体实践的一个很重要的因素，基础不牢，天动地摇，其实用我们学到的知识可以做很多东西，关键就是我们不够熟练。
二、技巧
首先：在JS中应用到了大量的CSS样式，以前就是对这个不很了解。这次学习后，发现，其实也是可以理解的一个东西（当时学习牛腩的时候真没有弄明白），也就是在HTML中将我们需要的东西，给贴上标签，如：div ,span, class等等。然后在CSS里面告诉网页，这个标签内的东西需要放在哪里（位置设置），还有 就是一些层次叠加。其实这个DIV就是一个起名的过程，而CSS则是进行一个职位说明，这个人要干嘛怎么干，那个人要干嘛等。
其次：每一个弹出框，每一个页面的显示，都是先通过CSS对其进行基本的定位的。只是在设置好了CSS之后，考虑什么时候显示，显示哪些内容，怎样显示的问题。将HTML和CSS设置好了之后，就是通过调用控制其具体的显示布局，所以这也就涉及到了怎样快速找到我们需要的标签的问题。在CSS里面，我们直接通过写标签名就可以获得，但在JS里面则需要通过方法或者属性找到我们需要的东西。
附：比较常用的CSS样式设置
|
位置（盒子模型) |
||
|
名称 |
值（说明） |
实例 |
|
Width |
宽 |
Width:100px |
|
Height |
高 |
Height:100px |
|
Padding |
上 右 下 左（12px 5% auto 20px） |
Padding:12px 5% auto 20px |
|
Margin |
上 右 下 左（12px 5% auto 20px） |
Margin:12px 5% auto 20px |
|
边框 |
||
|
Border-bottom、top、right、left-color |
颜色 |
Border-color：#ccc、RGB（） |
|
Border-bottom、right、top、left-width |
宽度 |
Border：2px solid gray |
|
Border-bottom、top、right、left-style |
Outset：整个方框凹陷（外） Inset：整个方框凹陷（内） Ridge：成脊形 Groove：立体沟槽 Double：双实线 Solid：实线 Dashed：虚线 Dotted：点线 None：无边框 |
|
|
文本 |
||
|
Letter-spacing |
字符间隔 |
Letter-spacing：12px |
|
Text-decoration |
None：不修饰 Underline：下划线 Overline：上划线 Line-through：删除线 Blink：闪烁 |
|
|
Text-align |
Left：左对齐 Right：右对齐 Center：居中 Justify：两端对齐 |
|
|
Text-indent |
缩进 |
Text-indent：2px |
|
Line-height |
行高 |
Line-height：20px |
|
字体 |
||
|
Font-size |
字号 |
Font-size：12px |
|
Font-style |
Italic：斜体 Bold：粗体 |
Font-style：bold |
|
Color： |
|
|
|
背景 |
||
|
Background-color |
#ccc，RGB（） |
|
|
Background-image |
URL（…） |
background:url(Images/arrow4.png) no-repeat 12px 45%（12px水平位置，45%垂直位置） |
|
Background-position |
right、left、center、bottom、top |
|
|
Background-repeat |
No-repeat：不重复 Repeat-x：X轴重复 Repeat-y：y轴重复 |
|
|
定位 |
||
|
Position |
Static：无特殊定位 Absolute：z-index声明层叠 relative：不可层叠 |
|
|
z-index |
值高覆盖值低 |
|
|
Float |
None：无浮动 Right：浮在对象右侧 Left：浮在对象左侧 |
|
|
Overflow |
Visible：不剪切不添加 Auto：在需要时剪切和添加 Hidden：不显示超出对象的部分 Scroll：显示滚动条 |
Overflow：hidden |
|
链接 |
||
|
A:link |
普通链接 |
Text-decoration（属性） |
|
A:visited |
访问过的链接 |
|
|
A:hover |
鼠标移到的链接 |
|
|
A:active |
点击后的链接 |
|
|
Color |
链接颜色 |
|
|
Text-decoration |
None：不修饰 Underline：下划线 Overline：上划线 Line-through：删除线 Blink：闪烁 |
Text-decoration：none |
|
其他 |
||
|
Cursor |
Pointer（小手） |
cursor:pointer; |
|
Display |
Block：显示元素 None：隐藏元素 |
|
|
Opacity |
透明度：0-1（0.2） |
Opacity：0.2 |
|
Filter |
透明度：0-100 |
Filter:alpha(opacity=20) |
三、个人感受
我一共有三回，是因为多一个字母或者少一个字母而出错，然后也没有爆出具体哪里错了，就只能一步一步调，花了不少时间。因为不是用的VS嘛，所有的东西后面都是点不出来的，都是靠自己跟着视频写，老是出错，不过后面稍微熟练点了，出错的频率已看得见的速度在减少。但是，反思起来，还是因为自己不够细心。
好多的例子，尤其是当例子实现不了的时候，我就想着，要不就不实现了吧，但是，现在想想，我可以的，如果我认为我可以把它们都实现，那我就是可以把它们都实现。不管做什么，信心都是一个很重要的因素，决定自己是否能做成。