纯CSS3制作漂亮带动画效果的主机价格表


Posted in HTML / CSS onApril 25, 2015

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

纯CSS3制作漂亮带动画效果的主机价格表

源码下载:点此下载

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;
}


完~
HTML / CSS 相关文章推荐
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 #HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 #HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 #HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 #HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 #HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 #HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 #HTML / CSS
You might like
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
thinkphp分页集成实例
2017/07/24 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
js实现图片轮播效果
2015/12/19 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
vue各种事件监听实例(小结)
2020/06/24 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python中的闭包详细介绍和实例
2014/11/21 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python3监控疫情的完整代码
2020/02/20 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
触摸春天教学反思
2014/02/03 职场文书
写求职信有什么意义
2014/02/17 职场文书
给下属加薪申请报告
2015/05/15 职场文书
初中语文教学随笔
2015/08/15 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
php去除数组中为0的元素的实例分析
2021/11/17 PHP
MySQL创建管理RANGE分区
2022/04/13 MySQL
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS