最近我開始學(xué)習(xí)網(wǎng)頁設(shè)計，發(fā)現(xiàn)了一個問題：好像psd轉(zhuǎn)css這一步非常麻煩。但是，我深入了解了一下，發(fā)現(xiàn)其實這只是一個初學(xué)者的錯覺。

代碼例子：
.psd-to-css {
position: relative;
margin: 0 auto;
width: 1200px;
height: 800px;
background-color: #ffffff;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

首先，進行psd轉(zhuǎn)css需要你在設(shè)計階段考慮到網(wǎng)頁結(jié)構(gòu)。這就意味著，你在設(shè)計psd文件時要按網(wǎng)頁元素進行分組，如頭部、導(dǎo)航、側(cè)邊欄、主體內(nèi)容等等。如果你已經(jīng)按網(wǎng)頁結(jié)構(gòu)進行了設(shè)計，那么轉(zhuǎn)換成css其實就很簡單了。

其次，你需要了解一些基本的圖像處理知識。在將設(shè)計變成css時，你需要將psd文件中的圖片轉(zhuǎn)換成適合網(wǎng)頁中使用的格式，如jpg、png等。而且，你還需要要將psd文件中的文字轉(zhuǎn)換成網(wǎng)頁上可識別的字體格式，如ttf、woff。

代碼例子：
.logo {
display: inline-block;
width: 150px;
height: 50px;
background: url("../images/logo.png") no-repeat;
text-indent: -9999px;
}

最后，進行psd轉(zhuǎn)css需要一定的技術(shù)功底。除了需要了解基本的HTML、CSS知識，還需要一定的JavaScript知識?，F(xiàn)在，有很多的工具可以輔助我們完成這些工作，如Photoshop插件「CSS Hat」、在線轉(zhuǎn)換工具「Zeplin」。這些工具能夠幫助你更快速地將psd轉(zhuǎn)換成css。

總的來說，進行psd轉(zhuǎn)css并不是很麻煩，只要你在設(shè)計階段考慮到網(wǎng)頁結(jié)構(gòu)，學(xué)習(xí)基本的圖像處理知識和技術(shù)功底，借助一些工具，那么轉(zhuǎn)換的過程是輕松而有成效的。