[分享]css充话费选择金额样式

CSS是前端开发中必不可少的一部分，它不仅可以美化页面，还可以实现一些有趣的效果。在充话费的页面中，我们可以使用CSS来实现选择金额的样式。 .amountlist { display: flex; ...

CSS是前端开发中必不可少的一部分，它不仅可以美化页面，还可以实现一些有趣的效果。在充话费的页面中，我们可以使用CSS来实现选择金额的样式。

 .amount-list {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .amount-item {
        width: 100px;
        height: 50px;
        margin: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .amount-item:hover {
        background-color: #eee;
    }

    .amount-item.active {
        background-color: #2ecc71;
        color: #fff;
    } 

以上代码中，我们使用了flex布局来使选择金额的列表居中并自动换行。我们给每一个金额按钮设置了宽高、边距、边框、圆角、字体大小和居中样式，并增加了鼠标指针样式。当鼠标悬停在按钮上时，我们使用CSS伪类:hover来增加背景颜色。当用户点击其中一个按钮时，我们给它添加一个active的类，来增加背景颜色和文字颜色。

这样，我们就实现了一个简单的选择金额样式。通过CSS的灵活运用，我们可以为用户提供更好的体验。