【JavaScript 14—学习总结】:从小事做起
导读:花了将近两个月,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—学习总结】:从小事做起的更多相关文章
- 正则表达式(javascript)学习总结
正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...
- JavaScript 基础学习1-day14
JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...
- JavaScript紧凑学习
JavaScript紧凑学习 windows本地,调用命令行: win键+R 键入cmd , (cmd是Command 命令行 简称) 目录是C盘下的 C:\Users\Administrator&g ...
- 大量Javascript/JQuery学习教程电子书合集
[推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- javascript正则表达式 - 学习笔记
JavaScript 正则表达式 学习笔记 标签(空格分隔): 基础 JavaScript 正则表达式是用于匹配字符串中字符组合的模式.在javascript中,正则表达式也是对象.这些模式被用于Re ...
- Javascript的学习清单
Javascript的学习清单 Javascript学习资源 程序员必读书籍 深入理解JavaScript系列 es6教程 jQuery中文文档 vue官网 zeptojs中文版 常用的插件与UI组件 ...
- javascript立体学习指南
javascript立体学习指南第一章:首先了解javascript 首先,什么是javascript? JavaStrip出生于1995年,是一种文本脚本语言,成都装修公司是一种动态的.弱类型的.基 ...
- JavaScript日常学习2
JavaScript 数据类型 字符串(String).数字(Number).布尔(Boolean).数组(Array).对象(Object).空(Null).未定义(Undefined). e ...
随机推荐
- springMVC 与 struts+hibernate+spring优缺点
springMVC: Spring 框架是高度可配置的,而且包含多种视图技术,例如 JavaServer Pages(JSP)技术.Velocity.Tiles.iText 和POI.Spring M ...
- APP产品体验
一.前言 1.背景介绍 体验人员:羽珞体验时间:2016.4.12~2016.4.14 2.体验环境 产品名称 产品版本 测试设备 设备系统 易助(ehlep) 1.0 TCL J738M A ...
- JS 一个页面关闭多个页面
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- 1.JOIN和UNION区别
1.JOIN和UNION区别join 是两张表做交连后里面条件相同的部分记录产生一个记录集,union是产生的两个记录集(字段要一样的)并在一起,成为一个新的记录集 . JOIN用于按照ON条件联接两 ...
- Vue-Quill-Editor 富文本编辑器的使用
步骤如下: 1.下载Vue-Quill-Editor npm install vue-quill-editor --save 2.下载quill(Vue-Quill-Editor需要依赖) npm i ...
- OpenCV2:第八章 界面事件
一.简介 OpenCV中提供了程序界面中的鼠标和键盘事件 二.鼠标事件 // 设置鼠标回调函数 void setMouseCallback ( const string& winname, ...
- js 两个数组对象根据账号比较去重,解决直接splice后数组索引改变
目的获取Arr2中不包含在arr1中的对象 根据Account进行比较,如果相等则删除tempArr数组对象. 结果返回张三 var arr1=[{"account":" ...
- Luogu P3627 抢掠计划
题目传送门 \(Tarjan\)缩点+SPFA最长路 #include<iostream> #include<cstdio> #include<cstring> # ...
- TCP/IP各种数据包结构体
下面这些TCP/IP数据包是我在进行Socket及Wipcap网络编程过程中曾经用到过的数据包结构体, 这些东西平时看起来不起眼,真正用到的时候就会觉得非常有用...... 以太帧头格式结构体,共14 ...
- ios runloop学习
今天突然才之间才意识到NSTimer这样的运行方式,是在多线程中实现的循环还是在主线程中去实现的呢.当然不可能是在主线程中的while那么简单,那样什么都干不了,简单看了下NSTimer是以同步方式运 ...