比爾用這篇文章花了真多時間@@( 其實是偷懶了好長一段時間 )
近期因為工作上突然忙了些
所以常回到家就總想殺個一場*.* ( 比爾目前最多還是在玩"魔獸三國" , 有興趣的同好約一下GCC吧^ ^)
但是常常因為這樣就一個晚上去了超過一半咧~~~
而且結束之後總是又懶得動手了 , So.... It's taking so long long time ...Ha Ha Ha
但現在就且看比爾把它說的清楚一點 , 讓大家可以用得更明白囉^ ^
基本上精簡版那篇把整個設定的過程都講過去了 ,
Step 1 . 設定CSS
Step 2 . 在文章中用自訂html標籤包住所要區塊 , 這樣就完成囉
那麼這一篇 , 比爾就主要針對CSS設定的那個自訂部份 , 來對於可以運用的參數逐一做說明囉~~~
完整的範例如下 :
.billsays {
display: block; ---->1
font-family: Courier New;---->2
font-size: 8pt;---->3
overflow:auto;---->4
max-height:200px;---->5
border: 1px solid #ccc;---->6
padding: 8px 0px 0px 8px;---->7
line-height: 1.2em;---->8
background: #f0f0f0 url---->9(http://sites.google.com/site/bktbktbkt/Home/billsays/title.gif) left top repeat-x;
}
而正常的標準結果是:
那接下來比爾就依照這邊所標示的9個用到的設定參數逐一做說明囉^ ^
1. display: block; , 這個就是設定區塊所展現的方式 , 設定為獨立的區塊 , 就爬文所知 , 是可以防止部分瀏覽者的IE邊界設定所產生的bug , 可以避免展示出來怪怪的或跑掉囉.
2. font-family: , 這個是設定該區塊所要展現的文字字型 , 可以設定不只一種 , 瀏覽器依序去選擇可以展示的字型 , 例如如果我設定 "細明體","Times New Roman" , 則其中的中文字就會變成細明體 , 而至於英文字的部分應位沒法套細明體 , 就會變成 Time New Roman囉( 基本上字型的表示字串 , 都跟在WORD中看到的一樣囉) 說明參照
3. font-size: , 一看就知道啦@@ , 設定文字大小
4. overflow: , 設定當區塊內容超過區塊定義大小的時候 , 所要展現滾軸的方式 , 比爾設定的是auto ,也就是真的超過的話 , 自動補X 或 Y 軸的滾軸來呈現 ( 這個部份其實也要搭配區塊的大小限制來考量 , 超過了才考慮囉~~) 說明參照
5. max-height: , 這個設定就是區塊的最大高度囉 , 搭配overflow的設定 , 如果內容呈現要超過最大高度 , 就會出現 X軸的滾輪囉 ( 如下 ), 當然也可以設定max-width囉^ ^
6.border: , 設定區塊的邊界囉 , 比爾所用的是畫素1( 1px )的實線 ( solid ), 顏色為偏黑( #ccc )囉
7.padding: , 這個是設定內容與邊界的距離 , 依序為上 , 右 , 下 , 左 的順序 , 比爾給個誇張一點的範例 , 20px 40px 60px 80px ,就變成了下面這樣囉^ ^ 說明參照
8.line-height: 設定區塊內 , 文行的最大高度 , 當然也可以設定 pt , cm( 公分 ) , in( 英吋 )等單位 , 但是有看過人家的建議 , 採用em這個繼承的單位方式 , 可以避免掉很多顯示上混亂和調整上的麻煩囉^ ^ 說明參照
9. background: , 這個部份就是設定區塊的背景囉 , 也是比爾覺得最重要的部份 , 最能展現出自己自定區塊的方式 . 比爾前面的第一個參數 #f0f0f0 , 就表示區塊底色會是淡灰色 , 而另外後面接的 url (http://xxxxxx/) left top repeat-x;的部份 , 就是在區塊上展示一張圖片 , 靠左靠上放置 , 只在X軸的方向上重複 , 所以如果當比爾這邊所連結到的圖示不夠寬的話 , 就會重複囉...
而至於想要找個地方存放自己所想要存取的網頁相關資源 , 比爾之前有嘗試了Google"協作平台" , 還算不錯用囉 ~~~詳情可以看比爾Google Sites 協作平台~~~不錯的網頁資源存放選擇^ ^
基本上對於個人化區塊的部份 , 比爾就介紹這些比較常用的參數囉 ....
而其實很多部分比爾也是在看到類似的範例之後來改進成自己所想要的樣子 , 翻找網頁其實真的可以看到不少可用資源與說明等等 , 多家花點時間 , 網頁設計的生手要變成部落格布置的高手 , 其實真的不難唷^ ^
沒有留言:
張貼留言