CSS價格表代碼能夠為你的網頁設計提供一種簡單且美觀的方式來呈現價格列表。在這篇文章中,我們將介紹如何使用CSS來創建帶有價格表的網頁。
.price-table { border-collapse: collapse; width: 100%; } .price-table td { padding: 10px; border-bottom: 1px solid #ddd; text-align: center; } .price-table th { background-color: #333; color: #fff; text-transform: uppercase; font-weight: bold; padding: 10px; } .price-table .basic { background-color: #f2f2f2; } .price-table .standard { background-color: #e6e6e6; } .price-table .premium { background-color: #d9d9d9; } .price-table .ultimate { background-color: #cccccc; } .price-table .buy-now { background-color: #4CAF50; color: #fff; padding: 10px; text-transform: uppercase; font-weight: bold; border-radius: 5px; cursor: pointer; }
在這個代碼段中,我們首先創建了一個`.price-table` CSS類,用于定義整個價格表的樣式。其中,我們設置了表格的邊框折疊和寬度等屬性,并為每個表格單元格設置了內部間距和底部邊框。 接下來,我們使用了`.price-table th` CSS類來定義價格表的表頭,具體設置包括設置了背景顏色、文本顏色、大寫字母轉換以及字體粗細等信息。 在`.price-table .basic`、`.price-table .standard`、`.price-table .premium`和`price-table .ultimate` CSS類中,我們分別使用不同的背景顏色來區分不同的價格選項。 最后,我們使用`.price-table .buy-now` CSS類來設置購買按鈕的樣式,具體包括背景顏色、文本顏色、內部間距、大寫字母轉換、字體粗細、邊框半徑以及光標樣式等信息。 通過上述CSS價格表代碼,我們可以輕松實現一個美觀的價格列表,給用戶提供更好的體驗。
上一篇java的接口和多態