今天是南大软院大神养成计划实施的第五天,今天终于学习完了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的课程了,期待明天的学习。