创新互联Foundation教程:Foundation价格表

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://www.36103.cn/qtweb/news4/10204.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联