南大软院大神养成计划——第五天

今天是南大软院大神养成计划实施的第五天，今天终于学习完了HTML和css基础，这速度，我觉得还好吧，毕竟我也是有基础的人。今天学习了"HTML和css基础"的最后一部分——实践部分。在这个部分，主要讲解的是“导航条菜单的制作”和“固定层效果”这两个经常在网页出现的效果。

先讲讲“导航条菜单的制作”，在这个部分，就是讲解了如何去制作一个可以商用的导航条，我们常常在一个网站的首页，它们就用一个导航栏去引导用户去浏览它们的网站，这也是导航条菜单的功能。导航栏是如何制作的呢？在学习之前，我可能会用div去制作，毕竟我是初学者，初学者的想法就是先考虑css样式再考虑结构的，但是学习之后，我开始学习从结构开始入手了，所以制作导航栏，我想到了ul标签，搭建好结构后，就可以考虑css样式了，讲师讲到了如何用一张圆角矩形图片，然后导航栏的分栏变为圆角矩形的，就是用了background-position设置，然后又讲到了如何进行水平拉伸，垂直拉伸。这些效果以前我都没有想到如何去制作出来，今天学习到了，垂直拉伸，由于只改变了高度，所以只需设置height就行了，鼠标覆盖时高度变高，离开时变矮，水平拉伸的就有点麻烦，用到了JavaScript，由于要有滑动的效果，所以设置了一个定时器setinterval，然后拉伸到一定限度后结束定时器clearinterval，这些对于初学者有点麻烦，而且前面的课程都没有讲到关于JavaScript的课程，所以我感觉这个计划适合于已经学完了网页基础语法的同学。当然在讲到水平伸缩时，讲师讲到了第二种方法去实现，就是用jquery，用了这个就可以大大简化代码，我感觉jQuery有点类似于mfc，都是封装了基础的语句，然后简化代码。

第二个实践内容就是固定层效果。大家常常去浏览网页的时候，应该会发现网页有一个部分无论你怎么滚动滚动轴它都不会动，这就是固定层。固定层实现原理就是设置了绝对定位中的fixe的，设置为fixed的块元素将以可视化窗口为基准，相当于以我们的浏览器的界面为标准进行定位了，所以跟网页文件流已经没有关系了，我们可以设定上下左右的位置，然后实现我们想要的固定层效果。

上面就是今天学到的内容，也是整个html和css基础的最后一部分。学完了html和css基础后，给我最大的收获是什么？对于那些初次接触网页编程的人来说，也许是那些标签，css样式，但是对于一个以前已经学习过相关基础的人来说，我收获最大的是分析效果图的方法，和符合w3c标准编程，这些对于想从事网页设计开发的人员来说，是必须要掌握的知识，没有这些知识作为领导，虽然最终也许我们可以实现相关的效果，但是对于后期的修改与维护是非常困难的，到时候也许自己都看不懂自己写的是什么代码了。

学习了最轻松的一部分——css和html基础，接下来就是比较难的JavaScript的课程了，期待明天的学习。