使用CSS3，HTML5和Javascript重新創建WP7 Metro UI的外觀和風格

Question

是否有任何可以使用CSS/javascript/HTML5爲Windows Phone 7創建/重新創建常用Metro UI控件的示例？

Answer 1

無恥插頭：https://github.com/ace-subido/css3-microsoft-metro-buttons嘗試使用這個CSS/JS庫地鐵 - 按鈕:)

Answer 2

是的，有一些簡單的例子在這裏：

Developing Windows Phone 7 HTML5 apps with PhoneGap

請嘗試以下方法讓你開始：

body, input, div, span 
{ 
    font-size: 20px; 
    color: white; 
    font-family: Segoe WP, Sans-Serif; 
} 

body 
{ 
    background:black; 
    margin:0; 
    padding:0; 
} 

h2 
{ 
    font-weight: normal; 
    font-size: 32px; /* PhoneFontSizeLarge */ 
} 

h1 
{ 
    font-weight: normal; 
    font-size: 42.667px; /* PhoneFontSizeExtraLarge */ 
} 

button 
{ 
    background: black; 
    color: white; 
    border: 3px solid white; /* PhoneBorderThickness */ 
    padding: 6px 10px; 
    font-size: 25.333px; /* PhoneFontSizeMediumLarge */ 
    position: relative; 
    top: -4px; 
} 

button:active 
{ 
    background: white; 
    color: black; 
} 

button:disabled 
{ 
    opacity: 0.7; 
} 

input[type="text"] 
{ 
    font-size: 25.333px; /* PhoneFontSizeMediumLarge */ 
    width: 200px; 
    padding: 6px; 
    height: 31px; 
    border: 3px solid white; 
    color: black; 
} 

input[type="checkbox"] 
{ 
    width: 32px; 
    height: 32px; 
    vertical-align: middle; 
}