價(jià)目表(Pricing Table)是網(wǎng)頁中常見的元素之一,其功能是展示不同的產(chǎn)品或服務(wù)以及相應(yīng)的價(jià)格。在平面設(shè)計(jì)中,價(jià)目表的設(shè)計(jì)通常涉及到很多圖形和約定俗成的格式,但在網(wǎng)頁開發(fā)中,除了基本的視覺設(shè)計(jì)外,使用 CSS 來構(gòu)建價(jià)目表也是一種不錯(cuò)的方法。
.pricing-table { display: flex; justify-content: center; flex-wrap: wrap; margin: 50px auto; max-width: 1000px; width: 100%; } .pricing-table__item { background-color: white; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); margin: 30px; padding: 40px 30px; text-align: center; width: 300px; } .pricing-table__item--popular { position: relative; } .pricing-table__item--popular::after { content: "Popular"; background-color: rgba(0, 120, 255, 0.9); color: white; font-size: 14px; font-weight: bold; padding: 4px 12px; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); border-radius: 20px; } .pricing-table__title { font-size: 24px; font-weight: bold; margin-bottom: 20px; } .pricing-table__price { font-size: 42px; font-weight: bold; margin-bottom: 20px; } .pricing-table__features { list-style: none; margin-bottom: 30px; padding-left: 0; } .pricing-table__features li { margin-bottom: 10px; }
以上是一個(gè)基本的 CSS 代碼,用于創(chuàng)建一個(gè)標(biāo)題欄、價(jià)格、功能列表和按鈕等。當(dāng)然,根據(jù)自己的需求,可以在代碼中添加更多的 CSS 屬性和功能。
總之,使用 CSS 來創(chuàng)建價(jià)目表可以提升網(wǎng)頁的視覺效果和用戶體驗(yàn)。而且,通過簡(jiǎn)單的修改 CSS,可以根據(jù)需求輕松地改變價(jià)目表的外觀和布局。