在网页上发布产品时，通常有几套价格方案。通常我们把几个程序放在一起，用户可以互相比较来决定买哪个包，最常见的是主机公司发布产品价格信息页面。这篇文章是一个结合实例，分享了以纯html实现的价格列表。
源下载：单击此下载
HTML
我们采取一个公司来推广VPS产品，例如HTML的布局是好的，实际上，我们所说的价格表不是表单。这都是UL和李元素。它是通过CSS美化。我们面前的页面效果看起来像一种形式。
复制代码代码如下所示：
介绍VPS
人民币149元/月
小型企业和个人的首选
双核至强处理器
1G DDR3 ECC >跨度>高速内存纠错
10g±20g >跨度>高速企业级硬盘
线带宽
1 >独立公共网络ip
点击购买
…多次重复李
CSS
我们使用CSS几里排成一排，使用CSS3实现的影子，圆润的鼠标动画幻灯片，下面是CSS代码拷贝的部分。你可以下载源码包查看完整的代码，当然你可以使用CSS3构建响应式布局。
复制代码代码如下所示：
#计划计划，# UL，#计划UL Li {
保证金：0；
填充：0；
列表样式：无；
}
{ # priceplans：后
内容；
显示：表；
清楚：两者；
}
{ # priceplans
缩放：1；
}
{ # priceplans
马克斯：69em宽度；
保证金：2em汽车；
}
# priceplans # plans.plan {
背景：# FFF；
浮点数：左；
文本对齐：中心；
边界半径：5px；
边境：1px solid # d3d3d3；
Webkit框阴影：0 1px 3px RGBA（0,0,0,0.1）；
盒子的影子：0 1px 3px RGBA（0,0,0,0.1）；
宽度：23%；
保证金：1.33% 20px 0；
WebKit的过渡：all.25s；
过渡：all.25s -moz；
MS：all.25s过渡；
- O转换：all.25s；
过渡：all.25s；
}
# priceplans #计划。计划：悬停{
WebKit的变换：规模（1.04）；
-moz变换：规模（1.04）；
- ms变换：刻度（1.04）；
- o-transform：规模（1.04）；
转换：规模（1.04）；
}
plancontainer.title H2 {。
字体大小：2.125em；
字体重量：300；
颜色：# 3e4f6a；
保证金：0；
填充物：0。6em；
}
plancontainer.title h2.bestplantitle {。
背景：# 3e4f6a；
Background: -webkit-linear-gradient (top, #475975, #364761);
背景：-moz线性梯度（顶部，# 475975，# 364761）；
背景：- o-linear-gradient（顶部，# 475975，# 364761）；
背景：MS线性梯度（顶部，# 475975，# 364761）；
背景：线性梯度（顶部，# 475975，# 364761）；
颜色：# FFF；
5px 5px边界半径：00；
}
plancontainer.price p {。
背景：# 3e4f6a；
背景：WebKit的线性梯度（顶部，# 475975，# 364761）；
背景：-moz线性梯度（顶部，# 475975，# 364761）；
背景：- o-linear-gradient（顶部，# 475975，# 364761）；
背景：MS线性梯度（顶部，# 475975，# 364761）；
背景：线性梯度（顶部，# 475975，# 364761）；
颜色：# FFF；
字体大小：1.2em；
字体重量：700；
身高：2.6em；
行高：2.6em；
保证金：00 1em；
}
plancontainer.price p.bestplanprice {。
背景：# f7814d；
}
plancontainer.price P跨{。
颜色：# 8394ae；
}
最后~
