原文作者Stephanie Walter
我們已經完成了jQuery Mobile教程的應用構建部分，現在我們必須再用一點樣式使應用更耀眼。
自定義CSS:樣式化我們的jQuery Mobile應用
你可以在.zip文件中找到所有使用的樣式文件。你允許以演示目的使用它們，但不能以商業目的使用。要樣式化jQuery Mobile應用，有兩個方案：刪除jquery.mobile-1.0.1.css 文件然后重新寫一個自己的，或者添加第三個css文件來替換某些jQuery Mobile樣式。這里我們采取第二方案，因為jQuery Mobile基礎設計大多符合本應用的要求。你也能使用jQuery Mobile Theme roller創建自定義主題而不必寫太多的css。
一些全局樣式
這部分css改變了某些jQuery Mobile全局樣式。
第一行給應用背景添加紗化圖片和box-shadow，這讓整體設計有些深度。我們也改變了背景顏色。做過許多IOs應用，圓角有一點過度使用了（但這是 個人口味），因此本教程改變所有jQuery Mobile過重的0.6em圓角為更謹慎的0.2em半徑的圓角。然后改變活動按鈕的藍色漸變為棕色。
最后部分是響應式圖片技巧，使得他們很好的表現在各種瀏覽器上。
首頁樣式
應用首頁應該有一個特別的風格。首頁必須給用戶的一個好印象才願意停留。現在我們需要用一個精致的logo作為應用的標識。如下是效果圖
讓我們看一下css
正如你所見，我們用眾所周知的技巧使標識的文本元素消失同時用logo取代。我們也用漂亮的圖片加入h1問句的樣式，然后加一些空白到列表元素他們將以圖片居中。
第二頁樣式
如下是第二頁效果：
下面是我們的css代碼。
我們再次使用文本替換技巧使標題文字消失然后放上標識圖片。標題欄背景也變為棕色漸變，同樣返回按鈕也是如此。我們再添加圖片到問句的樣式。這里最后的#choisir_ville .ui-listview-filter是阻止過濾器的清除按鈕下落而重置top padding。
第三頁樣式：選擇餐廳
這是頁面效果
下面是css代碼
這里有趣的部分是星級顯示的技巧。我們僅用一張包含四顆星的圖片作為背景。奧義是改變這個元素的寬度，所以一，二還是三星的顯示取決於類。我們也隱藏了文本。
最后一頁樣式：餐廳詳細信息
最多的工作是在這個頁面是
如下是css代碼。
第一行只是基本的樣式使屏幕畫面更美觀。值得注意的是.ui-icon-maps和.ui-icon-tel。記得我們給按鈕添加一個特定的data-icon類，創建並使用這些類，我們可以方便的給按鈕添加自定義圖標，只需改變背景圖案。
最 后部分的技巧是添加星形選擇框。星型放在pagination.png圖片里。但這里，我們不能使用上一頁的寬度技巧。相反我們用一個固定寬度的偽類，靠 把背景位置左移來“隱藏”不要顯示的星星。因為我們的選擇項沒有指定任何特別的類，不得不用+號選擇器來定位每個li元素，從第一個到第四個。
最 后的關鍵是添加星級到列表選定項。不幸的是我們不能用純css來完成，因此不得不在這里用一點JavaScript（實際是一些jQuery）代碼。這段 腳本背后的主要想法是，當頁面載入和選項改變時，獲取選定項的類（記得我們在HTML代碼里給他們賦了類），然后把這個類到應用到選擇框，這樣我們能動態 的改變星級。
如下是腳本代碼
$( ‘#restau’ ).live( ‘pageinit’,function(event){ 在jQuery Mobile相當於document.ready。我們分兩種情況。一個是當頁面載入，另一個是當觸發選擇改變，也就是當選擇另一個評 級。腳本給#note_utilisateur-button添加星級的類，和上面css相同原理。
最后一個小技巧
最后我們可做的一件事，給這個web應用加一個觸控手段，為iOS設備添加圖標。在iOS設備上，用戶能為應用創建一個快捷方式到“桌面”。如下代碼添加到html頭部
你必須為不同設備和分辨率各提供一個57，72和114px寬度的圖片。
總結
今天我們看到如何創建一個漂亮的近似原生應用的HTML5 jQuery Mobile web應用。當然這只是前端部分;你還必須添加服務器端部分，來保存數據，生成每個城鎮的頁面等等。但這讓你很好的了解jQuery Mobile是如何工作的，以及你可以用它做什么。
如果你想要看到更多jQuerey Mobile網站，可以看一下JqmGallery,一個用jQuery Mobile建立的web應用和網站的展示。