1. 程式人生 > >利用psd文件寫出html css結構的流程

利用psd文件寫出html css結構的流程

ace html -- 樣式 一律 .com 頂部 鼠標 註意

1、拿到psd文件後先大概定義頁面的div結構,然後一行一行的寫,

ctrl + r 顯示隱藏標尺 右擊 標尺 --- 把裏面的單位一律改為像素,

alt + -可以放大縮小psd文件,

space+鼠標左鍵可以拉動psd文件

ctrl+d可以取消選區

1>刪除默認的內外邊距。

技術分享圖片

先寫頂部的HTML結構

技術分享圖片

後寫頂部的CSS樣式。註意版心居中,利用margin:0 auto實現盒子的居中顯示,註意文本只能用text-align:center來實現。

技術分享圖片

再布局頭部的內部div,一個左浮動,一個右浮動。

技術分享圖片

學會Photoshop切片工具的使用,將切片保存下來方便使用。導出切片: 文件-- 存儲為web設備所用格式

技術分享圖片

切片刪除,利用切片選擇工具+delete鍵,或者利用視圖--->清除切片就可以刪除所有切片。

技術分享圖片

技術分享圖片

技術分享圖片

切圖時不想把不需要的元素切進去,可以利用自動選擇功能把不需要的元素隱藏技術分享圖片

選中某個圖層,然後對該圖層進行切片的方法。

技術分享圖片

利用psd文件寫出html css結構的流程