5月04th

纯CSS3制作漂亮的价格表

DIY前端设计我来说两句!

本文地址:http://www.uetenvirosys.com/frontlogy/806.html
文章摘要:纯CSS3制作漂亮的价格表 ,网帖短时间内便吸引大量网友关注,并以压倒性的高票获得支持。在近日举行的2018海上风电峰会上,与会专家表示,在我国海上风电的下一阶段发展中,须通过技术创新和规模化开发,尽快摆脱补贴依赖,通过市场化方式发展。  此外,若员工在事前的调查表回复“不愿随同业务转隶”,依规应由台湾铁路部门办理出资遣散,毕竟现在员工的聘用契约是和台湾铁路部门签的,遣散费不应由台湾林业部门负担。,不仅仅是农事劳作,还包括养生、饮食等等。    要闻四校外培训机构“超纲教学”被叫停  记者26日从教育部了解到,针对一些校外培训机构开展以“应试”为导向的培训,影响学校正常教育教学秩序,造成学生课外负担过重,增加家庭经济负担等问题,教育部、民政部、人力资源社会保障部、国家工商行政管理总局决定联合开展三个阶段的专项治理行动。医疗行业关乎生死,需要严守合法、合规关口,严把完善准入标准,规范出国看病流程。。

网页上发布产品时,一般都有几套价格方案,通常我们将几套方案放在一起,用户可以相互比较决定购买哪个套餐。最常见的是主机商发布产品价格信息页,本文结合实例给大家分享以纯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,转载请注明!