發表文章

目前顯示的是 七月, 2007的文章

利用css將一張圖製作成mouseover效果

圖片
同事James在製作網頁時,請他嘗試利用一張圖以CSS製作mouseover效果。



利用一張圖上半部製作onmouseout的效果下半部製作onmouseover的效果
在div中定義出欲顯示出來的總寬度與高度,並設定背景定義每一個選項li的寬度高度,並設定選項的連結只顯示區塊→#desk li a{display: block;}

mouseover的效果是利用負座標將圖片往上提,座標值就是剛剛設定每一選項li的寬度
另外選項要設成:浮動靠左,不然座標會錯亂→#desk li{float: left;}

其與法如下:
CSS:
#desk {
background-image: url(img/help_desk123.gif);
list-style-type: none;
height: 82px;
width: 343px;
}
#desk li{
float: left;
}
#desk li a{
display: block;
}
#desk1 a{
width: 120px;
height: 82px;
}
#desk2 a{
width: 105px;
height: 82px;
}
#desk3 a{
width: 118px;
height: 82px;
}
#desk1 A:hover{
background: url(img/help_desk123.gif) 0px -82px
}
#desk2 A:hover{
background: url(img/help_desk123.gif) -120px -82px
}
#desk3 A:hover{
background: url(img/help_desk123.gif) -225px -82px
}


HTML:
<ul id="desk><BR><li id="desk1"><a href="help.htm"></a></li><BR><li id="desk2"><a href="qa.htm"></a></li><BR><li id="desk3"><a href="mailto:…

關於友善列印

最近於製作網頁時,企畫有提出希望讓瀏覽者可以選擇版型套用,並可將其列印的功能。

整理網頁列印時需要注意的事項:

1.建立專門列印的CSS檔,例如:print.css。
2.於HTML中加入link rel="stylesheet" href="print.css" type="text/css" media="print"
3.通常我們都是將網頁列印在A4的紙張上,這時就要注意網頁寬度的設定了,通常A472dpi解析度的寬度是595px(96dpi解析度的寬度是794px),為了保險起見,最好將寬度設定在印表機可列印的範圍,也就是550px以內。

補充說明:

如果,要同時作為網頁顯示及列印,可以如此宣告:
link href="img/print.css" rel="stylesheet" type="text/css" media="screen,print" />

當設定邊框為1px時,列印往往會出不來,這是在實作時要注意的。
例如:

.box_w760_a p {
border-left:1px solid #7ea23e;
border-right:1px solid #7ea23e;
padding:10px 10px 0 10px;
color: #5b4b31;
line-height: 20px;
margin:-10px 0 0 0;
}

經過實際列印的結果,寬度其實是可在大一些的,也許在550-595之間應該都OK。

列印出網頁背景圖的方式

最近於製作網頁時,需要提供給使用者預覽及列印的功能。
但以CSS製作都會盡量將背景圖片、背景色或裝飾圖片放到CSS當中定義,只有文字和一般圖片才會放在HTML。
無法列印背景圖片是瀏覽器的特性,其目的應該是不想讓圖片干擾內容文字的呈現,所以,我們一般會另外定義一個print.css,供列印用。
但如果真遇上,希望讓瀏覽者,直接將所看到的版面列印這怎麼辦呢?
在GOOGLE搜尋下找到Andreas提供一個方式,就是運用list-style-image 的特性印出背景圖。
範例:http://andreas.web-graphics.com/print/
說明:http://web-graphics.com/mtarchive/001703.php

Jane's Blog的文章中,也有針對其內容作了很好的說明,對於英文不好的我,幫助很大!

鬼才Paul Potts

英國的節目Britain's Got Talent,類似台灣的超級星光大道。
他唱的是杜蘭朵公主裡面的「公主徹夜未眠」!
你曾經聽歌連身上的毛都立起來了嗎?
這傢伙辦到了!