小程序排版

小程序排版

示例

代码

wxml

<view class="container">
  <view class="bd_example">
    <p class="h1">hello</p>
    <p class="h2">hello</p>
    <p class="h3">hello</p>
    <p class="h4">hello</p>
    <p class="h5">hello</p>
    <p class="h6">hello</p>
  </view>
  <view class="bd_example mt05">
    <h3 class="h3">
      Fancy
      <small class="text_muted">With faded secondary text</small>
    </h3>
  </view>
  <view class="bd_example mt05">
    <table class="table">
      <tbody>
        <tr>
          <td>
            <span class="display_1">display_1</span>
          </td>
        </tr>
        <tr>
          <td>
            <span class="display_2">display_2</span>
          </td>
        </tr>
        <tr>
          <td>
            <span class="display_3">display_3</span>
          </td>
        </tr>
        <tr>
          <td>
            <span class="display_4">display_4</span>
          </td>
        </tr>
      </tbody>
    </table>
  </view>
  <view class="mt05 bd_example">
    <p class="lead">
      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
    </p>
  </view>
  <view class="mt05 bd_example">
    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>
  </view>

  <view class="mt05 bd_example">
    <blockquote class="blockquote">
      <p class="mb_0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
    </blockquote>
  </view>
  <view class="mt05 bd_example">
    <blockquote class="blockquote">
      <p class="mb_0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote_footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </view>
  <view class="mt05 bd_example">
    <blockquote class="blockquote ">
      <p class="mb_0 text_center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </p>
      <footer class="blockquote_footer text_center">Someone famous in <cite title="Source Title">Source Title</cite>
      </footer>
    </blockquote>
  </view>
  <view class="mt05 bd_example">
    <blockquote class="blockquote ">
      <p class="mb_0 text_right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </p>
      <footer class="blockquote_footer text_right">Someone famous in <cite title="Source Title">Source Title</cite>
      </footer>
    </blockquote>
  </view>
  <view class="mt05 bd_example">
    <ul class="list_inline">
      <li class="list_inline_item">Lorem</li>
      <li class="list_inline_item">Phasellus</li>
      <li class="list_inline_item">Nulla</li>
    </ul>
  </view>
  <view class="mt05 bd_example">
    <dl class="row">
      <dt class="col_3">Description lists</dt>
      <dd class="col_9">A description .</dd>

      <dt class="col_3">Euismod</dt>
      <dd class="col_9">
        <p>Vestibulum  elit.</p>
        <p>Donec id  at eget metus.</p>
      </dd>

      <dt class="col_3">Malesuada porta</dt>
      <dd class="col_9">Etiam.</dd>

      <dt class="col_3 text_truncate">Truncated term is truncated</dt>
      <dd class="col_9">Fusce  risus.</dd>

      <dt class="col_3">Nesting</dt>
      <dd class="col_9">
        <dl class="row">
          <dt class="col_4">Nested definition</dt>
          <dd class="col_8">Aenean posuere nunc.</dd>
        </dl>
      </dd>
    </dl>
  </view>
</view>
​

wxss

/* 排版css */
html,
address,
blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
form,
frame,
frameset,
h1,
h2,
h3,
h4,
h5,
h6,
noframes,
ol,
p,
ul,
center,
dir,
hr,
menu,
pre,
footer,
dt,
dd {
  /*以上列表元素默认状态下以块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/
  display: block
}

table {
  border-spacing: 2px;
}

td,
th {
  vertical-align: inherit
}

/*定义单元格、列标题默认为垂直对齐默认为继承*/
thead,
tbody,
tfoot {
  vertical-align: middle
}

table {
  display: table
}

/*默认为表格显示*/
tr {
  display: table-row
}

/*默认为表格行显示*/
thead {
  display: table-header-group
}

/*默认为表格头部分组显示*/
tbody {
  display: table-row-group
}

/*默认为表格行分组显示*/

td,
th {
  display: table-cell;
}

/*默认为单元格显示*/

/*定义表头、主体表、表脚元素默认为垂直对齐*/




p {
  margin-top: 0;
  margin-bottom: 1rem;
}

p::after,
p::before {
  text-shadow: none !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

.h1 {
  font-size: 2.5rem;
}

.h2 {
  font-size: 2rem;
}

.h3 {
  font-size: 1.75rem;
}

.h4 {
  font-size: 1.5rem;
}

.h5 {
  font-size: 1.25rem;
}

.h6 {
  font-size: 1rem;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}

.small,
small {
  font-size: 80%;
  font-weight: 400;
}

.text_muted {
  color: #6c757d !important;
}

.table {
  border-collapse: collapse !important;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

table {
  border-collapse: collapse;
}

tr {
  page-break-inside: avoid;
}

.display_1 {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.2;
}

.display_2 {
  font-size: 2.75rem;
  font-weight: 300;
  line-height: 1.2;
}

.display_3 {
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.2;
}

.display_4 {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.2;
}


.lead {
  font-size: 1.25rem;
  font-weight: 300;
}


.mark,
mark {
  padding: .2em;
  background-color: #fcf8e3;
}

/* 加粗 */
b,
strong {
  font-weight: bolder;
}

/* 斜体 */
i,
cite,
em,
var,
address {
  font-style: italic
}

/* 删除线 */
s,
del {
  text-decoration: line-through;
}

/* 下划线 */
u,
ins {
  text-decoration: underline;
}



.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}



blockquote,
pre {
  border: 1px solid red;
  page-break-inside: avoid;
}

blockquote {
  margin: 0 0 1rem;
  margin-bottom: 1rem;
}

.mb_0,
.my_0 {
  margin-bottom: 0 !important;
}

.blockquote_footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}

.blockquote_footer::before {
  content: "\2014\00A0";
}


.text_center {
  text-align: center !important;
}

.text_right {
  text-align: right !important;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

.list_inline {
  padding-left: 0;
  list-style: none;
}

li {
  display: list-item
}

ol ul,
ulol,
ul ul,
ol ol {
  margin-top: 0;
  margin-bottom: 0
}


/*默认以列表显示*/
.list_inline_item {
  display: inline-block;
}

/* 不是最后一个元素都使用本css */
.list_inline_item:not(:last-child) {
  margin-right: .5rem;
}

dl {
  margin: 1.12em 0
}

dt {
  font-weight: 700;
}

dd {
  margin-left: 40rpx
}

.text_truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
​