QQ交流群：110826636

pure css做的手机版博客园（我自己博客）

源码如下：

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5 <!--缩放比例以及允许缩放-->
  6 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7 <!--格式的检测，电话，邮箱-->
  8 <meta name="format-detection" content="telephone=no, email=no" />
  9 <!--是否显示苹果工具栏和菜单栏-->
 10 <meta name="apple-mobile-web-app-capable" content="yes" />
 11 <!--状态栏样式-->
 12 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 13 <title>手机app</title>
 14 <!--[if lte IE 8]>
 15     <link rel="stylesheet" type="text/css" href="pure0.6.0/grids-responsive-old-ie-min.css">
 16 <![endif]-->
 17 <!--[if gt IE 8]><!-->
 18 <link rel="stylesheet" type="text/css" href="pure0.6.0/pure-min.css">
 19 <!--<![endif]-->
 20 <style>
 21 .content-head {
 22     background-color: #2175bc;
 23     height: 3em;
 24 }
 25 .content-head a {
 26     text-decoration: none;
 27     color: #FFF;
 28     text-align: center;
 29     padding-top: 1em;
 30 }
 31 .content-list {
 32     margin-top: 0.5em;
 33     box-shadow: 0px 0px 8px #999;
 34 }
 35 .content-list .day {
 36     padding:0.5em;
 37 }
 38 .content-list .day .time-title {
 39     border: 1px solid #cccccc;
 40     width: 7em;
 41 }
 42 .content-list .day .time-title a {
 43     text-decoration:none;
 44 }
 45 .content-list .day .title {
 46     border-left-style: solid;
 47     border-left-color: #2175bc;
 48     font-size: 1.4em;
 49     margin:0.2em;
 50 }
 51 .content-list .day .summary {
 52     word-wrap: break-word;
 53     word-break: break-all;
 54     color: #444;
 55     font-size: 1em;
 56 }
 57 .content-list .day .posted {
 58     border-bottom: 1px dashed #E8E7D0;
 59     font-size: 0.8em;
 60     text-align: right;
 61 }
 62 .content-footer {
 63     text-align: center;
 64     font-size: 14px;
 65     color: #999;
 66 }
 67 </style>
 68 </head>
 69 <body>
 70 <div class="pure-g">
 71   <div class="pure-u-1">
 72     <div class="pure-g content-head"> <a href="/" class="pure-u-1-4">首页</a> <a href="/" class="pure-u-1-4">随笔</a> <a href="/" class="pure-u-1-4">联系</a> <a href="/" class="pure-u-1-4">订阅</a> </div>
 73   </div>
 74   <div class="pure-u-1">
 75     <div class="pure-g">
 76       <div class="pure-u-1-12"></div>
 77       <div class="pure-u-5-6 content-list">
 78         <div class="pure-g">
 79           <div class="pure-u-1">
 80             <div class="day">
 81               <div class="time-title"><a href="/">2015年5月6日</a></div>
 82               <div class="title">pure css兼容IE</div>
 83               <div class="summary">摘要: 目前Pure 0.6.0，太轻量级了，目前全部加起来只有5.5kb，做布局和扩展都很不错。官网：http://purecss.io/阅读全文</div>
 84               <div class="posted">posted @漫漫洒洒 阅读(138) 评论(0)</div>
 85             </div>
 86           </div>
 87           <div class="pure-u-1">
 88             <div class="day">
 89               <div class="time-title"><a href="/">2015年5月6日</a></div>
 90               <div class="title">pure css兼容IE</div>
 91               <div class="summary">摘要: 目前Pure 0.6.0，太轻量级了，目前全部加起来只有5.5kb，做布局和扩展都很不错。官网：http://purecss.io/阅读全文</div>
 92               <div class="posted">posted @漫漫洒洒 阅读(138) 评论(0)</div>
 93             </div>
 94           </div>
 95           <div class="pure-u-1">
 96             <div class="day">
 97               <div class="time-title"><a href="/">2015年5月6日</a></div>
 98               <div class="title">pure css兼容IE</div>
 99               <div class="summary">摘要: 目前Pure 0.6.0，太轻量级了，目前全部加起来只有5.5kb，做布局和扩展都很不错。官网：http://purecss.io/阅读全文</div>
100               <div class="posted">posted @漫漫洒洒 阅读(138) 评论(0)</div>
101             </div>
102           </div>
103           <div class="pure-u-1">
104             <div class="day">
105               <div class="time-title"><a href="/">2015年5月6日</a></div>
106               <div class="title">pure css兼容IE</div>
107               <div class="summary">摘要: 目前Pure 0.6.0，太轻量级了，目前全部加起来只有5.5kb，做布局和扩展都很不错。官网：http://purecss.io/阅读全文</div>
108               <div class="posted">posted @漫漫洒洒 阅读(138) 评论(0)</div>
109             </div>
110           </div>
111           <div class="pure-u-1">
112             <div class="day">
113               <div class="time-title"><a href="/">2015年5月6日</a></div>
114               <div class="title">pure css兼容IE</div>
115               <div class="summary">摘要: 目前Pure 0.6.0，太轻量级了，目前全部加起来只有5.5kb，做布局和扩展都很不错。官网：http://purecss.io/阅读全文</div>
116               <div class="posted">posted @漫漫洒洒 阅读(138) 评论(0)</div>
117             </div>
118           </div>
119           <div class="pure-u-1">
120             <div class="day">
121               <div class="time-title"><a href="/">2015年5月6日</a></div>
122               <div class="title">pure css兼容IE</div>
123               <div class="summary">摘要: 目前Pure 0.6.0，太轻量级了，目前全部加起来只有5.5kb，做布局和扩展都很不错。官网：http://purecss.io/阅读全文</div>
124               <div class="posted">posted @漫漫洒洒 阅读(138) 评论(0)</div>
125             </div>
126           </div>
127         </div>
128       </div>
129       <div class="pure-u-1-12"></div>
130     </div>
131   </div>
132   <div class="pure-u-1 content-footer">
133     <h3>Copyright ©2015 漫漫洒洒</h3>
134   </div>
135 </div>
136 </body>
137 </html>

 

posted @ 2015-05-07 21:33  FourOne  阅读(798)  评论(0)  编辑  收藏  举报