17-进阶： 第一个JS作品

本节知识点-----

• CSS知识点

1. 如何写渐变颜色的样式？
   谷歌 css gradient generate ,之后调试称需要的效果；
   代码：

background: linear-gradient(to bottom, rgba(41,41,41,1) 0%, rgba(17,17,17,1) 100%);

效果：

js-17-01.png

2. 通过设置多个box-shadow来形成盒子四周不同的阴影效果
   代码：

box-shadow: 0 0 0 1px #1a1b1c, 0 0 0 2px #1f1f20,0 1px 0 2px #131313,
0 2px 0 2px #080808,0 3px 0 2px #000000,0 5px 1px 0 #121213;

效果：

js-17-02.png

通过多个阴影的叠加来产生特殊的效果。

3. background
   background 是CSS简写属性，用来集中设置各种背景属性。
   background 可以用来设置一个或多个属性:background-color, background-image, background-position, background-repeat, background-size, background-attachment。
   background-size: cover;----保证背景图能够在屏幕尺寸变化时充满屏幕；

4. display: flex;Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。行内元素则可以使用display: inline-flex;
   注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
   本节中，将 kbd 元素变更为 inline-block 且指定 width height 后，其内部文档自动位于左上角，现在要求其内部文档能在水平、垂直方向均能居中。
   复习：之前章节的学习中已经了解了一个水平布局的套路---float；此处再学习一个垂直方向布局的套路---flex；
   套路如下：

    display: inline-flex; //此处原容器为 inline 模式，
    justify-content: center; //项目在主轴上的对齐方式，
    align-items: center; //项目在交叉轴上的对齐方式，

你想让一个元素绝对居中，只要在其父元素上添加上面套路3行。

• JS知识点

1. 错误监听：
   本节中的使用

  imgXXX = document.createElement('img')
  imgXXX.onerror = function(jgt){
        console.log("错误")
        console.log(imgXXX)
        jgt.target.src = "xxx"
  }

2. 获取指定元素的前后兄弟元素方法

previousNode = node.previousSibling
nextNode = nodeObject.nextSibling

var button2 = dcve['target']
key2 = button2['id']
img2 = button2.previousSibling

小技巧

1. 获取某个网站的 icon 的方法，比如 qq.com 的 icon ：http://www.qq.com/favicon.ico

待用icon：

js-17-03-none.png

js-17-04-wenhao.png

js-17-04-wen.png

js-17-04-wenhao.png