拍立得樣式的精緻照片框!! |
描述 現在大家都可以試試看囉! 語法如下: <div style="width:232px;padding:10px 10px 20px 10px; border-width:1px 2px 2px 1px; border-style:solid; border-color:black; background:white;float:right;"><img src="圖片路徑" style="border:1px solid #999999" /><p style="margin:4px 0; font:7pt/180% verdana;letter-spacing:1px;color:#999999;text-align:right">照片描述<br><b>照片日期<br>photo by ???</b></p></div> 分別修改紅字部份的width:為圖片的寬度並+20,加入圖片路徑及照片描述/日期/名稱後即可!密密麻麻的是吧! 我們拆開來看囉! 拿掉CSS的樣式描述後,是這樣的.... <div style=""><img src="" style=""><p style=""></p></div> 藍色部份為圖片的語法加樣式... 紅色的部份為文字描述的區塊語法... 而最外層的 DIV 區塊就是描述大體樣式的關鍵囉! 最外層的 DIV 區塊的 CSS 描述分解(也就是""內的語法): width:212px; <------DIV 區塊的寬度! padding:10px 10px 20px 10px; <-----DIV 區塊的內距! border-width:1px 2px 2px 1px; <-----DIV 區塊的邊框粗細! border-style:solid; <-----DIV 區塊的邊框風格樣式! border-color:black; <-----DIV 區塊的邊框顏色! background:white; <-----DIV 區塊的背景顏色! float:right; <-----DIV 區塊的位置! 藍色部份的 img 圖片語法中, Style="" 的 CSS 描述分解(也就是""內的語法): border:1px solid #999999; <-----邊框的 粗細 風格樣式 顏色! 紅色的部份的 p 文字描述區塊中, Style="" 的 CSS 描述分解(也就是""內的語法): margin:4px 0; <-----p 文字區塊的外距! font:7pt/180% verdana; <-----p 文字區塊內的文字 字級/行距 字型! letter-spacing:1px; <-----p 文字區塊內的單字間距! color:#999999; <-----p 文字區塊內的文字顏色! text-align:right; <-----p 文字區塊內的文字位置! |
全站熱搜
留言列表