HTML
我们以某公司推广VPS产品为例，将HTML结构布局好。其实我们所说的价格表并不是表格，全是ul，li元素组成，通过CSS来美化，展现在我们面前的页面效果看似表格而已。
<div id="pricePlans"> <ul id="plans"> <li class="plan"> <ul class="planContainer"> <li class="title"><h2>入门型VPS</h2></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> </div>
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 h2 { font-size: 2.125em; font-weight: 300; color: #3e4f6a; margin: 0; padding: .6em 0; } .planContainer .title h2.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; }
