【小程序】常用的样式

可以将以下样式定义在app.wxss文件中,方便随时调用。

卡片样式
.app-card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10rpx;
  background-color: #fff;
}
.app-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
Grid(宫格)样式
.grid-content {
  display: flex;  
  flex-direction: row;
  flex-flow: wrap;
  align-content: flex-start;
}
去除按钮背景边框样式
button {
  background: initial;
  padding: 0px;
  line-height: 30rpx;
}

button:focus {
  outline: 0;
}

button::after {
  border: none;
}
常用的flex容器样式
.column-content {
  display: flex;
  flex-direction: column;
}

.row-content {
  display: flex;
  flex-direction: row;
}

.justify-center-content {
  justify-content: center;
}

.align-items-center-content {
  align-items: center;
}

.flex-grow-content {
  display: flex;
  flex-grow: 1;
}

推荐阅读更多精彩内容

  • 每天的学习记录,可能有的地方写的不对,因为刚学,以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 3,291评论 0 6
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 1,715评论 0 0
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,072评论 0 5
  • 一.CSS三种样式表。 在HTML中引入CSS共有三种方式:行内样式就是把样式写在HTML元素里面,用style属...
    大鹏的鹏阅读 398评论 0 0
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,897评论 0 26