想要更突顯照片特色嗎?![](http://pic.wretch.cc/icon/blog/smiley/msn/lightbulb.gif)
今天要教大家如何做出一個類似拍立得樣式相片框
我自己也是愛用者呢!!
因為這會讓照片看起來很精緻![](http://pic.wretch.cc/icon/blog/smiley/msn/heart.gif)
分別修改紅字部份的width:為圖片的寬度並+20,加入圖片路徑及照片描述/日期/名稱後即可!
密密麻麻的是吧! 我們拆開來看囉!
拿掉CSS的樣式描述後,是這樣的....
![]()
藍色部份為圖片的語法加樣式...
紅色的部份為文字描述的區塊語法...
而最外層的 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 文字區塊內的文字位置!
![](http://pic.wretch.cc/icon/blog/smiley/msn/lightbulb.gif)
今天要教大家如何做出一個類似拍立得樣式相片框
我自己也是愛用者呢!!
因為這會讓照片看起來很精緻
![](http://pic.wretch.cc/icon/blog/smiley/msn/heart.gif)
width:232px;padding:10px 10px 20px 10px; border-width:1px 2px 2px 1px; border-style:solid;bordercolor:black;background:white;float:right;"> 照片描述 |
分別修改紅字部份的width:為圖片的寬度並+20,加入圖片路徑及照片描述/日期/名稱後即可!
密密麻麻的是吧! 我們拆開來看囉!
拿掉CSS的樣式描述後,是這樣的....
藍色部份為圖片的語法加樣式...
紅色的部份為文字描述的區塊語法...
而最外層的 DIV 區塊就是描述大體樣式的關鍵囉!
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 區塊的位置!
Style="" 的 CSS 描述分解(也就是""內的語法):
border:1px solid #999999; <-----邊框的 粗細 風格樣式 顏色!
Style="" 的 CSS 描述分解(也就是""內的語法):
margin:4px 0; <-----p 文字區塊的外距!
font:7pt/180% verdana; <-----p 文字區塊內的文字 字級/行距 字型!
letter-spacing:1px; <-----p 文字區塊內的單字間距!
color:#999999; <-----p 文字區塊內的文字顏色!
text-align:right; <-----p 文字區塊內的文字位置!
全站熱搜