zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    行为科学统计第一章知识点总结
    JVM垃圾回收参数说明整理
    RestTemplate
    SparkContext源码阅读
    Spark RDD类源码阅读
    Scala学习笔记
    JAVA虚拟机类型转换学习
    工程开发实用类与方法总结(未完)
    JAVA 几种引用类型学习
    JAVA虚拟机垃圾回收算法原理
  • 原文地址:https://www.cnblogs.com/RainbowInTheSky/p/4486123.html
Copyright © 2011-2022 走看看