[CSS] 拍立得樣式照片框

Tags:
Sunday, September 12th, 2004 at 9:22 am

參考自 Royboy Weblog 拍立得樣式的精緻照片框

<div style="width:400px;padding:10px 10px 20px 10px; border-width:1px 2px 2px 1px; border-style:solid; border-color:black; background:white;float:right;"><img src="圖片路徑" width="400px" style="border:1px solid #999999" /><p style="margin:4px 0; font:7pt/180% verdana;letter-spacing:1px;color:#999999;text-align:right">照片描述<br>照片日期<br>photo by</b></p></div>

修改紅字部份的 width 為圖片的寬度並+20
加入圖片路徑及照片描述/日期/名稱後即可

Posted in 網頁調教
by hsuyo
3 Comments

[CSS] 圖片陰影語法

Tags:
Saturday, July 31st, 2004 at 11:22 pm

參考 Royboy Weblog 的這篇文章，利用修改 CSS 讓圖片有陰影的效果，

Step1
到這邊下載想要的陰影樣式

Step2.
修改 CSS ，加入:

.shadow1,
.shadow2,
.shadow3 {display:inline-table}
.shadow1 {float:left;background:URL(路徑/shadow.gif) right bottom no-repeat}
.shadow2 {background:URL(路徑/corner_bl.gif) left bottom no-repeat}
.shadow3 {padding:0 6px 6px 0;background:URL(路徑/corner_tr.gif) right top no-repeat}
img.border{border-right:1px solid #999;border-bottom:1px solid #999;border-top:1px solid #ccc;border-left:1px solid #ccc}

  • img.border{border-right:1px solid #999;border-bottom:1px solid #999;border-top:1px solid #ccc;border-left:1px solid #ccc}

    • 可自行修改

    Step3.
    使用方法

    <div class="shadow1"><div class="shadow2"><div class="shadow3"><img src="圖片路徑" class="border"></div></div></div>
    <br style="clear: both;" />

  • <br style="clear: both;" /> 表示強制換行

    • 完成範例:

    copyright reserved by hsuyo


    Posted in 網頁調教
    by hsuyo
    1 Comment

    [CSS] 文章段落首字放大

    Tags:
    Thursday, July 29th, 2004 at 12:12 am

    Zonble 在這篇文章提供了能將文章段落首字變大的外掛，我昨天試了一下似乎沒有作用，後來桑葚發現一些問題，把它修正了，文章在此。

    然而，我現在用的方法是桑葚之前介紹比較簡單的用法，透過修改 CSS，再配合標籤，即可隨心所欲的將段落首字變大了，做法如下:

    閱讀全文 »

    Posted in 網頁調教
    by hsuyo
    3 Comments