wxss解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 一、概述  wxss是样式语言,用于描述wxml组件样式;  在css基础上扩展而来:    1、尺寸单位: rpx, rem    2、支持样式导入 @import语句导入外联样式表  note:  微信小程序一般使用iphone6 来视觉稿的标准;二、选择器  rpx: 规定屏幕...

一、概述

  wxss是样式语言,用于描述wxml组件样式;

  在css基础上扩展而来:

    1、尺寸单位: rpx, rem

    2、支持样式导入 @import语句导入外联样式表

  note:  微信小程序一般使用iphone6 来视觉稿的标准;

二、选择器

  rpx: 规定屏幕宽为750rpx

  rem:规定屏幕宽度为20rem

  样式之高度:height

  样式之宽度: width

  样式之内间距: padding

  样式之外间距:margin

  样式之边框: border

  样式之字体颜色: color

 1 <view class="container">
 2     <button id="swiperbutton" type="default">测试 </button>
 3     <view style="border:1px solid:" > </view>
 4 </view>
 5 
 6 //id选择器
 7 #swiperbutton{
 8     margin: 0px
 9 }
10 
11 .text {
12     border: 1px solid red;  //边框
13     //boder-left, border-right, border-top, border-buttom
14     //height: 100rpx;
15     height: 10rem;
16     width: 750rpx-20 * 2 rpx;
17     //padding   #内容与边框的间距
18     //margin    #边框之外的间距
19 }

 

相关文章
|
3月前
|
JavaScript
js之面包屑
js之面包屑
29 1
|
6月前
|
前端开发 小程序 容器
wxss和css的区别
wxss和css的区别
325 2
|
6月前
|
小程序 JavaScript 前端开发
【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)
【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)
|
11月前
|
JSON 小程序 前端开发
【微信小程序】WXML的模板语法与WXSS模板样式(二)
【微信小程序】WXML的模板语法与WXSS模板样式
123 0
|
11月前
|
小程序 JavaScript 容器
【微信小程序】WXML的模板语法与WXSS模板样式(一)
【微信小程序】WXML的模板语法与WXSS模板样式
84 0
|
JavaScript
js隐藏和显示div
js隐藏和显示div
|
小程序 JavaScript 前端开发
微信小程序 | 小程序WXSS-WXML-WXS
微信小程序 | 小程序WXSS-WXML-WXS
|
JSON 小程序 JavaScript
微信小程序 - 新建页面以及 .js .json .wxml .wxss 的作用
微信小程序 - 新建页面以及 .js .json .wxml .wxss 的作用
304 0
|
小程序 前端开发
小程序----页面样式(WXSS)
小程序----页面样式(WXSS)
|
小程序 JavaScript 前端开发
【小程序】WXML 模板
【小程序】WXML 模板
141 0