本節(jié)知識(shí)點(diǎn)-----
-
CSS知識(shí)點(diǎn)
- 如何寫漸變顏色的樣式？
谷歌 css gradient generate ,之后調(diào)試稱需要的效果；
代碼：
background: linear-gradient(to bottom, rgba(41,41,41,1) 0%, rgba(17,17,17,1) 100%);
效果：
js-17-01.png
- 通過設(shè)置多個(gè)
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
通過多個(gè)陰影的疊加來產(chǎn)生特殊的效果。
- background
background是CSS簡寫屬性，用來集中設(shè)置各種背景屬性。
background可以用來設(shè)置一個(gè)或多個(gè)屬性:background-color,background-image,background-position,background-repeat,background-size,background-attachment。
background-size: cover;----保證背景圖能夠在屏幕尺寸變化時(shí)充滿屏幕；
- display: flex;Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為 Flex 布局。行內(nèi)元素則可以使用
display: inline-flex;
注意，設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
本節(jié)中，將 kbd 元素變更為 inline-block 且指定 width height 后，其內(nèi)部文檔自動(dòng)位于左上角，現(xiàn)在要求其內(nèi)部文檔能在水平、垂直方向均能居中。
復(fù)習(xí)：之前章節(jié)的學(xué)習(xí)中已經(jīng)了解了一個(gè)水平布局的套路---float；此處再學(xué)習(xí)一個(gè)垂直方向布局的套路---flex；
套路如下：
display: inline-flex; //此處原容器為 inline 模式，
justify-content: center; //項(xiàng)目在主軸上的對齊方式，
align-items: center; //項(xiàng)目在交叉軸上的對齊方式，
你想讓一個(gè)元素絕對居中，只要在其父元素上添加上面套路3行。
-
JS知識(shí)點(diǎn)
- 錯(cuò)誤監(jiān)聽：
本節(jié)中的使用
imgXXX = document.createElement('img')
imgXXX.onerror = function(jgt){
console.log("錯(cuò)誤")
console.log(imgXXX)
jgt.target.src = "xxx"
}
- 獲取指定元素的前后兄弟元素方法
previousNode = node.previousSibling
nextNode = nodeObject.nextSibling
var button2 = dcve['target']
key2 = button2['id']
img2 = button2.previousSibling
小技巧
- 獲取某個(gè)網(wǎng)站的 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
