【小程序】常用的样式

可以将以下样式定义在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...
    有点健忘阅读 4,753评论 0 7
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,036评论 0 0
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,508评论 0 5
  • 一.CSS三种样式表。 在HTML中引入CSS共有三种方式:行内样式就是把样式写在HTML元素里面,用style属...
    大鹏的鹏阅读 1,944评论 0 0
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,604评论 0 26