• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 網(wǎng)站建設(shè) >> 網(wǎng)頁設(shè)計(jì) >> 網(wǎng)站設(shè)計(jì)中令人糾結(jié)但很有用的一些技巧

網(wǎng)站設(shè)計(jì)中令人糾結(jié)但很有用的一些技巧

• 作者：創(chuàng)新互聯(lián) 文章來源：前端開發(fā)部 點(diǎn)擊數(shù)： 更新時間：2008-04-25
• 1、讓超鏈接點(diǎn)擊無虛線框
  
  　　正常情況下點(diǎn)擊超鏈接的時候會有一個虛線狂出現(xiàn)，可能有些人覺得這個框比較煩人或者會影響整個頁面效果所以想出各種辦法來去掉它，估計(jì)很多設(shè)計(jì)師都遇到過類似的需求吧。
  
  　　下面是IE、FF、Chrome三個瀏覽器下的效果圖，除了Chrome不顯示虛線框之外IE、FF下都能看到這個效果。
  
   
   
  
  （配圖：淘寶網(wǎng)）
   
  解決方案：
  1、可以設(shè)置outline:none; 此CSS樣式只在FF下有效
  2、更好的解決方案創(chuàng)新互聯(lián)
  創(chuàng)新互聯(lián)
  3、
  a {
   outline:none;                                /*移除超鏈的虛線框  IE8,FF有用*/
          hide-focus: expression(this.hideFocus=true); /*IE6、IE7*/
  }
   
  補(bǔ)充：去掉之后對于采用 Tab 鍵來做導(dǎo)航的用戶會非常不友好，看不到當(dāng)前的焦點(diǎn)。
    
  2、文字兩端對齊
  　　在word排版中很非常常見的一個效果，設(shè)計(jì)樣稿出圖的時候?yàn)榱嗣烙^設(shè)計(jì)師應(yīng)該都會對文字的字間距、行距甚至對文字進(jìn)行壓縮等處理讓文字看起來更規(guī)整更好看。但是實(shí)際在網(wǎng)頁中在顯示文字的時候我們也是可以通過CSS樣式進(jìn)行類似的處理的，比如我們可以通過line-height樣式來控制行距，但是沒法對文字進(jìn)行單個壓縮，所以如果設(shè)計(jì)稿上有對文字進(jìn)行過壓縮的最后出來的實(shí)際效果可能會有一些差別。
  
  （配圖：天津銀河國際購物中心 ）
   
  解決方案：
  可以通過樣式：text-justify:distribute;text-align:justify;進(jìn)行控制，效果如圖。
  
  3、取消chrome輸入框高亮  
  :focus {outline: 0;} >
• 讓企業(yè)網(wǎng)站設(shè)計(jì)更友好的7個訣竅 :上一篇
  如何讓網(wǎng)頁設(shè)計(jì)更優(yōu)秀 :下一篇