首頁(yè)技術(shù)文章正文

怎樣給移動(dòng)端頁(yè)面設(shè)置不同于PC端的樣式?

更新時(shí)間:2021-01-21 來(lái)源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

在實(shí)際開(kāi)發(fā)中,移動(dòng)Web頁(yè)面的設(shè)計(jì)風(fēng)格更接近App(手機(jī)應(yīng)用),而不是傳統(tǒng)的網(wǎng)頁(yè)。為了有更好的用戶體驗(yàn),我們可以給移動(dòng)Web頁(yè)面設(shè)置一些特殊樣式。下面為列舉在移動(dòng)Web開(kāi)發(fā)中經(jīng)常會(huì)設(shè)置的特殊樣式,具體如表1所示。

表1 移動(dòng)端特殊樣式

移動(dòng)端特殊樣式代碼

需要注意的是,上述樣式是非標(biāo)準(zhǔn)的,因此加上了私有前綴“-webkit-”,該前綴在WebKit和Blink內(nèi)核的瀏覽器中有效,適用于Chrome瀏覽器和大多數(shù)移動(dòng)端瀏覽器。

為了讓讀者更好地理解,下面我們通過(guò)例2-5進(jìn)行案例演示。

【例2-5】

(1)創(chuàng)建C:\web\chapter02\demo05.html文件,具體代碼如下。

 <!DOCTYPE html>
   <html>
   <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>特殊樣式</title>
    <style>
     a {
      -webkit-tap-highlight-color: transparent;
    }
    input {
     -webkit-appearance: none;
    }
   </style>
  </head>
   <body>
   <a href="#">超鏈接</a>
   <input type="button" value="按鈕">
  </body>
  </html>

上述代碼中,第8~10行代碼設(shè)置a標(biāo)簽樣式中的-webkit-tap-highlight-color的值為transparent,表示當(dāng)單擊這個(gè)超鏈接時(shí),清除單擊高亮效果;第11~13行代碼設(shè)置按鈕樣式中的-webkit-appearance的值為none,用來(lái)去除按鈕的原生樣式。

(2)在瀏覽器中打開(kāi)demo05.html,運(yùn)行結(jié)果如圖1所示。

移動(dòng)端設(shè)置特殊樣式

圖1 設(shè)置特殊樣式

在圖1中,按鈕的默認(rèn)樣式已經(jīng)被取消。當(dāng)用戶單擊超鏈接時(shí),不會(huì)顯示超鏈接的背景顏色。讀者可以嘗試移除特殊樣式,對(duì)比添加和移除后的區(qū)別。



猜你喜歡:

網(wǎng)頁(yè)前端開(kāi)發(fā)工具有哪些?

如何單獨(dú)制作移動(dòng)端頁(yè)面?單獨(dú)制作有哪些優(yōu)缺點(diǎn)?

移動(dòng)端web頁(yè)面如何定義和使用初始化樣式?

黑馬程序員web前端培訓(xùn)課程

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!