2009年6月15日 星期一

Hunch收集全球智慧幫人解答問題,並有平均每人瀏覽175頁之潛力?



這周矽谷都在看一個新網站叫「hunch.com」,表面上來看,它是一個「問卷網站」,但它不像那些IQ Test是有趣的,也不像PollDaddy是讓其他人自設問卷的,也不像市調公司是做一些市調然後賣廠商的。

Hunch問了一大堆問題的目的,是要幫你解決其他的問題。


什麼意思?


理論上來說,你的問題就是我的問題,如果我們的思想、環境、財務、家庭、興趣…都很相近,那麼,我的解答應該也可以是你的解答。而Hunch.com將這件事跳出了「實驗室」的範疇,直接將它弄得簡單、簡單、更簡單!


在Hunch這個網站,不必做什麼事,它就是一直問網友問題,然後網友一直解答。在每個解答之後,Hunch就告訴你,有幾個%的人和你回答一樣的結果,用這個方式來引誘你回答更多的問題。回答之後,Hunch就更認識你,也收集更多「像你這樣的人」的喜好與決定。這些喜好與決定,告訴很多其他的事。看,如這篇所說,Hunch這顆「大腦」已經知道一些人類都不知道的秘密,你知道嗎,一問你「敢不敢喝公共飲水機的水?」,就可以知道你一些其他的事。其中一件事是據Hunch目前統計,敢喝公共飲水機的水的人(大約佔全部人口79%),騎單車的時候通常都會戴著安全帽。而不敢喝公共飲水機的水的人,通常也都不會戴著單車的安全帽!


這是第一步。

第二步,變成你可以從Hunch找到答案。它不必幹什麼事,只要把「你」和其他和類似你的人的答案相比對,就大概知道你「應該」會怎麼回答其他的問題,全世界上的問題,Hunch都可以代你回答了。它的智慧來自於眾人,而眾人的智慧絕對比一個人還大。這篇就舉個例子,你不知道應不應該搬進去和你女友一起住嗎?Hunch就會再問你,「你們一起約會多久了?」「如果你們關係變差了,你還有錢可以搬出去住嗎?」你回答這些問題後,Hunch應該就會去資料庫找,看看有誰回答過這些問題,當時應該也有問他們「最後的決定」,如果你是屬於A型,那最後的決定是不要搬進去,Hunch就會建議你:「不要搬進去」。

我們一定覺得怪,Hunch的肚子裡真有這麼多問題與解答資料嗎?現在的答案已經很明顯。


Hunch在開站前,只找來4萬名回答者,這個數字沒了不起,了不起的是,這4萬名使用者,竟然已經回答了總共700萬個問題,平均每個使用者回答了175個問題!這點我完全可以理解,我今天早上在試驗Hunch時,在沒什麼時間的情況下,自己不小心就先回答了二十幾個問題。憑這些數字,難怪Hunch才剛剛開站,這周會吸引這麼多的好評了。

而Hunch.com這個網站,其實有兩條花邊新聞,可以讓矽谷網友除了認識這個新網站,還可以順便嗑瓜子當作茶餘飯後閒談話題:


花邊新聞一、創辦人離婚事件:Hunch.com的創辦人之一是Caterina Fake,這是一位資歷顯赫、有想法的大美女。此人的名字大家不太知道,但如果提到Flickr的創辦人Stewart Butterfield大家就聽過,有些網友還記得他來台灣的演講,Caterina就是Stewart的太太,她是美國人,婚後就搬到Stewart故鄉加拿大溫哥華居住,並在那邊與Stewart成功創辦Flickr,之後兩人再移居至美國舊金山灣區。八卦網站Gawker這邊還特別寫了一篇文章,「分析」了為何這次Caterina是自己出來開網站?報導證實,這對有創辦情感的夫妻,早已經沒有住在一起了,但是尚未離婚。


Hunch.com的投資人位在紐約市,因此網站公司也設在紐約,投資人當時還曾問過Caterina身為人妻,是否能移居紐約?當時的答案是:沒問題,不必擔心,因為他們已經離婚。Gawker還順便找到了一張女性友人與Stewart的合照。


花邊新聞二、微軟被吃豆腐:大家說,Hunch也夠有心機,他們剛好搭著微軟這次Bing的風潮,因為Bing將它自己定位成「幫你作決定」,而Bing的確比Google或Yahoo還多了一條「殺手級左欄」幫你作決定,但Hunch.com更猛,它直接問你一堆問題,引導你一步一步走向決定,這才是更棒的「Decision Engine」,不是嗎?所以,許多報導文章都特別引用了微軟的Bing來開頭,然後再提到「Hunch才是更棒的決定引擎」,有的甚至為了效果還直稱「Forget Bing!」,Hunch應該要謝謝微軟,砸一億行銷幫它鋪陳一條有由有理的康莊大路。


不過,扯掉花邊新聞,將格局拉大來看,Hunch是一個真正的有用到全世界人口的力量的網站。我們說,網路上最美好的地方就是它將全世界60億人口串在一起,以前要經過很多層通路,現在有機會和任何一洲、任何一座城市的某一位陌生人,他的封包丟到你家房間的電腦,你的封包丟到他褲檔裡的那隻手機裡。網路上最大的機會就是在這個地方,而所有網站長到一個階段,就會被自己所限制住,一個一億會員的網站和一百萬會員不會相差太多。


但Hunch不同,它真的有系統性的在累積所有來來去去的人,像神隱少女裡面那個吃人的怪物,或是海綿寶寶有時候吸太多水。這些網友只需要來Hunch一次,像我,不必再回去,Hunch卻已經從我回答的那二十幾題,外加我所填的身份,得到了一些東西。這樣的東西真正的把網路上最美好的「六十億陌生人」力量全部幾乎無漏的加在自己身上。


設計這麼一個網站,有一個新的「三一規定」,第一點就是「每1頁都要做事情」,包括第一頁。此後,「每頁都只做1件事情」,非常明確的告訴使用者,然後這件事情應該「只要花1秒」(不一定是一秒但只是形容此事不宜太困難)。重點是,Hunch這樣的概念,從HOTorNOT時代就有,但沒見到一個真正成功的,原因可能在於,擁有「三一」的網站並沒有好好的去研究「後台資料」,看看每一頁的點擊率如何,誰點了什麼,在不一樣的頁面有幾個%會繼續點,在怎麼樣的頁面會造成大家不想繼續點。由於「三一」網站已經將許多可能使使用者分心的元素拔除了,每一頁都長得一樣,因此,使用者繼續點或不繼續點,幾乎完全取決於中間那個「內容」,將網站設計成「三一」,是一個很容易調整內容去打中使用者心中的「甜蜜點」的網站模式。


我們不一定可以設計一個Decision Engine,但我們可來想想,還有哪個網站可以改為設計成這樣的模式?部落格也可以設計成這樣呢?

文章來自MR6
文章提供BAYSTARS DESIGN網頁設計公司

JW Image Rotator 圖片轉阿轉!

無法查看此摘要。請 按這裡查看文章。

2009年6月11日 星期四

Net-a-Porter淨利爆升2.3倍,購物網站披一層「時尚雜誌」皮就變這麼猛








這周從《Financial Times》再次看到一個高檔購物網站的業績、利潤大幅提升的電子商務成功案例(另一篇文章可見此)。

這個英國的高檔購物網站名叫「Net-a-Porter」,2008年下半受不景氣風暴影響,大部份英國的線上購物網站都停滯或衰退,沒想到這間「Net-a-Porter」竟能逆勢成長,在去年一年間業績成長了45.3%,年營業額達到8150萬英磅(1.4億美元、50億台幣)。奇特的是,它的營業額的成長,伴隨的是更厲害的淨利的提升,這篇提到,Net-a-Porter的稅前淨利,竟然比去年同期更提升了234%,整個的瘋狂的成長了2.3倍!

嘩,去年不是應該不景氣嗎?

這2.3倍是怎麼來的?

顯然,這絕對不是那句話「有錢人不受風暴影響」所可以解釋的!讓我們好好的、仔細的、用心的來看看這個Net-a-Porter網站──

這個網站的特色非常明顯!Net-a-Porter之所以是一間很特別的購物網站,是因為它讓人完全感受不出,它是一間購物網站。打開Net-a-Porter(如上圖),你會覺得,它反而比較像是一本女性流行衣飾雜誌,也就是說,Net-a-Porter是一間把自己當作是「雜誌」來設計的購物網站,它是披著一層「時尚雜誌皮」的購物網站!

然而,Net-a-Porter從2000年創站以來,也不是到去年才突然變裝成這樣,為何去年他們突然創造這麼大的業績成長呢?

記者專訪Net-a-Porter,他們的說明讓人真的獲益良多。原來,Net-a-Porter到了去年,才終於想通了他們這獨特的「雜誌型介面」,可以拿來吸引誰──

他們並不是吸引更多的消費者(買家)。嗯,至少不是這麼直接。

他們應該拿雜誌介面來吸引更多的……

服裝設計師!

什麼意思呢?

他們接受FT訪問提到,這次的業績提升,主要歸功於2008年間他們「選產品更小心」。他們的採購團隊,更用心的在每次採購上,盡量和一些知名設計師談「獨家販售」(exclusive)他們所設計的超漂亮的衣裳。這些超漂亮的衣裳上了Net-a-Porter,少女與熟女們更是吃好相報,紛紛前來購買了。

注意,一個購物網站能和知名設計師談到「獨家販售」,何其困難!設計師最care的,並不只是此網站能幫她賣幾百件衣服、賺多少錢,而是你是否有襯托出她設計作品的「形象」。講到這「形象」,一般購物網站實在怎麼改都還像是購物網站,百貨公司永遠當不成精品店,但,Net-a-Porter原本看起來根本就像一本超漂亮的時尚雜誌,完全沒有購物網站的搶錢氣,設計師們,當然和他「一拍即合」,非常喜歡!

一旦設計師喜歡了,Net-a-Porter的消費者就有漂亮衣服可以買,消費者也就會買更多,這是雞生蛋蛋生雞的生生不息的循環,於是就創造了2008年的亮眼業績。看看Net-a-Porter的數字,也可看出他們2008年的超棒業績其實並不是每天平穩,而是靠一波又一波爆衝上天的「明星產品」所促成──Net-a-Porter靠這些設計師設計的「明星產品」,在一年內製造出好幾個「亮點」,有一天據說就賣出了100萬英磅(約台幣7000萬的衣服),靠這一天就可以休息一個月不怕;也有一天,它就接了1萬筆訂單,靠這一萬筆訂單大概可以休假三個月。雖然Net-a-Porte它給的樣式沒有這麼多,但女性購物者看到這麼漂亮的雜誌風,也不想一件一件慢慢挑、比價,只要看到喜歡的款式就買了。明星產品創造了更多「衝動購物」。雖然以上仍沒有直接解釋為何淨利成長2.3倍,但或許亦可推測是因為這些設計師寄賣的商品以比消費者想像還低廉的價格批給Net-a-Porter,而Net-a-Porter也以比其他一般商品還高的售價賣給民眾…。

從Net-a-Porter的成功案例,我們可以看到,「購物」與「媒體」的結合的另一種方式。

購物網站與媒體網站結合?原本是「你沒情我也沒願」,購物網站怕做不賺錢的事(要害一個人窮死就叫他去辦媒體),而媒體則怕「low了自己」,但兩方,說穿了,其實都還是對金字塔頂端族群很有興趣(誰對金字塔頂端沒興趣呢!),如果說,購物網站與媒體網站結合,就可以得到金字塔頂端的喜愛,他們願意嗎?

這個方向,或許會是很有趣的一個做法,它代表了兩個可能:

一、購物網站透過「轉成媒體」來提升網站業績:目前所有中大型的B2C購物網站若想再作提升,可以多請幾個人,將整個做成雜誌的方式來呈現,以這方式來吸引真正的「明星產品」進駐,創造意外的生意。你說,現在的購物網站做得很美了?但雜誌就給人截然不同的感覺,購物網站再美,終究還是購物網站,上面充滿了「大折價」、「試用報告」、「效果」等等,讀起來就是不夠放鬆:尤其是較高檔的產品,本身就是一種藝術,用心一點,做成「媒體」的樣貌,讀者感受到氣氛,立刻湧出購買慾望。

二、線上媒體在高檔的頻道中,可以順便變成購物網站:對媒體來說,或許這是很好的獲利機會,尤其是各女性雜誌的線上版,或是專攻男性題目如高爾夫球、金融投資題材的媒體網站,用同樣的人力編制,線上直接開出一個「副刊」,搭配購物車或搭配相關的購物網站,氣氛「打出來」, Net-a-Porter告訴我們這樣是有效的。

除此之外,Net-a-Porter還幹了一件有趣的事──在這段期間中,他們還推出了「當日運送」服務,如同台灣PChome推出24小時購物。Net-a-Porter單價高,利潤的數字(儘管不一定是%)也跟著大,而訂單不多,因此處理費與運費皆不是大問題,Net-a-Porter巧妙運用他們這個優勢,大膽推出了「同一天送達」,結果淨利竟然還是成長的狀態,真是太有趣了。更有趣的是,或是也是因為Net-a-Porter的「手上有錢」,這間英國網站今年已經開始到其他國家設立同樣的「同一天送達」中心,原來高檔購物市場的另一好處:容易在全球快速拓展。

創業家的機會來了,若你認識或看準某媒體或購物網站,或你剛好接到他們的案子,或許可建議多花一點點錢,將此媒體網站多加一點點購物,或將此購物網站再加一點點媒體,將一切更精緻些。Net-a-Porter大概只能在英國做,亞洲這邊的Net-a-Porter在哪裡?等到景氣更好,就是一飛沖天的時刻了。




文章來自MR6
文章提供BAYSTARS DESIGN網頁設計公司

DealItLive線上實況購物台開台,商家靠兩支影片就賣光25項商品





上個月初,美國有一個新的購物網站出現,它叫做「DealItLive」,把「購物台」的概念帶到網路上,讓賣家可以錄一段影片,在線上賣他的商品。這種網站就像「影片面試」、「影片演講」這類的網站,有點喊得過頭了,所以當時也沒有多少報導在注意它。

不過,一個月以來,這個網站似有「加溫」的趨勢。上周先在華爾街日報一篇討論eBay漸失優勢的文章被提及外,英國頗有地位的《Examiner》更出了一篇由一位25年經驗的拍賣賣家所寫的文章,她讚嘆,這麼多年經驗以來,從沒看過這麼棒的購物網站(會不會太誇張了一點),而這個新網站賣東西的速度遠比傳統的網拍平台(如eBay)還快很多。這位賣家說,他在DealItLive上面設了兩個秀,賣了25項item,Sell Through Rate高達98%(意即100人看了有98個人真的買下)。

這時候,讓我們要再看「DealItLive」一眼--

這是一間去年11月才創辦的公司,今年5月初開站,由於此站只允許美國的網友觀看,若有需要必須透過代理主機(proxy)才能看此網站。為何……這麼麻煩?

喔,原來,它不是一般的影片購物網站,它是一個「現場實況轉播」的影片購物網站(所以才叫「Deal it LIVE」,並號稱是全網路第一個這樣提供「現場購物」的網站!也就是說,在上面播放的賣家,是「現場播放」,也因為在現場播放,DealItLive順帶加了幾個別的拍賣網站所沒有的功能──

由於賣家是現場展示,現場通過線上影片賣東西,因此DealItLive順理成章的提供了一套聊天室,買家還可以即時打字給賣家,要賣家將產品轉到另一個角度、喇叭開大聲一點……等等,然後,甚至這樣就順便做出了一個「殺價平台」,買家可以直接在線上與賣家聊起來,殺價!

而對賣家來說,目前並沒有收上架費或平台費,只在成交後抽取5%的利潤。在DealItLive上面設時間,據說也只要10分鐘,進去填個會員資料,就會出現一個大大的「開始賣東西」(Sell)鈕,按下去後,網站先請你「預約時間」,預約到你要的時間後,它就開始請你「上架」,一樣物品一樣物品的上。由於等一下就要現場講了,因此也不必貼太多產品資訊,幾張照片可能就夠了。買家若喜歡這些東西,還可以「訂閱」賣家的影片,以後賣家有什麼好貨,隨時播放給買家看。你說,萬一現場沒人買,10分鐘很快就結束了,怎麼辦?DealItLive不只是現場實況的,商家還可以上傳他們錄好的影片,這部份就像一般的eBay拍賣品一樣,在一定時間內放在架上(例:21天內)。

不過,我覺得這點子最有趣的地方在「切時間」。購物台為何創造某些商品熱銷佳績?因為它買下了頻道,每一位觀眾轉進此頻道,通通都看到同一個商品,頻道很貴,因此每一樣商品的時間就少,時間少到那時鐘在後面滴答滴答的響,催促你趕快買下,碰到了動心的產品,消費者趕快買下,時間不必太多就可以創造驚人業績,喊NEXT到下一個商品。購物台的思維和購物網站通常是相反相悖的,網站所注重的是人人進來的目的不同,首頁只是導引,是幫助他找到自己的東西,但,如果每個網站都能在大首頁擺這麼一個「切時間」的「影片框」,讓人們去預定這個時段,第一說不定會提升首頁的瀏覽頁數,第二也創造了新的獲利機會,讓裡面的會員更熱情的賣東西。

到了DealItLive.com首頁,會看到左上角有一個框框,上面寫著「現在正在賣或Re-run」的影片,這個框框就是這個「購物台」目前正在進行的LIVE影片。你說,看電視不就好了?這就有趣了,主要是在上班的時候。上班之間有空閒,不可能看電視,但可以看短片。如果上班無聊了,上這個網站,不必有什麼目的性,如同看購物台一樣,來到這裡,輕鬆的看看賣家要賣什麼東西,喜歡,再買!

從前的購物網站可能只做有某種目的性購物的消費者,她們透過搜尋引擎,或者DealItLive的搜尋框,去找到它裡面正在進行的商品。現在,沒有目的、沒有標的、漫無目標、明明就是在發呆無聊的消費者,也可以抱著看電視的心情,來到DealItLive,觀賞它首頁的那個框框!

這樣看來,每個網路點子都可以做成像DealItLive這樣。最好是影片。

DealItLive肯定不是第一家開始想這個的,台灣這邊的創業家陸陸續續至少有三~四位想過這個點子,有沒有做出來不重要,重要的是我自己也因為「沒看到有人做出這種網站」而把這點子打入那種「很多人想做、最後不如預期」的類別。在兩年前,我們還會說有些東西就是起不來。但我現在有些在發現,只要是好多人在想的點子,儘管看起來無聲無息,但它似乎一定會起來。曾經GPS被喊了很久卻沒有需求,我大學時代就拿著Garmin機在做實驗,現在終於來到了人手一台的盛況;觸控式螢幕也曾經敗了幾次,現在也終於得到了它的機會;甚至數位相框好像也有類似的經過。再來看看網路方面也是如此,原本說的比較購物、合購、甚至Twitter……原來,每次我們都以手機、數位相機一些「三年爆紅」的產品來判斷我們的成功機會,在創投的資金有七年年限的情況下尚算合理,但以個人的信心而言,只要是碰到大家都在喊、卻大家不起來的,我們只要耐心再給他幾次機會,說不定都會起飛!因為聰明人的想法不一樣,但幾個聰明人都想一樣的事,表示這件事一定有它的前景;不必像電影Minority Report(關鍵報告)那樣三個先知預測,只要有三個臭皮匠創業家朋友都講一樣的事,那大概就應該開始動了。

現在,DealItLive把美國以外所有地方都鎖住了,表示不接受這裡的觀眾,或許這會是一個機會。

文章來自 MR6
文章提供BAYSTARS DESIGN網頁設計公司

2009年6月10日 星期三

CSS 盒模型

CSS 盒模型
網頁設計中的每個元素都是長方形的盒子。盒子的尺寸是怎樣精確計算的,請看下圖:

這個圖表很好地展示了作用於頁面上任意盒子的數值。

注意以上兩個例子中,margin 都是白色的。Margin 比較特別,它不會影響盒子本身的大小,但是它會影響和盒子有關的其他內容,因此 margin 是盒模型的一個重要的組成部分。
盒子本身的大小是這樣計算的:
Width width + padding-left + padding-right + border-left + border-right
Height height + padding-top + padding-bottom + border-top + border-bottom
值未聲明的情況
如果未聲明 padding 或者 border,那他們或者值為零(使用 css reset 時),或者為瀏覽器的默認值(很可能不是零,尤其是那些通常沒有重置的表單元素)
塊級盒的默認寬度
如果未聲明寬度,並且盒子是靜態或者相對定位的,寬度會保持 100%的 寬度,padding 和 border 會向內推動,而不是向外擴展。
但是,如果明確設置盒子的寬度為 100%,那麼 padding 就會向外延展。

The lesson here being that the default width of a box isn』t really 100% but a less tangible 「whatever is left」. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.
要注意的是,盒子的默認寬度並不真的是 100%,而是剩下的可能值(應該是說,剩餘真實存在的寬度 - 糖伴西紅柿)。應該瞭解這個特殊值,因為很多情況下,它對於設置/不設置寬度都是非常有用的。
遇到的最大的麻煩就是 textarea(文本框) 元素了,它們需要設為寬度為所需的」cols」屬性,並且不能包含子元素。因此通常需要明確的設置 textarea 的寬度為 100%,但有 padding 時,就會延展 textarea 的寬度。固定寬度環境下,通常可以設置為合適的像素值寬度,但是變寬情況就沒那麼幸運了。
無寬度的絕對定位盒子
未設定寬度的絕對定位的盒子的表現有點不一樣。它們的寬度只需要適合它們所包含的內容即可。因此,如果盒中只有一個單詞,盒子就會像那個詞的表現一樣寬。如果變成兩個詞,盒子的寬度也會相應增加。這種情況會持續到盒子的寬度達到父元素寬度的 100%(最近的相對定位的父元素或者瀏覽器窗口),然後就會折行。


對盒子來說,垂直擴展以適應包含的內容是很自然的。值得奇怪的是,不僅僅是不同平台下的文本表現不同,不同的瀏覽器處理這個問題時,也有很多怪癖。

無寬度浮動盒子
同無寬度的絕對定位盒子的表現一樣。盒子的寬度只需要擴展到所包含內容的寬度,直到其父元素的寬度(其父元素不必是相對定位的)。由於這些無寬度盒子的脆弱性,我們要學到的是關鍵任務模式的時候它們是不能依賴的,像總體頁面佈局中。如果浮動一列作為側邊欄使用,並指望那些內部元素(如圖片)來負責包含它的寬度,你就是在自找麻煩。
內聯元素也是盒子
我們這裡一直把重點放在塊級元素的盒子上。很容易就可以把塊級元素想像為盒子,但是內聯元素也是盒子。可以把他們想像為非常長而窄的長方形,它們也可以像其它盒子一樣有 margin, padding he border


折行使它看起來有些不好理解。如上所示的左 margin 把盒子推向右邊,但是只在第一行有效,因為那是盒子的起點。padding 正常的應用在文本的上部或下部,當折行時它會忽略上面行的 padding 並且以行高(line-height)要求的位置作為起點。透明背景是為了讓效果看起來更清楚。
親眼目睹一下
想看看組成頁面的每個單獨的「盒子」嗎?試著把這行代碼暫時放入樣式表:

程序代碼

* {
border: 1px solid red !important;
}


文章提供 BAYSTARS DESIGN網頁設計公司

CSS Sprites 圖片整合技術

論壇上提到這樣的問題:「css中用一張背景圖做頁面的技術有什麼優勢?」

簡單介紹一下 CSS Sprites 的優點:

當用戶往USB碟中拷200張圖片,會等很久。但是如果弄成一個文件,再拷貝就會快很多。
CSS Sprites 的目的就是通過整合圖片,減少對服務器的請求數量,從而加快頁面加載速度。




實現方法:

首先將小圖片整合到一張大的圖片上
然後根據具體圖標在大圖上的位置,給背景定位。

程序代碼
background-position:-8px -95px;


原文:點這裡...

文章提供 BAYSTARS DESIGN網頁設計公司

全兼容的純CSS多層級選單重點淺析

參與測試的瀏覽器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系統:Windows

這次給項目做的多層級選單使用了純CSS的方式,能用CSS做的,就用CSS完成吧。

早已有網友完成過這樣的實例了,以為能順利完成,但沒想到處處碰壁,故記錄一點心得如下,供大家參閱。

除了IE6這個堅強的孩子,其他瀏覽器攻克還是比較容易的。

HTML代碼












[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


該實例完成大概就兩個要點:

忌浮忌躁,一步步來,先把最低級的display:none;做。
「:hover偽類」的使用,默認狀態「display:none;」,「:hover」時則「display:block;」則能很容易完成。

而IE6下折騰就比較複雜了,經過頭破血流的教訓之後,總結出關鍵四點:

1. 原理:IE6僅標籤支持:hover偽類,但如果a標籤裡面再嵌入a標籤,裡面的a標籤將不會生效,所以必須在之間套加一層 ;


內容部分可以含有標籤


2. 關鍵樣式名:這個用於:hover效果的a標籤的命名,如果使用與
  • 一致的樣式名(在非IE6中是li:hover產生的效果),將不用再另寫樣式代碼,不僅節省了代碼開銷,而且可維性更好;(這個是省時省力的關鍵)

    程序代碼




  • 內容部分可以含有標籤

    程序代碼




  • 3. visibility的使用:採用display的話將出現onmouseout時上一次顯示的optionGroup仍然不消失的情況

    程序代碼
    .c_subNav .li:hover ul { visibility:visible;}


    4.table的設置: [含淚ing]table一定要記得width:100%;啊,一定要記得啊,一定要記得啊,一定要記得啊。

    最後完成效果:
    運行代碼框

    HTML代碼












    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


    文章提供BAYSTARS DESIGN網頁設計公司