怎么用CSS3制作漂亮的價(jià)格表

這篇文章主要講解了“怎么用CSS3制作漂亮的價(jià)格表”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用CSS3制作漂亮的價(jià)格表”吧！

網(wǎng)頁上發(fā)布產(chǎn)品時(shí)，一般都有幾套價(jià)格方案，通常我們將幾套方案放在一起，用戶可以相互比較決定購買哪個(gè)套餐。最常見的是主機(jī)商發(fā)布產(chǎn)品價(jià)格信息頁，本文結(jié)合實(shí)例給大家分享以純CSS+HTML實(shí)現(xiàn)的價(jià)格表。

HTML

我們以某公司推廣VPS產(chǎn)品為例，將HTML結(jié)構(gòu)布局好。其實(shí)我們所說的價(jià)格表并不是表格，全是ul，li元素組成，通過CSS來美化，展現(xiàn)在我們面前的頁面效果看似表格而已。

<p id="pricePlans"> <ul id="plans"> <li class="plan"> <ul class="planContainer"> <li class="title"><h3>入門型VPS</h3></li> <li class="price"><p>￥149/<span>月</span></p></li> <li> <ul class="options"> <li>小型企業(yè)、個(gè)人首選</li> <li>雙核至強(qiáng)處理器</li> <li>1G DDR3 ECC <span>高速糾錯(cuò)內(nèi)存</span></li> <li>10G + 20G <span>高速企業(yè)級(jí)硬盤</span></li> <li>1M <span>專線帶寬</span></li> <li>1個(gè) <span>獨(dú)立公網(wǎng)IP</span></li> </ul> </li> <li class="button"><a href="#">點(diǎn)擊購買</a></li> </ul> </li> ....多個(gè)重復(fù)的li </ul> </p>

CSS

我們運(yùn)用CSS將幾個(gè)li排列成一行，使用CSS3實(shí)現(xiàn)陰影、圓角以及鼠標(biāo)滑上動(dòng)畫效果，以下是抄錄部分css代碼。大家可以下載源碼包查看完整的代碼，當(dāng)然你也可以使用css3構(gòu)造響應(yīng)式布局。

#plans,#plans ul,#plans ul li { margin: 0; padding: 0; list-style: none; } #pricePlans:after { content: ''; display: table; clear: both; } #pricePlans { zoom: 1; } #pricePlans { max-width: 69em; margin: 2em auto; } #pricePlans #plans .plan { background: #fff; float: left; text-align: center; border-radius: 5px; border:1px solid #d3d3d3; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0,0,0,0.1); width: 23%; margin: 0 1.33% 20px 0; -webkit-transition: all .25s;   -moz-transition: all .25s;    -ms-transition: all .25s;     -o-transition: all .25s;        transition: all .25s; } #pricePlans #plans .plan:hover { -webkit-transform: scale(1.04);   -moz-transform: scale(1.04);    -ms-transform: scale(1.04);     -o-transform: scale(1.04);        transform: scale(1.04); } .planContainer .title h3 { font-size: 2.125em; font-weight: 300; color: #3e4f6a; margin: 0; padding: .6em 0; } .planContainer .title h3.bestPlanTitle { background: #3e4f6a; background: -webkit-linear-gradient(top, #475975, #364761); background: -moz-linear-gradient(top, #475975, #364761); background: -o-linear-gradient(top, #475975, #364761); background: -ms-linear-gradient(top, #475975, #364761); background: linear-gradient(top, #475975, #364761); color: #fff; border-radius: 5px 5px 0 0; } .planContainer .price p { background: #3e4f6a; background: -webkit-linear-gradient(top, #475975, #364761); background: -moz-linear-gradient(top, #475975, #364761); background: -o-linear-gradient(top, #475975, #364761); background: -ms-linear-gradient(top, #475975, #364761); background: linear-gradient(top, #475975, #364761); color: #fff; font-size: 1.2em; font-weight: 700; height: 2.6em; line-height: 2.6em; margin: 0 0 1em; } .planContainer .price p.bestPlanPrice { background: #f7814d; } .planContainer .price p span { color: #8394ae; }

感謝各位的閱讀，以上就是“怎么用CSS3制作漂亮的價(jià)格表”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用CSS3制作漂亮的價(jià)格表這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！