<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery手风琴动画滑动切换展示代码</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
</head>
<body style="background:#f5f5f5;">
<script src="/demos/googlegg.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript">
$(function() {
$("#cardArea").cardArea()
});
</script>
<ul id="cardArea" class="card-area clearfix">
<li class="card-item">
<div class="card">
<div class="card-title title-even">
<div class="content"><h1>店铺入驻</h1></div>
</div>
<div class="card-content content-first">
<div style="padding:50px;">结合大数据能力，帮助企业快速搭建各大电商平台</div>
</div>
<div class="card-content content-second">
<div class="main-info">
<ul>
<li>
<div class="left">
<p class="tit">店铺购买</p>
<p class="hys">国内专业店铺交易平台</p>
</div>
<div class="right">
<button>查看详情</button>
</div>
</li>
<li>
<div class="left">
<p class="tit">店铺评估/出售</p>
<p class="hys">由专业人员进行评估、交易</p>
</div>
<div class="right">
<button>查看详情</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="card-item active">
<div class="card">
<div class="card-title title-even">
<div class="content"><h1>店铺交易</h1></div>
</div>
<div class="card-content content-first">
<div style="padding:50px;">结合大数据能力，帮助企业快速搭建各大电商平台</div>
</div>
<div class="card-content content-second">
<div class="main-info">
<ul>
<li>
<div class="left">
<p class="tit">店铺购买</p>
<p class="hys">国内专业店铺交易平台</p>
</div>
<div class="right">
<button>查看详情</button>
</div>
</li>
<li>
<div class="left">
<p class="tit">店铺评估/出售</p>
<p class="hys">由专业人员进行评估、交易</p>
</div>
<div class="right">
<button>查看详情</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="card-item">
<div class="card">
<div class="card-title title-even">
<div class="content"><h1>电商与业务</h1></div>
</div>
<div class="card-content content-first">
<div style="padding:50px;">结合大数据能力，帮助企业快速搭建各大电商平台</div>
</div>
<div class="card-content content-second">
<div class="main-info">
<ul>
<li>
<div class="left">
<p class="tit">店铺购买</p>
<p class="hys">国内专业店铺交易平台</p>
</div>
<div class="right">
<button>查看详情</button>
</div>
</li>
<li>
<div class="left">
<p class="tit">店铺评估/出售</p>
<p class="hys">由专业人员进行评估、交易</p>
</div>
<div class="right">
<button>查看详情</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
