●視覺加分!

我不習慣用無名相簿,網誌裡的圖片大多是放在Flickr裡,以前時間比較多,還會對圖片的做邊框處理。但現在比較忙,我想多花點時間充實文章內容,但又喜歡像Blogspot裡的文章圖片自動加上優質邊框的感覺,要怎麼做呢?

很簡單,在你的CSS語法裡加入以下的語法就行了(紅字部分)

/* 文章內圖片外框 顏色:灰 粗細:1px 樣式:實線 邊框空白距離:6px */
                                                                   
.innertext p img{                                         
                border:1px solid #C0C0C0; 
                padding:6px;                               
                margin-bottom:0px;              
                margin-top:0px;                          
                }                                                 
                                                                       

語法說明

主要用到的是border及padding這二個屬性,邊框線的粗細、樣式、顏色都可以依自己的網頁風格加以調配。而margin的部分則是依個人喜好決定,想讓文字離圖片的距離有個完美比例,就調整一下吧。我是習慣用段落隔開了…orz,以下是細部語法說明。

border: 邊框設定。1px→邊框粗細。solid→邊框樣式。#C0C0C0→色碼
padding:元件和邊緣的距離。
margin-bottom:文字和底部邊緣的距離。
margin-top:文字和頂部邊緣的距離。

另外推薦大家在修改CSS樣式表時,養成加上註解的習慣,方便以後修改,註解並不會影響網頁樣式。其寫法如下

 /*  註解文字  */

elusiveboy 發表在 痞客邦 留言(2) 人氣()