歡迎來(lái)到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線:400-099-8848

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

發(fā)布時(shí)間:2020-12-07 文章來(lái)源:本站  瀏覽次數(shù):2804

作為設(shè)計(jì)師的你們是否有過(guò)這樣的經(jīng)歷,當(dāng)你的設(shè)計(jì)能夠做成網(wǎng)頁(yè)訪問(wèn)的時(shí)分,各種富麗的網(wǎng)頁(yè)特效/交互展示是不是太招引了,這個(gè)時(shí)分你會(huì)特別崇拜前端工程師,覺得他們便是大神相同的存在。其實(shí)“前端”說(shuō)簡(jiǎn)略不簡(jiǎn)略,說(shuō)難也并沒有很難,有些前端常識(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è)常見調(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ī)則了沒?假如index.css要找index.js文件該怎么找捏?這個(gè),留給我們思考一下,嘿嘿……(提示一下,先往上找,再往下找)

上一條:卡片規(guī)劃的三大長(zhǎng)處你知道...

下一條:網(wǎng)頁(yè)規(guī)劃中那些重要細(xì)節(jié)要...