卡片式布局在手机版的网站中很常见，这一点Ratchet框架中，，这一点还做得不错的。
本手机版网页的开放前端框架的搭建，在《【Ratchet】Ratchet2.0.2的下载、配置与Helloworld》（点击打开链接）中已经介绍过了。
比如如下的效果：
其实现代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""><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>其中，本网页所处的目录结构如下：
接受失败等于放松自己高压的心理，
