纯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实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 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
mayfish 数据入库验证代码
2010/04/30 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
React实现轮播效果
2020/08/25 Javascript
Python数据操作方法封装类实例
2017/06/23 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
python里 super类的工作原理详解
2019/06/19 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python 画条形图(柱状图)实例
2020/04/24 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
初三学生评语大全
2014/04/24 职场文书
连锁超市项目计划书
2014/09/15 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS