干貨！設(shè)計(jì)師也能夠?qū)W習(xí)的前端常識(shí)part1

作為設(shè)計(jì)師的你們是否有過(guò)這樣的經(jīng)歷，當(dāng)你的設(shè)計(jì)能夠做成網(wǎng)頁(yè)訪問(wèn)的時(shí)分，各種富麗的網(wǎng)頁(yè)特效/交互展示是不是太招引了，這個(gè)時(shí)分你會(huì)特別崇拜前端工程師，覺(jué)得他們便是大神相同的存在。其實(shí)“前端”說(shuō)簡(jiǎn)略不簡(jiǎn)略，說(shuō)難也并沒(méi)有很難，有些前端常識(shí)，設(shè)計(jì)師也能夠?qū)W習(xí)運(yùn)用，甚至可能使設(shè)計(jì)能力有所提升。下面就設(shè)計(jì)師也能夠?qū)W習(xí)的前端常識(shí)，先來(lái)給我們講榜首部分內(nèi)容：

一、途徑聯(lián)系
先來(lái)看一個(gè)常見(jiàn)調(diào)用圖片的方法：
background:url(imges/01.jpg);
圖片、鏈接地址、款式文件、js文件……等都是常常需要外界支撐的東西，閱讀器經(jīng)過(guò)html標(biāo)簽內(nèi)的各式url地址去一一找到然后呈現(xiàn)出來(lái)，一旦地址錯(cuò)誤，比如找不到款式文件或許圖片，那網(wǎng)頁(yè)所呈現(xiàn)出來(lái)的就不知道神馬鬼了。所以，雖然大多數(shù)文件都能夠閱讀挑選并不需要手動(dòng)去敲，可是了解個(gè)中聯(lián)系，對(duì)處理問(wèn)題也是有必定優(yōu)點(diǎn)的。
如下圖，一個(gè)相對(duì)較完好的文件夾是醬紫的，包含主頁(yè)index和所需的款式文件、images、js等，哪怕款式文件就一個(gè)都要獨(dú)自建立一個(gè)文件夾，html文件一般放在其他文件的上層，可是html文件很多，或許分模塊的情況下也是需要建文件夾噠。看個(gè)人喜好啦……
index.html中要是需要引證images下的圖片01，地址為：images/01.jpg。

正常情況下，當(dāng)然不是一切東西都在一個(gè)頁(yè)面上處理啦，不僅款式要獨(dú)自放在一個(gè).css文件中，一切圖片也是要獨(dú)自放個(gè)文件夾的。
不同層級(jí)間要引證其他地方的文件時(shí)途徑該怎么寫呢？下面舉幾類的比如。
1）同級(jí)

以index.html為參考點(diǎn)，若再添加一張圖片（此處為舉例添加的02.jpg文件） ,要引證與自己同等級(jí)文件，不必寫別的了，直接文件名就OK了。例：url（02.jpg）;
2）下級(jí)

相同，以index.html為參考點(diǎn)，它要引證比他低一級(jí)的01.jpg，首要，01往上找，是它所屬的images文件夾，這個(gè)文件夾剛好與參考點(diǎn)同一級(jí)，即與01之間只跨一級(jí)，則運(yùn)用一個(gè)斜杠“/”,（向下兩級(jí)則是兩個(gè)斜杠哦）index想要引證images下的文件，首要得經(jīng)過(guò)images的贊同，所以途徑還要帶上它的“簽名”，最后得來(lái)途徑則是：url（images/01.jpg）；
3）上級(jí)

以index.css 為參考點(diǎn),想引證02.jpg ,首要還是得往上看，參考點(diǎn)歸于css文件夾，而02.jpg跟他爹“同輩”，可是不能直呼其名啊，所以用兩點(diǎn)“..”來(lái)代替，其實(shí)這兩點(diǎn)也能夠是總文件夾的代替名，由于對(duì)index.css來(lái)說(shuō)并無(wú)多大含義。
好了，找到規(guī)則了沒(méi)？假如index.css要找index.js文件該怎么找捏？這個(gè)，留給我們思考一下，嘿嘿……（提示一下，先往上找，再往下找）