CSS3制作漂亮帶動(dòng)畫(huà)效果的主機(jī)價(jià)格表

1、css3制作漂亮帶動(dòng)畫(huà)效果的主機(jī)價(jià)格表我們以某公司推廣vps產(chǎn)品為例，將html結(jié)構(gòu)布局好。其實(shí)我們所說(shuō)的價(jià)格表并不是表格，全是ul，li元素組成，通過(guò)css來(lái)美化，呈現(xiàn)在我們面前的頁(yè)面效果看似表格而已。 復(fù)制代碼代碼如下: 入門(mén)型vps￥149/月 小型企業(yè)、個(gè)人首選雙核至強(qiáng)處理器1g ddr3 ecc >span>高速糾錯(cuò)內(nèi)存10g + 20g >span>高速企業(yè)級(jí)硬盤(pán)1m >span>專(zhuān)線帶寬1個(gè) >span>自立公網(wǎng)ip 點(diǎn)擊購(gòu)買(mǎi) .多個(gè)重復(fù)的li css我們運(yùn)用css將幾個(gè)li羅列成一行，用法css3實(shí)現(xiàn)陰影、圓角以及鼠標(biāo)滑上動(dòng)畫(huà)效果

2、，以下是抄錄部分css代碼。大家可以下載源碼包查看完整的代碼，固然你也可以用法css3構(gòu)造響應(yīng)式布局。復(fù)制代碼代碼如下: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: lef

3、t;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: al

4、l .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 h2 font-size: 2.125em;font-weight: 300;color: 3e4f6a;margin: 0;padding: .6em 0;.plancontainer .title h2.bes

5、tplantitle 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

6、: 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;.planconta