纯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 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
javascript函数库-集合框架
2007/04/27 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
解决python flask中config配置管理的问题
2019/07/26 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
艺术设计专业个人求职信
2013/09/21 职场文书
竞职演讲稿范文
2014/01/11 职场文书
奠基仪式致辞
2015/07/30 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技