5月04th

纯CSS3制作漂亮的价格表

DIY前端设计我来说两句!

本文地址:http://www.uetenvirosys.com/frontlogy/806.html
文章摘要:纯CSS3制作漂亮的价格表 ,”联讯证券策略团队说道。符朝宁说,建市之前没有条件和能力对垃圾进行处理,垃圾到处都是,现在采购了一系列垃圾处理设备,环境有很大程度的改观,为大家提供了一个好的生活环境。  同时,基本放开制造业。,延长增量和更新指标有效期。”陈璐敏说。在此次调图以后,加长版的长编组“复兴号”将首次与公众见面。。

网页上发布产品时,一般都有几套价格方案,通常我们将几套方案放在一起,用户可以相互比较决定购买哪个套餐。最常见的是主机商发布产品价格信息页,本文结合实例给大家分享以纯CSS+HTML实现的价格表。

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

下载地址: 纯CSS3制作漂亮的价格表

本文出自:时时彩平台,链接:http://www.uetenvirosys.com/frontlogy/806.html,转载请注明!