干貨！設計師也能夠學習的前端常識part1

作為設計師的你們是否有過這樣的經歷，當你的設計能夠做成網頁訪問的時分，各種富麗的網頁特效/交互展示是不是太招引了，這個時分你會特別崇拜前端工程師，覺得他們便是大神相同的存在。其實“前端”說簡略不簡略，說難也并沒有很難，有些前端常識，設計師也能夠學習運用，甚至可能使設計能力有所提升。下面就設計師也能夠學習的前端常識，先來給我們講榜首部分內容：

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

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

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

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

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