article.html

<div class="page">
  <article class="weui-article">
    <h1>文章页大标题</h1>
    <section>
      <h2>二级标题</h2>
      <section>
        <h3>三级标题</h3>
        <section>
          <h4>四级标题</h4>
          <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
            <img src="./images/pic_article.png" alt="配图">
            <img src="./images/pic_article.png" alt="配图">
          </p>
        </section>
        <section>
          <h4>列表示例</h4>
          <section>
            <h5>原生无序列表</h5>
            <ul>
              <li>Elit quo illum ut voluptate possimus. Maxime</li>
              <li>
                Elit quo illum ut voluptate possimus. Maxime
                <ul>
                  <li>Elit facilis nam nam</li>
                  <li>Elit facilis nam nam</li>
                  <li>Elit facilis nam nam</li>
                </ul>
              </li>
              <li>Elit quo illum ut voluptate possimus. Maxime</li>
            </ul>
          </section>
          <section>
            <h5>原生有序列表</h5>
            <ol>
              <li>Elit quo illum ut voluptate possimus. Maxime</li>
              <li>
                Elit quo illum ut voluptate possimus. Maxime
                <ol>
                  <li>Adipisicing adipisci labore deleniti</li>
                  <li>Adipisicing adipisci labore deleniti</li>
                  <li>Adipisicing adipisci labore deleniti</li>
                </ol>
              </li>
              <li>Elit quo illum ut voluptate possimus. Maxime</li>
            </ol>
          </section>
          <section>
            <h5>原生段落列表（需要自行添加class）</h5>
            <ol class="weui-article__list_inside">
              <li>Elit quo illum ut voluptateElit quo illum ut voluptate possimus. Maxime</li>
              <li>
                Elit quo illum ut voluptate possimus. Maxime
                <ol>
                  <li>Adipisicing adipisci labore delenitAdipisicing adipisci labore delenitiiAdipisicing adipisci labore deleniti</li>
                  <li>Adipisicing adipisci labore deleniti</li>
                  <li>Adipisicing adipisci labore deleniti</li>
                </ol>
              </li>
              <li>Elit quo illum ut voluptate possimus. Maxime</li>
            </ol>
          </section>
          <section>
            <h5>自定义序号列表（需要自行添加class）</h5>
            <ol class="weui-article__list_none">
              <li>1 Elit quo illum ut voluptateElit quo illum ut voluptate possimus. Maxime</li>
              <li>
                2 Elit quo illum ut voluptate possimus. Maxime
                <ol>
                  <li>2.1 Adipisicing adipisci labore delenitAdipisicing adipisci labore delenitiiAdipisicing adipisci labore deleniti</li>
                  <li>2.2 Adipisicing adipisci labore deleniti</li>
                  <li>2.3 Adipisicing adipisci labore deleniti</li>
                </ol>
              </li>
              <li>3 Elit quo illum ut voluptate possimus. Maxime</li>
            </ol>
          </section>
        </section>
      </section>
    </section>
    <section>
      <h2>无障碍焦点整合示例</h2>
      <section>
        <p class="weui-a11y-combo">
          <input class="weui-a11y-combo__helper" aria-labelledby="txt1 txt2" type="text" readonly role="option" >
          <span id="txt1" class="weui-a11y-combo__content" aria-hidden="true">
            Ipsum cum soluta laudantium aperiam rem? Accusamus nostrum itaque sint?
          </span>
          <a id="txt2" class="weui-a11y-combo__content weui-link weui-wa-hotarea " href="#">read more</a>
        </p>
      </section>
    </section>
  </article>
</div>