zoukankan      html  css  js  c++  java
  • 【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嘛,所有的东西后面都是点不出来的,都是靠自己跟着视频写,老是出错,不过后面稍微熟练点了,出错的频率已看得见的速度在减少。但是,反思起来,还是因为自己不够细心。


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




  • 相关阅读:
    AcWing 1135. 新年好 图论 枚举
    uva 10196 将军 模拟
    LeetCode 120. 三角形最小路径和 dp
    LeetCode 350. 两个数组的交集 II 哈希
    LeetCode 174. 地下城游戏 dp
    LeetCode 面试题 16.11.. 跳水板 模拟
    LeetCode 112. 路径总和 递归 树的遍历
    AcWing 1129. 热浪 spfa
    Thymeleaf Javascript 取值
    Thymeleaf Javascript 取值
  • 原文地址:https://www.cnblogs.com/hhx626/p/6010415.html
Copyright © 2011-2022 走看看