<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.box{width: 200px;height: 200px;background-color: yellow;padding: 100px;border: 50px solid red;}</style> </head> <body><div class="box">整个盒子占用的空间的宽度等于:左边框宽度+右padding+宽度+左padding+右边框宽度整个盒子占用的空间的高度等于:上边框宽度+上padding+高度+下padding+下边框宽度</div> </body> </html> 原文...
安装postcss插件npm install -D postcss-class-renamepostcss-class-rename 是将小程序不支持的css类重命名tailwindcss配置移除不支持的css样式module.exports = {// Tree-shake unused styles in production build// purge: [‘./src/**/*.{vue,js,ts,jsx,tsx,html}‘],purge: [],darkMode: false, // or ‘media‘ or ‘class‘theme: {extend: {},// Disable breakpointsscreen: {}},variants: {extend: {},},plugins: [],coreP...
今天有朋友问我关于微信小程序中如何在不占用大量网络带宽的情况下快速加载图片，我给他推荐了两种方式1.雪碧图(css script),有过前端经验的朋友应该都有接触过。2.懒加载。由于时间关系我就先为大家介绍第一种雪碧图加载，其实雪碧图加载就是将多张大小尺寸基本相同类型的图片拼凑在一起形成一张新的图片，在页面中不会一个图片就向网络发送一次请求，这样会使得图片加载缓慢，影响用户体验感。这里的雪碧图是由CssGaga拖拽生成的...
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css常见布局</title><style>*{padding: 0;margin: 0;}.header,.nav,.main,.footer{background-color: silver;border: 1px solid black;margin-bottom: 10px;}.header{height: 100px;}.nav,.main{height: 200px;}.nav{width: 200px;float: left;}.main{margin-left: 202px;}.footer{height: 50px;}</style> </head> <body> <div class="header">header </div>...
原文：http://www.cnblogs.com/hywbk/p/6253069.html
这篇文章主要介绍了使用css transition属性实现一个带动画显隐的微信小程序部件的相关资料,需要的朋友可以参考下我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的，但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使（下面说明）所以我们这个时候会考虑去使用微信官方提供的wx.createAnimation API来创建动画。接下来我带各位小伙伴如何让 transition 属性在这种...
前言 最近快速上线一个抽奖活动，又不想用canvas做，思考了很久，还是决定使用css3的动画来做，只要小球动得快，就没人发现我这些个小球的运动路径都是一样的了。先上动图wxml文件：<view class="ball-box"><image class="ball ball_1 {{start?weiyi_1:}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image><image class="ball ball_2 {{start?weiyi_2:}}" src="https://acceleratepic.miniso.com/miniso/ball1.p...
要实现的购物车效果如下：小程序通过bind与catch绑定事件，没有event.stopPropagation()方法。 bind：不会阻止冒泡事件向上冒泡，catch：可以阻止冒泡事件向上冒泡用touchstart、touchmove、touchend实现滑块效果，无法动态js控制何时冒泡何时阻止冒泡，就会出现用bind时，左右上下滑动乱窜；用catch，商品区域只能左右滑动，无法上下滚动 而小程序提供的swiper通过css就可以实现删除滑块效果，同时不影响页面的正常滚动。具体如下...
本文实例讲述了微信小程序导航栏滑动定位功能。分享给大家供大家参考，具体如下： 实现的效果实现的原理 1. 通过对scroll的监听获取滚动条的scrollTop值; 2. 在导航的class判断scrollTop; 3. 切换position:fixed与position:relative。 WXML <view style="height:100%;position:fixed;width:100%;"><scroll-view scroll-y="false" bindscroll="scroll" style="height:100%;"><view class="page-bottom-content"><text>{{text}}</tex...
微信小程序没有自带的下拉菜单组件，因此我们需要自己需要写一个 思路 利用列表来存储菜单项，在外面套一个view元素作为外框，将其设置为overflow：hidden，使用CSS3动画逐渐改变外层view元素的高度，当高度为0时，里面嵌套的列表元素被完全隐藏，相当于菜单关闭。而当view元素的高度大于列表元素的高度时，相当于菜单显示。 效果图wxml button按钮用于触发菜单的打开和关闭，first_click参数使用户第一次点击按钮之前菜单不可见，...
详解微信小程序 通过控制CSS实现view隐藏与显示 实现效果图：视图代码，使用变量控制隐藏类名<scroll-view scroll-y="true" ><view class="user_freeback"> <view class="txt"><text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码，以便管理员给你答复。</text></view></view> <view class="section weui-media-box weui-media-box_appmsg"> <view class="section__title">希望回访:</view> <view class=form-grou...
微信小程序 基础知识css样式media标签 前言： 微信小程序中我遇到了一个对我来说是新的东西，但是对于前端开发来说不算是新知识，html页面中的media标签，在此记录下来以备不时之需 在css中我们使用media标签来区分调用哪个css样式，比如使用media=”print”来表示当执行打印文档时，使用print.css样式。这样使得文档更有得于打印，如将页面宽度增宽、或屏蔽掉一些不需要打印的内容。 <link href="styles/main.css" rel="external ...
微信小程序 利用css实现遮罩效果实例详解 实现效果图：如图所示，使用css实现小程序的遮罩效果，代码如下js文件代码：//index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码：.b1{position:fixed;width:100%;height:100%;top:0px;background:rgba(0,0,0,0.4);overflow: hidden;} .t_w{p...
微信小程序 css使用技巧 1:用纯CSS创建一个三角形的原理把上、左、右三条边隐藏掉（颜色设为 transparent） .demo {width: 0;height: 0;border-width: 20px;border-style: solid;border-color: transparent transparent red transparent;}2:设置最高高度..超过后可以滑动max-height: 550rpx;overflow-y: scroll; 3: text-overflow 当属性规定当文本溢出包含元素时发生的事情 clip: 修剪文本 ellipsis : 用省略号来代表被修剪的文字...
本篇文章给大家带来的内容是关于CSS3实现微信小程序瀑布流布局的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1.column-count 属性规定元素应该被分隔的列数：-moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3;2.column-gap 属性规定列之间的间隔：-moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari 和 Chr...