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

原创 2015年11月20日 22:35:45

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

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

今天学习的不多,就来总结一下前些天的学习内容吧。方便以后查询和温习。首先,...
  • jx370
  • jx370
  • 2015年11月20日 19:43
  • 159

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

今天是南大软院大神养成计划实施的第十六天,今天继续学习jQuery基础。 一.过滤性选择器 该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元...
  • qq_23418043
  • qq_23418043
  • 2015年12月01日 10:07
  • 228

南大软院大神养成计划第九天

今天分享一段代码,效果如附图, 代码如下: /> 高度自适应的三行三列宽度固定布局 *{ margin:0; padding:0; font-size:14p...
  • jx370
  • jx370
  • 2015年11月24日 23:59
  • 202

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

参加比赛的第一天 也是第一次写博客 心情是激动地 感觉不要不要的  但是依旧还是要开始的  那么就开始吧  干巴爹 第一天的战况 感觉自己的进度好慢 但是看看...
  • YaKIcoo
  • YaKIcoo
  • 2015年11月16日 23:03
  • 237

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

今天是南大软院大神养成计划实施的第十四天,离结束越来越近了,我也要加紧学习了。今天学习的主要内容是jS动画剩下的部分——链式运动和同时运动和一些动画案例。 链式运动: 什么是链式运动呢?链式运动就...
  • qq_23418043
  • qq_23418043
  • 2015年11月29日 20:36
  • 257

南大软院大神养成计划--day13

我要做的是一个点击商品的购物栏,实现点击商品可以获得商品的详情信息,并且可以保存浏览记录。这里面用的是Model1:JSP+Javabean来实现。 首先,这里面有三个类,DBHelper,实体类和业...
  • TimeSea
  • TimeSea
  • 2015年11月28日 09:19
  • 177

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

今天是南大软院大神养成计划实施的第十三天,今天学习的主要内容是JS动画效果。 在浏览网页时候,我们经常会看到一些动画,有一些是flash动画,有一些则是用js编写的js动画,比如我们鼠标移动在某一个...
  • qq_23418043
  • qq_23418043
  • 2015年11月28日 20:38
  • 173

南大软院大神养成计划--day01

首先感谢南昌大学软件学院可以给我们这个一个机会来自己自主独立完成一些大学生本应该多做的事情:多学习,多总结。开卷有益,但最难的还是持之以恒,作为一个Web前端的初学者,希望可以通过此次比赛增长自己的业...
  • TimeSea
  • TimeSea
  • 2015年11月16日 22:16
  • 227

南大软院大神养成计划--day03

我从今天开始学习JSP网页编程语言,今天在主要学到的知识点是有关tomcat服务器的介绍,安装以及使用。之后介绍了其目录下的web-Inf 文件和web.xml等。今天的学习都是零碎的知识点,所以我把...
  • TimeSea
  • TimeSea
  • 2015年11月18日 23:36
  • 180

南大软院大神养成计划--day17

今天学习的是Servlet路径跳转。 1: 使用相对地址(小例子) : 这里面用的是相对路径访问HelloServlet。 这里面的servlet是工程的包名,HelloServlet是类名,这里注意...
  • TimeSea
  • TimeSea
  • 2015年12月02日 13:37
  • 236
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:南大软院大神养成计划——第五天
举报原因:
原因补充:

(最多只允许输入30个字)