卡片式布局在手机版的网站中很常见，这一点Ratchet框架中，这一点还做得不错的。
本手机版网页的开放前端框架的搭建，在《【Ratchet】Ratchet2.0.2的下载、配置与Helloworld》（点击打开链接）中已经介绍过了。
比如如下的效果：
其实现代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--自适应手机屏幕-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!--适应苹果手机-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--不要被百度转码-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!--引入RatChet资源-->
<script type="text/javascript" src="js/ratchet.min.js"></script>
<link href="css/ratchet.min.css" rel="stylesheet" type="text/css" >
<title>Card</title>
</head>
<body>
<div class="content">
<!--RatChet卡片式布局开始-->
<ul class="table-view">
<li class="table-view-cell media">
<a class="navigate-right">
<!--标题傍边的图片在这里修改-->
<img class="media-object pull-left" src="imgs/img7.jpg" width="42" height="42" />
<!--这里可以指明点击该卡片的跳转-->
<div class="media-body" onClick="javascript:window.location.href='#'">
标题1
<p>内容</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right">
<img class="media-object pull-left" src="imgs/img8.jpg" width="42" height="42" />
<div class="media-body">
标题2
<p>内容</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="navigate-right">
<img class="media-object pull-left" src="imgs/img9.jpg" width="42" height="42" />
<div class="media-body">
标题3
<p>内容</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>其中，本网页所处的目录结构如下：
原文地址：http://blog.csdn.net/yongh701/article/details/45485159
