小程序排版

本贴最后更新于 1210 天前,其中的信息可能已经时移世改

小程序排版

示例

图片.png

代码

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;
}
  • 小程序
    76 引用 • 218 回帖 • 2 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    180 引用 • 446 回帖 • 3 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...