好比底下的HTML
<a href="http://www.google.com/">
<img src="/img/ball.png">
</a>
在IE8之前的版本(之後不確定)會因為圖片是可點的連結,所以會被藍色框框包起來。在Crome跟FireFox則不會。
為了避免藍色框框出現,可以這麼做
要在Style中(可能在CSS檔或同一檔案中)設定:
img
{
border:hidden;
}
我喜歡設計,我喜歡創造,我喜歡美 不論軟體設計,不論介面設計,不論產品規劃設計,我都很有興趣 一直希望能能用這份專長,好好發揮在職場上。讓我做的快樂。 不論寫程式,或是做美工,我都很喜歡,希望我可以有機會雙線。兩種都很擅長。
2013年2月19日 星期二
2013年2月6日 星期三
Html中,元件位置的控制,Position屬性
位置的控制,Position屬性有四個設定值,整理如下表:
一、什麼是fixed ? 最簡單的理解方式,就是很多大陸網站,會有廣告,會跟著你畫面,無論你滑鼠怎麼上下滾,廣告永遠出現在那個位置,那就是fixed的最直接示範。
二、什麼是跟absolute?跟fixed差不多,在畫面上元件都放在固定的位置,但會跟著捲軸的捲動,而跟著上下跑,這就是所謂的absolute。但是,你所設定的位置(left, top是根據你的父親容器來決定,不是螢幕範圍,而且,這個父親還必須具備「位置參數有設定為absolute或relative,如果父親容器沒有設定absolute或relative那就再看上一層父親元件,若沒有這種父親容器,則位置參考就會依據螢幕範圍。)
三、什麼是static?原本瀏覽器預設的就是static,就是按照原本的顯示流來排版,完全不能改變位置(下CSS指令無效)。
四、什麼是relate?比static略有彈性,就是在原本的顯示流上,然後作位置的調整,比方原本的位置流應該要讓元件B放在元件A下方位置,比方在x=20px, y=300px。而指定了left:30px, top:100px的話,就會讓位置出現在x=50px, y=400px了。
備註:
通常用fixed都會指定想放置的位置才對,但是如果你對某個元件沒有指定位置,他會依照顯示流中相對其他元件的位置來放置,但是,畫面捲動時又會固定住位置,不會隨著捲動,然後偶而又會被別的元件蓋住,行為難以理解。
顯示流說明參考:
http://my-web-design.blogspot.tw/2007/10/css-divposition.html
從10種位置範例設定來瞭解:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
position參數
|
absolute
|
relative
|
static(預設值)
|
fixed
|
中文意義
|
絕對位置
|
相對位置
|
靜態位置
|
固定位置
|
位置參考基準
|
父元素內容區邊界
|
在顯示流中相對其他元件的位置
|
不變
|
螢幕視窗最大可視範圍邊界(備註)
|
移動參考基準
|
文件
|
文件
|
文件
|
螢幕視窗最大可視範圍
|
可改變顯示位置
|
是
|
是
|
否
|
是
|
可調整大小
|
是
|
display為block:可display為inline:否
|
display為block:可display為inline:否
|
是
|
從顯示流中去除
|
是
|
否
|
否
|
是
|
一、什麼是fixed ? 最簡單的理解方式,就是很多大陸網站,會有廣告,會跟著你畫面,無論你滑鼠怎麼上下滾,廣告永遠出現在那個位置,那就是fixed的最直接示範。
二、什麼是跟absolute?跟fixed差不多,在畫面上元件都放在固定的位置,但會跟著捲軸的捲動,而跟著上下跑,這就是所謂的absolute。但是,你所設定的位置(left, top是根據你的父親容器來決定,不是螢幕範圍,而且,這個父親還必須具備「位置參數有設定為absolute或relative,如果父親容器沒有設定absolute或relative那就再看上一層父親元件,若沒有這種父親容器,則位置參考就會依據螢幕範圍。)
三、什麼是static?原本瀏覽器預設的就是static,就是按照原本的顯示流來排版,完全不能改變位置(下CSS指令無效)。
四、什麼是relate?比static略有彈性,就是在原本的顯示流上,然後作位置的調整,比方原本的位置流應該要讓元件B放在元件A下方位置,比方在x=20px, y=300px。而指定了left:30px, top:100px的話,就會讓位置出現在x=50px, y=400px了。
備註:
通常用fixed都會指定想放置的位置才對,但是如果你對某個元件沒有指定位置,他會依照顯示流中相對其他元件的位置來放置,但是,畫面捲動時又會固定住位置,不會隨著捲動,然後偶而又會被別的元件蓋住,行為難以理解。
顯示流說明參考:
http://my-web-design.blogspot.tw/2007/10/css-divposition.html
從10種位置範例設定來瞭解:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
訂閱:
文章 (Atom)