纯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实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
CSS预处理框架——Stylus
Apr 21 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
js实现日历与定时器
2017/02/22 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
微信小程序开发背景图显示功能
2018/08/08 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
Python实现字典的key和values的交换
2015/08/04 Python
Python3爬虫全国地址信息
2019/01/05 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
趣味运动会广播稿
2015/08/19 职场文书
六年级情感作文之500字
2019/10/23 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server