●視覺加分!
我不習慣用無名相簿,網誌裡的圖片大多是放在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樣式表時,養成加上註解的習慣,方便以後修改,註解並不會影響網頁樣式。其寫法如下
/* 註解文字 */