[CSS]IMG既邊效果請教 - 網頁製作區

eric1990
0044794

頭銜: King

帖子: 927

精華: 0

積分: 12468 點

現金: 0 元

存款: 503 元

閱讀權限: 30

註冊: 2006-5-9

狀態: 離線

#1

大中小

發表於 2008-9-28 16:54 資料個人空間短消息加為好友

[CSS]IMG既邊效果請教

想問下以下效果CSS要點做???
如果可以既解釋一下D CSS係點解

QUOTE:

效果1:

圖片:

QUOTE:

效果2:

圖片外有一條白色邊，再外面有一條灰色邊
指標移過去時，最外既灰色邊會變成黑色
呢個點整?

我很厲害的，我會用電腦上網、用鍵盤打字、用滑鼠移動指標，
最厲害都是我會按開關制來開電腦。

tytsim
0018651

頭銜: Lord

帖子: 309

精華: 0

積分: 2831 點

現金: -100 元

存款: 0 元

閱讀權限: 25

註冊: 2005-4-2

狀態: 離線

#2

大中小

發表於 2008-9-28 18:32 資料個人空間短消息加為好友

效果2
HTML: 就係一個簡簡單單既img tag 鍾意可以改成用class .xxx & .xxx:hover
CSS:

[Copy to clipboard] [ - ]

CODE:

img{
padding:4px; /*圖片外有一條邊 4px比較好看:em38: */
background-color: #FFFFFF;/*圖片外有一條白色邊*/
border:1px solid #999999;/*再外面有一條灰色邊*/
}
img:hover{/*指標移過去時*/
border:1px solid #000000;/*最外既灰色邊會變成黑色*/
}

測試後成功.... IE6↓唔得

至於效果1
是否只能用單一img 標籤而且不能以behavior或Fx的ECAMScript
如非...
可以用純HTML+CSS

[Copy to clipboard] [ - ]

CODE:

解釋:
使用div是讓position relative取對位置

z-index : 1 / 2
圖層順序..引入網頁3維空間理論
[attach]66120[/attach] (注解: 果個係#2黎...左面係Z 下面係Y 右面係X..

愈大愈前....
position : relative
定位
相對位置
top : ?px
y軸遞增 (依照Position 屬性)
static (預設值): 這代表元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話，那 top、bottom、left、和 right 的值就都沒有意義了。
absolute: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置。
relative: 這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。
fixed: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素的位置不會改變。(p.s 對於不同瀏覽器有不同BUG- -"

From: http://css.1keydata.com/tw/position.php
px作pixel 指像素 [[ 好似解左冇咩用
left : ?px
x軸遞增 (依照Position 屬性)
px作pixel 指像素 [[ 好似解左冇咩用x2
(P.s 基本上left 指左面開始..top指上面開始 right右面..bottom下面.. 好似上面解得煩左d

)
padding: 4px
background-color: #FFFFFF
border: 1px solid #999999
同上
至於點計- -"....考起我...
測試後Fx成功....
後記: Opera 需要改成 left:-194px;

結論效果一始終應分開4隻角仔

1) 如果要拆開4個角既話....又有另外寫法..[[如果先算..反正唔想自己拆圖

2) 如果想只係一個IMG TAG 咁就要用到Javascript 暫時未諗到..outerHTML Fx 無效XD- -"

Finished
[[P.s 若要IE7↑顯示正常..請加上DTD, 如

[Copy to clipboard] [ - ]

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

IE6↓請配搭PNGFix
IE6↓img padding有問題
IE6↓Hover失效..
果然IE7有很大進步

[P.s 串錯字乃平常之事

[ 本帖最後由 tytsim 於 2008-9-28 20:12 編輯 ]

附件: 您所在的用戶組無法下載或查看附件

從此在地球上消失

eric1990
0044794

頭銜: King

帖子: 927

精華: 0

積分: 12468 點

現金: 0 元

存款: 503 元

閱讀權限: 30

註冊: 2006-5-9

狀態: 離線

#3

大中小

發表於 2008-9-28 22:52 資料個人空間短消息加為好友

萬分感謝，而家好少人咁好心整埋圖
真係唔該曬

我很厲害的，我會用電腦上網、用鍵盤打字、用滑鼠移動指標，
最厲害都是我會按開關制來開電腦。

kohong
0040689

頭銜: Forum Legend

暱稱: KC 仔

帖子: 3336

精華: 0

積分: 726 點

現金: 0 元

存款: 20728 元

閱讀權限: 70

註冊: 2006-2-27

狀態: 離線

#4

大中小

發表於 2008-9-28 22:53 資料個人空間短消息加為好友

QUOTE:

原帖由 tytsim 於 2008-9-28 18:32 發表

效果2
HTML: 就係一個簡簡單單既img tag 鍾意可以改成用class .xxx & .xxx:hover
CSS:
img{
padding:4px; /*圖片外有一條邊 4px比較好看

*/
background-color: #FFFFFF;/*圖片外有一條白色邊*/
bor ...

此文章被認定為精華

是咁的

eric1990
0044794

頭銜: King

帖子: 927

精華: 0

積分: 12468 點

現金: 0 元

存款: 503 元

閱讀權限: 30

註冊: 2006-5-9

狀態: 離線

#5

大中小

發表於 2008-9-28 23:01 資料個人空間短消息加為好友

回覆 #4 kohong 的帖子

十分同意你既說法

我很厲害的，我會用電腦上網、用鍵盤打字、用滑鼠移動指標，
最厲害都是我會按開關制來開電腦。

eric1990
0044794

頭銜: King

帖子: 927

精華: 0

積分: 12468 點

現金: 0 元

存款: 503 元

閱讀權限: 30

註冊: 2006-5-9

狀態: 離線

#6

大中小

發表於 2008-9-28 23:05 資料個人空間短消息加為好友

[Copy to clipboard] [ - ]

CODE:

.abc li {
XXXXX: XXX;
}

咁樣即係點解??
點解後面會有個 li 既?

我很厲害的，我會用電腦上網、用鍵盤打字、用滑鼠移動指標，
最厲害都是我會按開關制來開電腦。

廢人一個
0088270

頭銜: Lord

帖子: 463

精華: 0

積分: 5520 點

現金: 88 元

存款: 0 元

閱讀權限: 25

註冊: 2007-10-2

來自: Macau

狀態: 離線

#7

大中小

發表於 2008-9-29 14:04 資料個人空間主頁短消息加為好友

回覆 #6 eric1990 的帖子

陣係 Li 入面先有用

爛腦學園 ...

。貓Ｂ。
0071968

頭銜: Conqueror

帖子: 263

精華: 0

積分: 1710 點

現金: 0 元

存款: 711 元

閱讀權限: 20

註冊: 2007-4-3

來自: 貓王國

狀態: 離線

#8

大中小

發表於 2008-9-29 15:58 資料個人空間短消息加為好友

QUOTE:

原帖由 tytsim 於 2008-9-28 18:32 發表

效果2
HTML: 就係一個簡簡單單既img tag 鍾意可以改成用class .xxx & .xxx:hover
CSS:
img{
padding:4px; /*圖片外有一條邊 4px比較好看

*/
background-color: #FFFFFF;/*圖片外有一條白色邊*/
bor ...

感謝你詳細的教學啊!

永遠支持王傑

eric1990
0044794

頭銜: King

帖子: 927

精華: 0

積分: 12468 點

現金: 0 元

存款: 503 元

閱讀權限: 30

註冊: 2006-5-9

狀態: 離線

#9

大中小

發表於 2008-9-29 19:39 資料個人空間短消息加為好友

QUOTE:

原帖由 廢人一個 於 2008-9-29 14:04 發表

陣係 Li 入面先有用

明白

咁我想用片咁css又點整???
*被使用呢個css既圖片大小都唔一樣

我很厲害的，我會用電腦上網、用鍵盤打字、用滑鼠移動指標，
最厲害都是我會按開關制來開電腦。

tytsim
0018651

頭銜: Lord

帖子: 309

精華: 0

積分: 2831 點

現金: -100 元

存款: 0 元

閱讀權限: 25

註冊: 2005-4-2

狀態: 離線

#10

大中小

發表於 2008-9-30 22:26 資料個人空間短消息加為好友

QUOTE:

原帖由 eric1990 於 2008-9-29 19:39 發表

明白
咁我想用片咁css又點整???
*被使用呢個css既圖片大小都唔一樣

指效果2?
聽日國慶整完班網考慮下

從此在地球上消失

iamfreeman
0057759

頭銜: Conqueror

帖子: 232

精華: 0

積分: 2268 點

現金: 0 元

存款: 104 元

閱讀權限: 20

註冊: 2006-11-12

狀態: 離線

#11

大中小

發表於 2008-10-1 00:50 資料個人空間短消息加為好友

第二個可以係圖外面加個<a>然後a:hover
不過咁寫唔合邏輯