1. 以圖換字的幾種方法,及優(yōu)缺點(diǎn)定枷?
- 首先工秩,這樣的問(wèn)題只有在:想保留鏈接的背景,但又要鏈接里的文字消失个初!這種情況下才用的多
- 然后怎么解決呢?
1.讓文字包裹層display:none方法猴蹂,代碼如下
1 <style>
2 #logo a {background:url(test.jpg) no-repeat; width:195px; height:210px; display:block;}
3 #logo a span {display:none;}
4 </style>
5 <div id="logo">
6 <a href="URL" title="團(tuán)購(gòu)最低價(jià)院溺,越團(tuán)越便宜">
7 <span>團(tuán)購(gòu)最低價(jià),越團(tuán)越便宜</span>
8 </a>
9 </div>
注意幾點(diǎn):a標(biāo)簽要設(shè)置display:block磅轻,是因?yàn)閍是inline元素珍逸,寬高由內(nèi)容決定逐虚,現(xiàn)在文字display:none了,沒(méi)有寬高了谆膳,所以這樣會(huì)導(dǎo)致這個(gè)鏈接也就成了一個(gè)沒(méi)有熱區(qū)的鏈接了叭爱,點(diǎn)不到了。所以設(shè)置display:block就可以點(diǎn)擊到了J B蛭怼!
- 如果你覺(jué)得加了span標(biāo)簽覺(jué)得多余杨帽,可以考慮下面這種方法:
代碼:
1 <style>
2 #logo, #logo a {width:195px; height:21px;overflow:hidden; }
3 #logo a {background:url(test.jpg) no-repeat; padding-left: 195px; display:block;}
4 </style>
5 <div id="logo"><a href="URL" title="團(tuán)購(gòu)最低價(jià)漓穿,越團(tuán)越便宜">團(tuán)購(gòu)最低價(jià),越團(tuán)越便宜</a></div>
原理; 利用paading把文字內(nèi)容擠出容器注盈,父元素注意添加overflow:hidden;
2. px和em和rem的區(qū)別晃危??
px:像素單位老客,是相對(duì)于屏幕分辨率而言的相對(duì)長(zhǎng)度單位僚饭。
特點(diǎn):
- px設(shè)置字體大小時(shí),比較穩(wěn)定和精確沿量。
存在的問(wèn)題浪慌,用戶瀏覽網(wǎng)頁(yè),對(duì)頁(yè)面進(jìn)行縮放朴则,就會(huì)使Web布局打破权纤。
em:也是相對(duì)長(zhǎng)度單位
特點(diǎn):
- 相對(duì)于父級(jí)元素內(nèi)的字體大小再進(jìn)行計(jì)算得出的。
注意的問(wèn)題:在使用em作為單位時(shí)乌妒,body選擇器中聲明Font-size=62.5%汹想;
rem:CSS3新增的一個(gè)相對(duì)單位(root em,根em)撤蚊,和em的區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)古掏,仍然是相對(duì)大小,但相對(duì)的只是HTML根元素侦啸。
特點(diǎn):
既可以做到只修改根元素就成比例地調(diào)整所有字體大小槽唾,又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。除了IE8及更早版本外光涂,所有瀏覽器均已支持rem庞萍。對(duì)于不支持它的瀏覽器,應(yīng)對(duì)方法也很簡(jiǎn)單忘闻,就是多寫(xiě)一個(gè)絕對(duì)單位的聲明钝计。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。例:
p {font-size:14px; font-size:.875rem;}
注意的問(wèn)題:選擇使用什么字體單位主要由你的項(xiàng)目來(lái)決定,如果你的用戶群都使用最新版的瀏覽器私恬,那推薦使用rem债沮,如果要考慮兼容性,那就使用px,或者兩者同時(shí)使用本鸣。
px 與 rem 的選擇疫衩?
對(duì)于只需要適配少部分手機(jī)設(shè)備,且分辨率對(duì)頁(yè)面影響不大的永高,使用px即可 隧土。
對(duì)于需要適配各種移動(dòng)設(shè)備,使用rem命爬,例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備曹傀。