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

HTML

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

• • 入门型VPS

  • ￥149/月

  • • 小型企业、个人首选
    • 双核至强处理器
    • 1G DDR3 ECC 高速纠错内存
    • 10G + 20G 高速企业级硬盘
    • 1M 专线带宽
    • 1个 独立公网IP
  • 点击购买
....多个重复的li

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; }