纯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线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
使用CSS设置滚动条样式
Jan 18 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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
1 Tube Radio
2021/03/02 无线电
图象函数中的中文显示
2006/10/09 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
js实现点击生成随机div
2020/01/16 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
python的常见命令注入威胁
2013/02/18 Python
Python迭代和迭代器详解
2016/11/10 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
Java程序员面试题
2016/09/27 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
节能宣传周活动总结
2014/05/08 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
小学思品教学反思
2016/02/20 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers