Latest web development tutorials

Foundation 價格表

價格表可用於展示企業產品:

實例

< ul class= "pricing-table" >
< li class= "title" > Basic < /li >
< li class= "price" > $19.99 < /li >
< li class= "description" > Great for small business < /li >
< li class= "bullet-item" > 24/7 Support < /li >
< li class= "bullet-item" > 15GB Storage < /li >
< li class= "bullet-item" > 1GB Bandwidth < /li >
< li class= "cta-button" > < a class= "button" href= "#" > Buy < /a > < /li >
< /ul >

嘗試一下»

實例解析

  • ul.pricing-table -定義價格表
  • li.title -定義產品標題(黑色背景)
  • li.price -定義價格(灰色背景字體大個項)
  • li.description -定義產品描述(如果需要)
  • li.bullet-item -定義產品特點
  • li.ca-button -按鈕文本(如"Buy", "Join", "Sign Up",等)

注意:表格會100%填充容器的寬度,所有的項都有邊框且是居中的。


價格表網格

以下實例顯示了三個企業產品的價格(三項是均等劃分寬度的):

實例

< div class= "row" >
< div class= "medium-4 columns" >
< ul class= "pricing-table" >
< li class= "title" > Basic < /li >
...
< /ul >
< /div >
< div class= "medium-4 columns" >
< ul class= "pricing-table" >
< li class= "title" > Pro < /li >
...
< /ul >
< /div >
< div class= "medium-4 columns" >
< ul class= "pricing-table" >
< li class= "title" > Premium < /li >
...
< /ul >
< /div >
< /div >

嘗試一下»