Windows 8：使用HTML5/CSS創建AppBar樣式按鈕

對於Windows 8應用程序，我可以使用'Segoe UI Symbol'創建AppBar樣式按鈕，但是它們繪製在矩形區域中，因此具有矩形背景。由於我想在懸停期間將其背景設置爲不同的顏色，因此我需要擺脫此矩形。Windows 8：使用HTML5/CSS創建AppBar樣式按鈕

正如在下面的問題中指出的那樣，按鈕和樣式的定義如圖所示。

請給出一個方向如何實現。

create image from character

HTML：

<button id="myAppBarIcon" class="normal-size-icon">&#xE1D8;</button>

CSS：

.normal-size-icon { 
    margin-top: 400px; 
    margin-left: 630px; 
    position: relative; 
    font-size: 24px; 
    font-family: 'Segoe UI Symbol'; 
    color: rgb(255, 255, 255); 
    background: none; 
    border: none; 
}

更新：

下面的代碼做的伎倆，但字體沒有正確對齊。可能是因爲它沒有被正確對齊。下圖顯示了佈局。

.normal-size-icon { 
    font-size: 24px; 
    font-family: 'Segoe UI Symbol'; 
    color: rgb(555, 255, 255); 
    min-width: 0; 
    min-height: 0; 
    border-radius: 50%; 
    border-style: solid; 
    padding: 0; 
    text-align: center; 
}

Font does not align properly

來源

2013-01-07 Gökhan Şengün

你能提供一張錯誤行爲圖片嗎？ –

對於這一點，你需要設置border-radius:50%;所以您的按鈕將改變形狀以圓形，然後添加min-width:0; min-height:0;和text-align:center;這裏是完整的CSS：

.normal-size-icon { 
    font-size: 24px; 
    font-family: 'Segoe UI Symbol'; 
    color: rgb(555, 255, 255); 
    min-width: 0; 
    min-height: 0; 
    border-radius: 50%; 
    border-style: solid; 
    padding: 0; 
    text-align: center; 
}

如果你不需要邊框，你可以設置border:none;。對不起，我的英文不好

來源

2013-01-08 04:13:22

它伎倆，謝謝，但我認爲這個符號不是垂直或水平對齊的。它看起來像我更新的問題。無論我做了什麼，我都無法使它正確對齊。 –

嗯，我不知道爲什麼你的符號沒有正確對齊，但我在我的項目中測試過，它符合中心符號。你有沒有設置任何其他風格的按鈕的ID？ –

哦，我明白了。一個單獨的項目不會顯示問題。感謝您的答案，現在就標記出來。 –

此行爲是由CSS hover selector驅動，一個按鈕的默認CSS有將提供一些與光或暗的主題，如對齊，

button:hover, input[type=button]:hover, input[type=reset]:hover, 
input[type=file]::-ms-browse:hover { 
    background-color: rgba(255, 255, 255, 0.13); 
    border-color: rgb(255, 255, 255); 
}

你可以用類似的東西來替代它：

.normal-size-icon:hover { 
    background-color: red; 
}

，但可能有其他狀態和對象需要進行類似的處理。

查看您的參考文獻中包含的ui-light.css和![ui-dark.css][1];所有的答案都在那裏:)

enter image description here

來源

2013-01-08 01:39:16

Windows 8：使用HTML5/CSS創建AppBar樣式按鈕

回答

相關問題