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 >
< 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 >
< 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 >
嘗試一下»