index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
  <!-- 禁用手动缩放 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <!-- 禁用将数字识别未号码 -->
	<meta name="format-detection" content="telephone=no">
  <!-- 禁用浏览器缓存 -->
  <meta http-equiv="Cache-control" content="no-cache" />
  <!-- ios定制区域 -->
  <!-- 隐藏地址栏 -->
  <meta name="apple-mobile-web-app-capable" content="yes" />

	<title>ui7</title>
	<meta name="Description" content="简易 手机端 预设样式" />
	<meta name="Keywords" content="简易,手机端,预设样式,github,yijile,note4," />

  <link href="static/css/base.css" rel="stylesheet" />
  <link href="static/css/widget.css" rel="stylesheet" />
  <link href="static/css/iconspan.css" rel="stylesheet" />
  <link href="demo/style.css" rel="stylesheet" />

<style type="text/css">
@charset "utf-8";

/*响应调试*/
@media only screen and (min-width: 320px){
/*屏幕宽度大于320px*/
}
</style>

	<!-- <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> -->
	<!--最后清理-->
	<!-- <meta http-equiv="refresh" content="30" />  -->

</head>
<body>


<header>
  <hgroup class="tc ts">
    <h1>ui7</h1>
    <h4>简易 手机端 预设样式</h4>
  </hgroup>
</header>


<div class="testbox qi-nav">
      <ul class="btn2 normal fno">
        <li class="fl"><a target="_blank" href="https://github.com/note4/ui7/archive/gh-pages.zip" class="btn-g fc-w">Download .zip</a></li>
        <li class="fl"><a target="_blank" href="https://github.com/note4/ui7" class="btn-b fc-w">View on GitHub</a></li>
      </ul>
</div>
<hr>

<div class="item i2iconspan">
  <span class="icons arrow"></span>
  <span class="icons arrowl" style="color: red"></span>
  <span class="icons arrowt" style="color: green"></span>
  <span class="icons arrowd"></span>
  <span class="icons close"></span>
  <span class="icons close" style="color: red"></span>
  <span class="icons add"></span>
  <span class="icons add" style="color: red"></span>
  <span class="icons clock"></span>
  <span class="icons clock atn" style="color: red"></span>
  <span class="icons set"></span>
  <span class="icons set on"></span>
  <span class="icons del"></span>
  <span class="icons searchico"></span>
  <span class="icons searchico" style="color:green"></span>

</div>
  <div class="loading2tip"><span class="ico2loading"></span>为你拼命加载中...</div>


  <div id="button" class="testbox bs-example">
    <h2>按钮</h2>
    <h3>按钮色彩</h3>
    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
    <p>按上去颜色略深</p>
      <a href="#" class="btn-r fc-w br">喜欢</a>
      <a href="#" class="btn-o fc-w">去购买</a>
      <a href="#" class="btn-y fc-5">知道了</a>
      <a href="#" class="btn-g fc-w">提交申请</a>
      <a href="#" class="btn-b fc-w">确定修改</a>
      <ul class="btn2 normal fno">
        <li class="fl"><a href="#" class="btn-i fc-w">进入官网</a></li>
        <li class="fl"><a href="#" class="btn-v fc-w">分享给好友</a></li>
      </ul>
  </div>

  <div class="testbox fno">
    <ol class="pagenav2drop fno normal">
      <li><span><a href="javascript:">上一页</a></span></li>
      <li>
        <span>
          <strong class="fc-r">1</strong>/23<i></i>
          <select>
            <option value="1" selected="">第1页</option>
            <option value="2">第2页</option>
            <option value="3">第3页</option>
            <option value="4">第4页</option>
            <option value="5">第5页</option>
            <option value="6">第6页</option>
            <option value="7">第7页</option>
            <option value="8">第8页</option>
            <option value="9">第9页</option>
            <option value="10">第10页</option>
            <option value="11">第11页</option>
            <option value="12">第12页</option>
            <option value="13">第13页</option>
            <option value="14">第14页</option>
          </select>
         </span>
      </li>
      <li><span><a href="#">下一页</a></span></li>
    </ol>
  </div>


<div class="boxitem">
  <div class="modifyme single-page">
    <p>
      The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.
    </p>
    <hr>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <hr>
    <h2 id="paragraph">Paragraph</h2>
    <p>
      Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
    </p>
    <p>
      Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est.
    </p>
    <hr>
    <h2 id="list_types">List Types</h2>
    <h3>Definition List</h3>
    <dl>
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
    </dl>
    <h3>Ordered List</h3>
    <ol>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
    </ol>
    <h3>Unordered List</h3>
    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
    </ul>
    <hr>
    <h2 id="form_elements">Forms</h2>
    <fieldset>
      <legend>Legend</legend>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
      </p>
      <form>
        <h2>Form Element</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.
        </p>
        <p>
          <label for="text_field">Text Field:</label><br>
          <input type="text" id="text_field">
        </p>
        <p>
          <label for="text_area">Text Area:</label><br>
          <textarea id="text_area"></textarea>
        </p>
        <p>
          <label for="select_element">Select Element:</label><br>
          <select name="select_element">
            <optgroup label="Option Group 1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            </optgroup><optgroup label="Option Group 2">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            </optgroup>
          </select>
        </p>
        <p>
          <label for="radio_buttons">Radio Buttons:</label>
        </p>
        <p>
          <input type="radio" class="radio" name="radio_button" value="radio_1"> Radio 1<br>
          <input type="radio" class="radio" name="radio_button" value="radio_2"> Radio 2<br>
          <input type="radio" class="radio" name="radio_button" value="radio_3"> Radio 3
        </p>
        <p>
          <label for="checkboxes">Checkboxes:</label>
        </p>
        <p>
          <input type="checkbox" class="checkbox" name="checkboxes" value="check_1"> Radio 1<br>
          <input type="checkbox" class="checkbox" name="checkboxes" value="check_2"> Radio 2<br>
          <input type="checkbox" class="checkbox" name="checkboxes" value="check_3"> Radio 3
        </p>
        <p>
          <label for="password">Password:</label>
        </p>
        <p>
          <input type="password" class="password" name="password">
        </p>
        <p>
          <label for="file">File Input:</label><br>
          <input type="file" class="file" name="file">
        </p>
        <p>
          <input class="button" type="reset" value="Clear"><input class="button" type="submit" value="Submit">
        </p>
        <p>
        </p>
      </form>
    </fieldset>
    <hr>
    <h2 id="tables">Tables</h2>
    <table cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
      <th>
        Table Header 1
      </th>
      <th>
        Table Header 2
      </th>
      <th>
        Table Header 3
      </th>
    </tr>
    <tr>
      <td>
        Division 1
      </td>
      <td>
        Division 2
      </td>
      <td>
        Division 3
      </td>
    </tr>
    <tr class="even">
      <td>
        Division 1
      </td>
      <td>
        Division 2
      </td>
      <td>
        Division 3
      </td>
    </tr>
    <tr>
      <td>
        Division 1
      </td>
      <td>
        Division 2
      </td>
      <td>
        Division 3
      </td>
    </tr>
    </tbody>
    </table>
    <hr>
    <h2 id="misc">Misc Stuff – abbr, acronym, pre, code, sub, sup, etc.</h2>
    <p>
      Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr>
    </p>
    <pre>
      <p>
    Lorem ipsum dolor sit amet,
     consectetuer adipiscing elit.
     Nullam dignissim convallis est.
     Quisque aliquam. Donec faucibus.
    Nunc iaculis suscipit dui.
    Nam sit amet sem.
    Aliquam libero nisi, imperdiet at,
     tincidunt nec, gravida vehicula,
     nisl.
    Praesent mattis, massa quis
    luctus fermentum, turpis mi
    volutpat justo, eu volutpat
    enim diam eget metus.
    Maecenas ornare tortor.
    Donec sed tellus eget sapien
     fringilla nonummy.
        <acronym title="National Basketball Association">NBA</acronym>
    Mauris a ante. Suspendisse
     quam sem, consequat at,
    commodo vitae, feugiat in,
    nunc. Morbi imperdiet augue
     quis tellus.
        <abbr title="Avenue">AVE</abbr>
      </p>
    </pre>
    <blockquote>
      <p>
        “This stylesheet is going to help so freaking much.”<br>
        -Blockquote
      </p>
    </blockquote>

    <div class="post-meta">
      <div class="tags">
      </div>
      <hr class="before_content">
      <span class="screen-reader hidden">Published on:</span><span class="post-meta-date"><a href="/?p=36">September 5, 2008</a></span><span class="screen-reader hidden">Category:</span><span class="post-meta-category"><a href="/?cat=1">Uncategorized</a></span>
    </div>
    <span class="post-navigation previous-post"><a href="/?p=14" rel="prev">«<span class="screen-reader-text">More Tags</span></a></span><span class="post-navigation next-post"><a href="/?p=19" rel="next">»<span class="screen-reader-text">Worth A Thousand Words</span></a></span>
  </div>
</div>
<!-- end.boxitem -->

<footer class="qi-footer tr fa">
  7ui is maintained by <a href="https://github.com/note4">note4</a>/<a href="http://yijile.com">以及乐</a><br>
  This page was generated by <a href="http://pages.github.com" rel="nofollow">GitHub Pages</a>.<br>
  <script src="http://s4.cnzz.com/stat.php?id=5899558&web_id=5899558" language="JavaScript"></script>
</footer>

<div style="height: 62px;"></div>
<div class="pf tc bottom2nav">
  <a href="#" class="db fl bsb"><i></i>商品详情</a>
  <a href="#" class="db fl bsb"><i></i>转发文章</a>
</div>

<div style="height: 62px;"></div>
<div class="pf bottom2tips">
  <i class="pa"></i>
  <p>一款会赚钱的APP<br />10个逛淘宝，9个在用返利神器</p>
  <a href="#" class="btn pa tc">马上安装</a>
</div>


</body>
</html>