CSS表格樣式是網頁設計中非常重要的一部分,它可以讓表格變得更加美觀和易于閱讀。下面是一些常用的CSS表格樣式,同時還帶有按鈕。
.table { border-collapse: collapse; width: 100%; max-width: 800px; margin: 0 auto; table-layout: fixed; background: #fff; box-shadow: 0px 0px 20px rgba(0,0,0,.1); text-align: center; } .table th, .table td { padding: 10px; vertical-align: middle; border: 1px solid #ddd; } .btn { display: inline-block; font-size: 16px; padding: 10px 20px; text-align: center; border: none; border-radius: 5px; background-color: #007bff; color: #fff; cursor: pointer; } .btn:hover { background-color: #0062cc; }
上面的代碼中,我們定義了一個名為“table”的類,它設置了表格的一些基本樣式,例如邊框合并、表格寬度和居中對齊等。接著,我們定義了表頭單元格和表格單元格的樣式,包括內邊距和邊框顏色等。
接下來,我們定義了一個名為“btn”的類,它用于設置按鈕的樣式。我們設置了字體大小,內邊距,文本對齊等屬性。同時,我們還定義了背景顏色為藍色,并將光標設置為指針類型。
最后,當鼠標懸停在按鈕上時,我們將背景顏色改為深藍色,這樣可以讓按鈕有更加明顯的反饋效果。
以上就是一些常用的CSS表格樣式,同時還帶有按鈕。你可以根據你的需求進行調整和修改,以達到更好的效果。
上一篇java長連接和mq
下一篇css表格每一行的寬度