国产91成人精品亚洲精品,久久精品国产亚洲av麻豆,国产偷国产偷亚洲高清在线

[ZT]教你怎樣快速DIY自己的博客園SKIN

    授之魚，不如授之漁。我共享100個根據自己審美眼光制作的Skin還不如教大家怎么自己動手做呢～～畢竟大家審美眼光不一樣，在加上我本人又是色盲實在作不出什么好外觀來。

    工欲善其事必先利其器。首先得先教教大家怎么用先進武器，要不然用“查看源文件&抓圖”的方法做一個Skin恐怕要一整天。

    首先出場的是微軟的IEDevToolBar，這是一個免費的轉為Web開發人員制作的IE插件，做博客Skin時用到的主要功能有：

    1.以樹結構查看CodeDom，并查看每個Element屬性，可以使用鼠標點擊選中Element，這個在我們制作Skin時很有用
    2.生成圖片報表，就是將頁面上說有出現的圖片生成一份詳細的報表，這樣就省的我們自己去找圖片路徑和量圖片大小等等。
    3.高亮顯示表格，表格單元，Div等的邊框，這個在我們調整布局時也是很有用
    4.頁面尺子，可以然你任意在頁面上度量長度，這個是大大的提高了我們的工作效率，不用為了量個長度而抓圖再用畫圖工具量

    現在就趕快下載裝上吧，就算你不做Skin，我也強烈推薦你裝上，Web項目調整界面時它真的是用處很多啊

    下面出場的是ColorPic，這也是一個免費的軟件，用于拾取顏色的，鼠標移動到哪里就拾取哪里的顏色，可以對拾取的顏色分組，這樣我們就可以把需要的顏色都一次性拾取完，再慢慢的用了。拾取顏色和重新拾取時都是用Ctrl + G 快捷鍵，其它功能靠大家自己琢磨了。

    最后就是編輯器了，如果你是CSS高手那文本編輯器就夠了，如果你是和我一樣的業余水平，我建議還是選一個可以智能提示的編輯器，比如Dreamweaver或者用Visual Studio2005/2003也是可以的。

    工具搞定啦，開始來熱身吧，先講講博客園的CSS怎么自己定義，有些新來的朋友可能還不知道。

    先進入你的博客的后臺管理，然后選擇“選項”頁，接下來選擇“Configure”項，現在看到“通過CSS定制頁面”項了吧，你可以再這個文本框里放自己的CSS，記得不用加<style>標簽。

    不過我用的不是這種辦法，我是把自己的CSS加上<style>標簽放到“子標題”里，這是因為我原先用第一種辦法，好幾次遇到CSS效果突然顯示不出來，恢復到默認模板的樣式，我也不懂為啥這個得問DuDu哥啦，反正我用第二種方式就都不會再有這樣的問題了。

    光有CSS還不夠，博客園的自定義CSS是于原模板有關系的，比如一些id和class的命名在各個模板中是不一樣的，所以針對某個模板制作出來的CSS型Skin一般是不能通用的。

    接下來要講講博客園CSS定義習慣，一般模板上面會把頁面分成3大塊，一個是頂部標題，一個是菜單條（就是放文章分類和日歷，公告的那一條），一個是文章列表的主體。

    這3個大塊一般有自己的id或者class，如果是id定義CSS的話就使用#id這樣的格式，比如：
    #main
   {
        border:1px solid #FF0000;
        width:100%;
   }

如果是class那就是.class格式了，比如：
    .main
   {
        border:1px solid #FF0000;
        width:100%;
   }

（對CSS還不甚了解的朋友快去補補吧，嘻嘻，其實偶對CSS也是一竅不通，都是瞎搞自己博客的外觀積累的一點點經驗

）

每個模板都不一定用Class還是用ID，也不一定這3個大塊叫什么名字，我們如果用“查看源文件”那找起來可沒那么快了，現在就可以使用IEDevToolBar的View DOM功能了，View DOM提供了一個"Select Element by Click"功能，我們就可以使用鼠標選擇一個項，然后查看它的id了。

    抓到id和class名了就開始定義自己的CSS吧。

    首先需要把你的博客目前使用的模板的CSS文件下載下來，怎么下載？呵呵，“查看源代碼”大法咯，一眼就可以看到css文件了。

    下載下來后就直接根據你的需要修改吧，不過要注意！不要刪除原先的定義，比如border原先是定義成1px solid #FF0000，你不想要border的話，不要直接刪除boder定義，而要把border重新定義成0px none #FFFFFF，要不然不能覆蓋模板的CSS定義。

    呵呵，文章到此結束，你可以去自己定義自己的CSS了。(底下雞蛋，石頭亂飛)

    嘻嘻，其實真的已經夠了，可能唯一不夠的就是你的配色眼光和對CSS的熟練程度了。像我這種業余水準的人怎么配色和設計布局呢，呵呵，一句話：天下配色一大抄。

    我有時候路過好看的外國網站就用ColorPic去抓顏色然后配成自己的CSS，像我共享的幾個外觀都是從google的Blogger模板哪里抓取的配色，Blog布局一般都是那三大塊，很容易模仿過來的，有時候遇到ColorPic要抓連接的顏色時鼠標移動上去連接顏色變了，怎么辦。這時候就麻煩點抓圖，然后再抓圖上的顏色吧，人不可以太懶啦～～呵呵。

    嘿嘿，本來要抓張我偷Blogger模板顏色的罪證～～～結果抓取的時候ColorPic看不到～～那就沒辦法了，大家自己回去試哈。

    大家看完文章肯定都手癢了吧～～～祝大家DIY開心啦，做好了記得也發揚共享精神啊～～不共享也通知下，讓俺學習學習（保證不開ColorPic和DevToolBar），呵呵。

posted on 2010-06-08 00:23 梁良閱讀(310) 評論(0) 編輯收藏所屬分類: CSS

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: [ZT]用JavaScript修改CSS屬性 [轉]css透明、半透明層編寫跨瀏覽器兼容的 CSS 代碼的金科玉律使用css3仿造window7的開始菜單 5個實用的CSS3實例 [ZT]教你怎樣快速DIY自己的博客園SKIN float clear for css web標準常見問題大全讓FireFox與IE兼容

秋風的蕭瑟又見湖邊木葉飛

[ZT]教你怎樣快速DIY自己的博客園SKIN

導航

公告

常用鏈接

隨筆分類

隨筆檔案

相冊

.我的網站.

友情博客

開源社區

科技博客

資料網站

最新隨筆

搜索

最新評論

閱讀排行榜

本頁生成時間:毫秒

秋風的蕭瑟 又見湖邊木葉飛

[ZT]教你怎樣快速DIY自己的博客園SKIN

導航

公告

常用鏈接

隨筆分類

隨筆檔案

相冊

.我的網站.

友情博客

開源社區

科技博客

資料網站

最新隨筆

搜索

最新評論

閱讀排行榜

<a target="_blank"><img alt="&#x6211;&#x8981;&#x5566;&#x514D;&#x8D39;&#x7EDF;&#x8BA1;" src="http://img.users.51.la/3873812.asp" style="border:none" /></a> 本頁生成時間:document.write(Math.round(Math.random()*10000));毫秒

秋風的蕭瑟又見湖邊木葉飛

本頁生成時間:毫秒