掛在網路上。葵

關於部落格
說是喜怒哀樂 也不為過
  • 17134

    累積人氣

  • 0

    今日人氣

    0

    訂閱人氣

照片變成拍立得的樣式

讓照片變成拍立得的樣式~

想要讓圖片變個造型,可是又不太會用那些修圖軟體,怎麼辦勒?

沒關係,只要套用CSS語法就可以簡單成型囉~

只要複製語法 ,修改的部份只有紅色字部份!

<div style="width:249 px;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>

※重點就是
249  中的數字249 改成你圖片的寬在加大一點。 例如 本圖片的寬是239+10=249

※重點就是 249  中的數字249 改成你圖片的寬在加大一點。 例如 本圖片的寬是239+10=249



想要更了解或是變花樣的,可以來看一下~

這個語法可以分成三段式來看,我們來分成藍色 橘色 綠色

<div style="width:249 px;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>

 

最外層的 DIV 區塊的 CSS 描述:

<div style="width:249 px;padding:10px 10px 20px 10px; border-width:1px 2px 2px 1px; border-style:solid; border-color:black;background:white;float:right;"></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 區塊的位置,這是指這張照片在這塊文章的位置。(所以你看到這張照片靠右)

※ padding 跟 border-width 後方的數字是指邊框的 上 右 下 左 (順時針方向) 要空一格!
※邊框線條屬性包括隱藏(hidden)、點狀線(dotted)、虛線(dashed)、實線(solid)、雙線(double)、凹陷(groove)、凸起(ridge)、嵌入(inset),以及鑲出(outset)等。可以玩看看~


<img src="圖片網址" style="border:1px solid #999999" >

橘色部份的是 img 圖片語法:
border:1px solid #999999;  ← 邊框的 粗細 風格樣式 顏色!

橘色部份的是 img 圖片語法: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>

綠色的部份的 p 文字描述區塊中:
margin:4px 0;   ← p 文字區塊的外距!
font:7pt/180% verdana; ← p 文字區塊內的文字 字級/行距 字型!
letter-spacing:1px; ← p 文字區塊內的單字間距!
color:#999999; ← p 文字區塊內的文字顏色!
text-align:right; ← p 文字區塊內的文字位置!

相簿設定
標籤設定
相簿狀態