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价格表代码,我们可以轻松实现一个美观的价格列表,给用户提供更好的体验。