导读:花了将近两个月,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嘛,所有的东西后面都是点不出来的,都是靠自己跟着视频写,老是出错,不过后面稍微熟练点了,出错的频率已看得见的速度在减少。但是,反思起来,还是因为自己不够细心。

好多的例子,尤其是当例子实现不了的时候,我就想着,要不就不实现了吧,但是,现在想想,我可以的,如果我认为我可以把它们都实现,那我就是可以把它们都实现。不管做什么,信心都是一个很重要的因素,决定自己是否能做成。

【JavaScript 14—学习总结】:从小事做起的更多相关文章

  1. 正则表达式(javascript)学习总结

    正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...

  2. JavaScript 基础学习1-day14

    JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...

  3. JavaScript紧凑学习

    JavaScript紧凑学习 windows本地,调用命令行: win键+R 键入cmd , (cmd是Command 命令行 简称) 目录是C盘下的 C:\Users\Administrator&g ...

  4. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  5. [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  6. javascript正则表达式 - 学习笔记

    JavaScript 正则表达式 学习笔记 标签(空格分隔): 基础 JavaScript 正则表达式是用于匹配字符串中字符组合的模式.在javascript中,正则表达式也是对象.这些模式被用于Re ...

  7. Javascript的学习清单

    Javascript的学习清单 Javascript学习资源 程序员必读书籍 深入理解JavaScript系列 es6教程 jQuery中文文档 vue官网 zeptojs中文版 常用的插件与UI组件 ...

  8. javascript立体学习指南

    javascript立体学习指南第一章:首先了解javascript 首先,什么是javascript? JavaStrip出生于1995年,是一种文本脚本语言,成都装修公司是一种动态的.弱类型的.基 ...

  9. JavaScript日常学习2

    JavaScript 数据类型    字符串(String).数字(Number).布尔(Boolean).数组(Array).对象(Object).空(Null).未定义(Undefined). e ...

随机推荐

  1. debian使用apt安装时出现“更换介质,插入驱动器"/media/chrom/"再按回车键”的提示,无法从网络安装,解决?

    原文链接:https://www.zhihu.com/question/22132663 nano /etc/apt/sources.list把那出现的那行注释掉:含CD盘的一行:然后apt-get ...

  2. 【cpp】new delete

    double *M = new double[2*num]; double *T = new double[2 * num]; double *activeM = new double[2 * num ...

  3. uvm_driver——老司机带带我

    文件:src/comps/uvm_driver.svh类: uvm_driver uvm_driver继承(C++中叫继承)自uvm_component,其中定义了两个Ports:seq_item_p ...

  4. MySQL性能优化奇技淫巧

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引.   2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使 ...

  5. iTOP-IMX6UL 实战项目:ssh 服务器移植到 arm 开发板

    实验环境:迅为提供的Ubuntu12.04.2 以及虚拟机 编译器:arm-2009q3 编译器 开发板系统:QT系统   开发板使用手册中给Windows 系统安装了 ssh 客户端,给 Ubunt ...

  6. sourcegrid统计报表画法以及EXCEL导出内容代码完全版

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. vue watch 监听

    1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console. ...

  8. 双击窗体是模拟键盘上的Tab键

    实现效果: 知识运用: SendKeys类的Send方法 //向活动应用程序发送击键 public static void Send (string keys) 实现代码: private void ...

  9. RLock(递归锁)

    import threading, time def run1(): print("grab the first part data") lock.acquire()#进入大门后的 ...

  10. Web中打印的各种方案参考

    http://blog.csdn.net/chinahuyong/article/details/42527491