干貨！規劃師也能夠學習的前端常識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文件該怎樣找捏？這個，留給我們考慮一下，嘿嘿……