页面设计模板简约,百度推广关键词优化,百度云搜索引擎官方入口,产品介绍网站源码小程序#xff0c;我又来学习啦#xff01;请多关照~ 项目驱动
小程序开发建议使用flex布局在小程序中#xff0c;页面渲染和业务逻辑是分开的#xff0c;分别运行在不同的线程中。Mini Program于2017年1月7号正式上线小程序的有点#xff1a;跨平台、开发门槛低、开发周…小程序我又来学习啦请多关照~ 项目驱动
小程序开发建议使用flex布局在小程序中页面渲染和业务逻辑是分开的分别运行在不同的线程中。Mini Program于2017年1月7号正式上线小程序的有点跨平台、开发门槛低、开发周期短、开发成本低 开发小程序前需要注册一个小程序号不然受限 注册小程序链接 hr 一条分割线 对于 HTML您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。 当显示页面时浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格
rpx(responsive pixel)可以根据屏幕宽度进行自适应规定屏幕宽度为750rpx原理会根据rpx自动转成px像素 相当于不管屏幕多大都分为750分按照UI给的图直接写就行不需要适配屏幕了。貌似比较高级 第二章flex布局
由于VSCode已经集成了emmet功能因此直接输入html:5即可生成需要的基础信息。 display: flex
引用display: flex
flex-direction
flex-direction决定了main axis的方向有4个值 row默认、row-revers、column、column-revers 左右、右左、上下、下上
justify-content
justify-content决定了flex items在main axis上的对齐方式 上面flex-direction决定了方向justify-content决定了在方向上的对齐方式 space-between左右对齐中间等距分割space-evenly间距都一样space-around中间间距一样左右间隔是中间间距的1/2 space-开头的中间间距都相等 主轴交叉轴
主轴(main axis)可能是左-右右-左上-下下-上 而交叉轴(cross axis)只有两个方向从左到右、从上到下
align-items
align-items定义flex子项在flex容器的交叉轴上的对齐方式。
align-items: flex-end; align-items: 属性确定交叉轴 flex-end属性值确定交叉轴的具体方向
flex-wrap
flex-wrap决定了flex container是单行还是多行
nowrap默认单行wrap多行
flex-flow
flex-flow是flex-direction || flex-wrap的简写
比如flex-flow: column wrap 等价于 flex-direction: column flex-wrap: wrap
align-content
align-content决定了多行flex items在 交叉轴(cross axis) 上的对齐方式用法与justify-content类似 align-content: flex-start;解决换行中间有间距的问题~ order
order决定了flex items的排布顺序 可以设置任意整数正整数、负整数、0值越小就越排在前面 默认值是0 align-self
flex items可以通过align-self覆盖flex container设置的align-items
flex-grow
flex-grow决定了flex items如何扩展 可以设置任意的非负数字正小数、正整数、0默认值是0 当flex container在main axis方向上有剩余size的时候flex-grow属性才会有效 设置后变化 如果加起来的值大于1则按比例 如果假期俩的值小于1则按自己宽度乘以小数
flex-shrink
flex-shrink决定了flex items如何收缩 可以设置任意的非负数字正小数、正整数、0默认值是0 当flex items在main axis方向上超过了flex container的sizeflex-shrink属性才会有效 整体宽度500而每个item宽度是100但是却能整体展示下那么整体每个item就被压缩了
每个flex item收缩的size为 flex items超出flex container的size * 收缩比例/所有 flex items的收缩比例之和
收缩比例 flex-shrink * flex item的base size base size 就是 flex item放入flex container之前的size
flex items收缩后的最终size不能小于 min-width\min-height
flex-basis
flex-basis用来设置flex items在main axis方向上的base size auto默认值 contain根据内容决定宽高
flex布局下flex-basis的优先级比width高
max-xx|min-xxx flex-basis width|height contain的size
flex
flex是 flex-grow flex-shrink? || flex -basis的简写 flex-shrink?的意思是flex-shrink可有可无 第三章
H5开发中都是div而微信开发中都是view这个比较好
在小程序中view的背景图片background-image不能直接使用本地图片最好使用远端图片地址也可以使用base64编码转换一下不推荐
或者直接使用image标签
设置view的高度为height: 80rpx;如果想让文字的高度上下居中则设置line-height: 80rpx;即可
习惯
JS字符串使用单引号HTML属性值使用双引号 /* 主轴上的对齐方式 */justify-content: center;/* 交叉轴上的对齐方式 */align-items: center;2023年11月24日暂停小程序开发学习 转安卓开发学习
