列舉在移動Web開發中經常會設定的特殊樣式!
在實際開發中,移動Web頁面的設計風格更接近App(手機應用),而不是傳統的網頁。為了有更好的使用者體驗,我們可以給移動Web頁面設定一些特殊樣式。下面為列舉在移動Web開發中經常會設定的特殊樣式,具體如表1所示。
表1 移動端特殊樣式
需要注意的是,上述樣式是非標準的,因此加上了私有字首“-webkit-”,該字首在WebKit和Blink核心的瀏覽器中有效,適用於Chrome瀏覽器和大多數移動端瀏覽器。
為了讓讀者更好地理解,下面我們透過例2-5進行案例演示。
【例2-5】
(1)建立C:\web\chapter02\demo05.html檔案,具體程式碼如下。
上述程式碼中,第8~10行程式碼設定a標籤樣式中的-webkit-tap-highlight-color的值為transparent,表示當單擊這個超連結時,清除單擊高亮效果;第11~13行程式碼設定按鈕樣式中的-webkit-appearance的值為none,用來去除按鈕的原生樣式。
(2)在瀏覽器中開啟demo05.html,執行結果如圖1所示。
在圖1中,按鈕的預設樣式已經被取消。當使用者單擊超連結時,不會顯示超連結的背景顏色。讀者可以嘗試移除特殊樣式,對比新增和移除後的區別。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2770048/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 列舉在Web前端開發中經常會設定的特殊樣式!Web前端
- QTableWidget 設定列寬樣式QT
- SQL 自定義函式 生成網路卡地址,MES開發中經常會用到的SQL函式
- Android開發之動態設定字型的樣式和粗細Android
- 移動應用開發過程中的迭代式原型設計原型
- UIBarButtonSystemItem 列舉樣式檢視UIMIT
- 移動web——移動web開發簡介,WebStorgae簡介Web
- 用列舉來驅動 TableView 開發View
- Word中的樣式設定快捷鍵
- 移動 WEB 開發的佈局方式 ---- 響應式佈局Web
- 移動web開發總結Web
- h5在移動開發中的準則H5移動開發
- HTML5在移動開發中的現狀HTML移動開發
- web前端學習:CSS樣式設定技巧Web前端CSS
- EAS_WEB.設定控制元件樣式Web控制元件
- 《HTML5移動Web開發實戰》——第1章 移動Web設計趨勢HTMLWeb
- 安卓開發--textView的字型樣式設定(設定宋體,微軟雅黑等)安卓TextView微軟
- javascript如何動態設定div的樣式JavaScript
- 好程式設計師web前端分享移動前端開發和web前端開發的區別程式設計師Web前端
- 移動端 web 開發的設計稿與工作流Web
- 列舉型別在JPA中的使用型別
- 移動web開發小貼示Web
- web移動開發總結(六)Web移動開發
- 移動web開發之touch事件Web事件
- Web Components 系列(八)—— 自定義元件的樣式設定Web元件
- CSS中position樣式的一些特殊用法CSS
- 移動端網站開發要點-meta設定網站
- 移動開發經典書架移動開發
- 移動web開發之移動端真機測試Web
- Java enum列舉類詳解 列舉的常見用法Java
- 我是如何從Web開發轉向移動開發的?Web移動開發
- MobileLab移動開發小聚會移動開發
- 在web工程中設定首頁的頁面Web
- 介面和列舉在方法中的區別
- 移動端 Web 開發踩坑之旅Web
- 10個Web移動開發JavaScript框架Web移動開發JavaScript框架
- 移動web開發之視口viewportWebView
- HTML5移動Web開發指南HTMLWeb