外面在網(wǎng)頁制作和操作的過程中有很多特殊的要求或者需求,隱藏文字內(nèi)容就是其中比較常見的。
就隱藏文字內(nèi)容最起碼有2個(gè)大的方法,第一種通過JS實(shí)現(xiàn)隱藏效果,例如前面361源碼給大家介紹的《一段有意思的黑鏈代碼》里的代碼實(shí)現(xiàn),還一種比較常見的隱藏文字內(nèi)容的方法就是通過Div+Css實(shí)現(xiàn)隱藏文字內(nèi)容。下面361就具體給大家介紹
利用Div+Css實(shí)現(xiàn)隱藏文字內(nèi)容主要有以下幾種方法:
這個(gè)是最方便方法,指定一個(gè)div,然后加上display:none屬性,而且這樣不會(huì)出bug。 經(jīng)測(cè)試 ie6.0 、 7.0 、firefox 3.010 通過。但是遺憾的是,這樣會(huì)多了個(gè)標(biāo)簽,循環(huán)中使用的話,html又多了一堆字節(jié),所以單個(gè)按鈕推薦這樣使用。
而針對(duì)input value的隱藏這個(gè)方式就有些吃力了,所以還是只能用block加text-indent來“偏移”模擬隱藏了,完整代碼為:
display:block;font-size:0;line-height:0;text-indent:-9999px;
另外要注意的是,它可以使包括容器本身在內(nèi)的東西都消失,簡(jiǎn)便且有效,但它有兩個(gè)耳熟能詳?shù)娜毕荩蔷褪菍?duì)搜索引擎不友好,且被屏幕閱讀器所忽略,如果想隱藏文字但是又要被搜索引擎抓取的話不推薦用這個(gè)方法。
text-indent是首行縮進(jìn),所以對(duì)于多行文本,若單獨(dú)使用它就有明顯的不足,需加上white-space:nowrap;來彌補(bǔ)不足,可是他有一個(gè)局限性 他只適用于塊級(jí)元素block,而我們往往有時(shí)候想偏移掉的a上的字體,所以問題就來了:text-indent:-9999px;雖然用起來比較愜意,將a轉(zhuǎn)化成block的話 往往他身后的的元素就被他趕到下一行了,如果正好這個(gè)a后面 是一個(gè)a按鈕,就要用float浮動(dòng),這樣有些麻煩。
還有一個(gè)問題:物理空間仍然存在,故還需設(shè)置line-height:0;或使用超小字體(在IE下有點(diǎn)BUG),最終代碼如下:
text-indent:-9999px;white-space:nowrap;line-height:0;
這個(gè)方法能完美“隱藏”掉background之上的內(nèi)容,經(jīng)測(cè)試 ie6.0 、 7.0 、8.0、firefox 3.010 通過。
完整代碼為:
line-height:0;font-size:0;overflow:hidden;
這是一個(gè)比較合理且是361源碼最喜歡的方法,具體代碼如下:
display:block;/*統(tǒng)一轉(zhuǎn)化為塊級(jí)元素*/overflow:hidden;width:300px;height:100px;padding:100px 0 0;background:url();
我們還可以附加:positon:absolute:用絕對(duì)定位將其推出可視區(qū),不過雖然可視性不存在,但仍占據(jù)物理空間,與隱藏文字的宗旨相背,代碼為:
display:block;/*統(tǒng)一轉(zhuǎn)化為塊級(jí)元素*/overflow:hidden;width:300px;height:100px;}.replacement a{padding:100px 0 0;background:url();以上四種方法都能實(shí)現(xiàn)隱藏文字,但是各有優(yōu)缺點(diǎn),我們?cè)趯?shí)際應(yīng)用的過程中需要根據(jù)實(shí)際情況來選擇。多多實(shí)踐
以上就是四種利用Div+Css實(shí)現(xiàn)隱藏文字內(nèi)容的方法的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)和解決疑問有所幫助,也希望大家多多支持武林網(wǎng)。新聞熱點(diǎn)
疑難解答
圖片精選