怎么用CSS3制作漂亮的价格表
更新:HHH   时间:2023-1-7


这篇文章主要讲解了“怎么用CSS3制作漂亮的价格表”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用CSS3制作漂亮的价格表”吧!

网页上发布产品时,一般都有几套价格方案,通常我们将几套方案放在一起,用户可以相互比较决定购买哪个套餐。最常见的是主机商发布产品价格信息页,本文结合实例给大家分享以纯CSS+HTML实现的价格表。

HTML

我们以某公司推广VPS产品为例,将HTML结构布局好。其实我们所说的价格表并不是表格,全是ul,li元素组成,通过CSS来美化,展现在我们面前的页面效果看似表格而已。

<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>小型企业、个人首选</li> <li>双核至强处理器</li> <li>1G DDR3 ECC <span>高速纠错内存</span></li> <li>10G + 20G <span>高速企业级硬盘</span></li> <li>1M <span>专线带宽</span></li> <li>1个 <span>独立公网IP</span></li> </ul> </li> <li class="button"><a href="#">点击购买</a></li> </ul> </li> ....多个重复的li </ul> </p>

CSS

我们运用CSS将几个li排列成一行,使用CSS3实现阴影、圆角以及鼠标滑上动画效果,以下是抄录部分css代码。大家可以下载源码包查看完整的代码,当然你也可以使用css3构造响应式布局。

#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制作漂亮的价格表”的内容了,经过本文的学习后,相信大家对怎么用CSS3制作漂亮的价格表这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是天达云,小编将为大家推送更多相关知识点的文章,欢迎关注!

返回开发技术教程...