<view class='container'>
<button type='default'>测试</button>
<button type='default' id='margintext'>测试1</button>
<view style='border:1px solid #000'>12312</view>
<view class='view1'></view>
</view>
#margintext{  --------------------ID选择器
margin-top: 0px;
}
.view1{   -----------------------类选择器
background: red;
}
button,view{-----------------------组选择器
margin-top: 10px;
}
view::after{------------------------之后显示内容
content: 'aaaa'
}
view ::before{----------------------之前显示内容
content: 'bbbb'
}

https://www.html.cn/book/css/properties/positioning/position.htm  css学习网站

例子

<view class='container list'>
<view class='list-item' wx:for='{{itemData}}' wx:key='i'>
<image src='{{item.headImg}}' class='left'></image>
<view class='right'>
<view class='title'>
<text class='name'>{{item.name}}</text>
<text class='desc'>{{item.desc}}</text>
</view>
<view class='time'>
{{item.time}}
</view>
</view>
</view>
</view>
.list{
padding: 0px;
}
.list-item{
border-bottom: 1rpx solid #cccccc;
height: 100rpx;
display: flex;
flex-direction: row;
padding: 20rpx;
}
.left{
width: 100rpx;
height: 100rpx
}
.right{
border: 0rpx solid red;
width: 590rpx;
margin-left: 20rpx;
height: 100rpx;
display: flex;
flex-direction: row;
}
.title
{
height: 100rpx;
flex: 1;
display: flex;
flex-direction: column;
}
.time
{
width: 160rpx;
font-size: 18rpx;
color: black;
}
.name
{
font-size: 30rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.desc{
font-size: 20rpx;
}
data: {
itemData:[
{
headImg: '../../images/tooopen_sy_143912755726.jpg',
name: '我的图片',
desc: '测试一下',
time:'2010-10-20'},
{
headImg: '../../images/tooopen_sy_143912755726.jpg',
name: '我的图片',
desc: '测试一下',
time: '2010-10-20'
},
{
headImg: '../../images/tooopen_sy_143912755726.jpg',
name: '我的图片',
desc: '测试一下',
time: '2010-10-20'
},
{
headImg: '../../images/tooopen_sy_143912755726.jpg',
name: '我的图片',
desc: '测试一下',
time: '2010-10-20'
},
{
headImg: '../../images/tooopen_sy_143912755726.jpg',
name: '我的图片',
desc: '测试一下',
time: '2010-10-20'
},
{
headImg: '../../images/tooopen_sy_143912755726.jpg',
name: '我的图片',
desc: '测试一下',
time: '2010-10-20'
},
{
headImg: '../../images/tooopen_sy_143912755726.jpg',
name: '我的图片',
desc: '测试一下',
time: '2010-10-20'
},
{
headImg: '../../images/tooopen_sy_143912755726.jpg',
name: '我的图片',
desc: '测试一下',
time: '2010-10-20'
},
{
headImg: '../../images/tooopen_sy_143912755726.jpg',
name: '我的图片',
desc: '测试一下',
time: '2010-10-20'
}
]
},

WXSS学习的更多相关文章

  1. 对CSS进行wxss思路学习,display属性。

    先来概要一下学习思路: 本系列内容,将针对微信小程序中的WXSS学习,所以在学习CSS时每一个知识点都在小程序IDE中进行实践,达到最好的学习效果. 由于wxss与CSS有些许不同,在学习CSS过程中 ...

  2. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  3. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  4. 微信小程序开发:学习笔记[3]——WXSS样式

    微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...

  5. 小程序学习笔记三:页面文件详解之视图层WXML、WXS、WXSS文件

      视图层:Pages主要有 wxml页面文件和模板文件.wxs脚本文件.wxss样式文件:component是抽取出来的业务单元,同样拥有wxml页面文件和模板文件.wxs脚本文件.wxss样式文件 ...

  6. 微信小程序之使用weui.wxss(八)

    [未经作者本人同意,请勿以任何形式转载] 什么是WeUI? WeUI是在遵守微信视觉设计规范下,由官方设计团队为小程序量身定制的基础样式库. 这里把WeUI放到基础篇里,是因为WeUI是官方出品,并且 ...

  7. 微信小程序学习

    官方网站 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 项目结构介绍 -- MINA框架 https://mp.weixin.qq.com/ ...

  8. 微信小程序官方demo学习

    最近微信小程序很火,很喜欢那种轻应用,用完就走的理念.于是,下载好微信开发者工具,学习一下官方demo. 体验下来,有类似react和vue的感觉,dom类似react那种组件的,data-bindi ...

  9. 微信小程序入门学习

    前(che)言(dan): 近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋 ...

随机推荐

  1. 11-vim-撤销和删除命令-01-撤销

    撤销和恢复撤销 命令 英文 功能 u undo 撤销上一次命令 ctrl  u redo 恢复撤销的命令

  2. [USACO14MAR]浇地Watering the Fields

    题目描述 Due to a lack of rain, Farmer John wants to build an irrigation system tosend water between his ...

  3. zabbix--Simple checks 基本检测

    开始      Simple checks 通常用来检查远程未安装代理或者客户端的服务. 使用 simple checks,被监控客户端无需安装 zabbixagent 客户端, zabbix ser ...

  4. layout(布局)组件

    一.依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 二.class加载方式    <div id="box" class="easyui- ...

  5. js的width函数

    参考: (1)https://blog.csdn.net/chen__jinfei/article/details/6520678 (2)https://developer.mozilla.org/e ...

  6. 关系型数据库---MYSQL---系统学习

    1.概述 1.1 mysql数据库是一种  客户端/服务器体系  的 数据库系统: 服务器部分 在启动运行后没有人机界面,所以终端用户  无法直接使用MySQL: 对MySQL数据库进行访问.操作  ...

  7. 【leetcode】959. Regions Cut By Slashes

    题目如下: In a N x N grid composed of 1 x 1 squares, each 1 x 1 square consists of a /, \, or blank spac ...

  8. Android中实现对/system/bin/surfaceflinger进程进行拦截和注入

    对于Android for arm上的so注入(inject)和挂钩(hook),网上已有牛人给出了代码inject.由于实现中的ptrace函数是依赖于平台的,所以不经改动只能用于arm平台.本文将 ...

  9. 前台页面中json和字符串相互转化

    比如我有两个变量,我要将a转换成字符串,将b转换成JSON对象: var a={"name":"tom","sex":"男&quo ...

  10. BAT批处理知识 及 常用批处理

    1.常用DOS命令:https://blog.csdn.net/qq_38676810/article/details/79584531  或  https://www.jb51.net/articl ...