推薦網頁CSS排版的方式

之前做過很多網站的版型都是photoshop切出來的

透過table切出一大堆表格

切到亂78遭

原始碼也是亂到靠杯XD

雖然結果出來就跟photoshop作的版型一模一樣

可是這對程式設計師來講是件很想哭的事說

因為原始碼實在太亂

而且都被表格限制住

遇到這種情況只能硬著頭皮改......而且改的過程還要避免版型跑掉

會花掉超多沒必要的時間....


我個人比較推薦的做法是

用人家做好的版型~~~psd檔

抓取重要的圖出來跟背景圖成png檔

(做法是Duplicate Layer出一個新文件Trim之後再儲存 )

再用div的方式去放

不是table

至於抓定位的方式

先建立一個 div

css設定position:relative;

裡面的元素css設定position:absolute;

這樣就可以隨意設定這元素的位置

透過left跟top屬性

這樣真的非常方便定位說~~~~~~強力推薦XD


我在做網頁過程都會用FireBug

這用再調版型也是超級好用說~~~~~

因為他可以直接在網頁上調整css或是html~~~~這工具也是強力推薦



而且調整top或left還可以透過上下鍵調整~~~超貼心的功能


至於我核對原本photoshop作的版型是否一致

我是先在body設張背景圖~~~~就是整個版型的圖

然後再去做調整~~~~只是過程中要把div的透明度設定成0.7~0.8~~~這樣才可以做對齊