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
>

尝试一下 »

网站栏目：创新互联Foundation教程：Foundation价格表
地址分享：http://cdbrznjsb.com/article/dpcedoi.html