|
在這個(gè)例子中，視覺角度來看，一片文字需要主次清晰，所以鏈接色只加在了標(biāo)題上。那么詳細(xì)描述部分該不該響應(yīng)點(diǎn)擊呢？非鏈接色出hover效果會(huì)不會(huì)有點(diǎn)怪呢？即使決定這兒可以鏈接，那hover效果導(dǎo)致出現(xiàn)大片的hover色和多行下劃線，視覺設(shè)計(jì)師會(huì)跟你急吧。
這樣或許會(huì)優(yōu)雅一些：
讓詳細(xì)描述響應(yīng)點(diǎn)擊，同時(shí)讓hover效果出現(xiàn)在標(biāo)題上。如圖：
還有更復(fù)雜的模塊，可以套用這個(gè)方式來做，比如下面這個(gè)例子：
另外一些說明：
1、前端代碼問題
雖然在html4中，作為inline屬性的a只能在里面嵌套inline的標(biāo)簽，可以看下XHTML1.1標(biāo)簽列表、屬性和嵌套規(guī)則（抱歉未找到HTML4的，它們類似）。但在html5中，語法定義者擴(kuò)大了它的嵌套能力，我們可以用a把各種block標(biāo)簽統(tǒng)統(tǒng)包進(jìn)來。詳見html5中對(duì)a的特別說明：http://www.w3.org/TR/2010/WD-html5-20100304/text-level-semantics.html#the-a-element （感謝鎢龍?zhí)峁┵Y料）。畢竟HTML5還處于草案階段，這種嵌套方式，還是偶爾會(huì)出現(xiàn)一些對(duì)鏈接的瀏覽器渲染問題，但目前還未發(fā)現(xiàn)出錯(cuò)規(guī)律。
2、a標(biāo)簽包含的整個(gè)區(qū)域內(nèi)，只響應(yīng)鏈接了，文本拷貝比較麻煩點(diǎn)，需要在更大范圍外進(jìn)行拷貝。所以如果對(duì)拷貝文字有要求的模塊，不適合采用這個(gè)方式。
3、這個(gè)方案有個(gè)附帶的好處，因?yàn)檎麄�(gè)模塊只要一個(gè)鏈接，如果是個(gè)手工維護(hù)的模塊，更新的時(shí)候很省事。
本文鏈接：http://www.95time.cn/design/doc/2010/8023.asp 
出處：口碑網(wǎng)UED Team
責(zé)任編輯：bluehearts
上一頁 優(yōu)雅地?cái)U(kuò)大鏈接響應(yīng)區(qū)域 [1] 下一頁
|
第 1 頁 
第 2 頁 優(yōu)雅地?cái)U(kuò)大鏈接響應(yīng)區(qū)域 [2]
