微信小程序开发学习 第四天 界面设计小结

小程序的界面设计:
首先把page调成占满屏幕(如果不这样调可能会出现page占不满屏幕的情况,我今天刚刚遇到,找了好久的原因。。):
长度设计尽量使用百分比,这样才尽可能在不同机型上正常显示

page{
  height: 100%;
  width: 100%;
}

开始设计先把一个基本底页铺满屏幕(就是铺满page)
在这里插入图片描述

然后把界面分成 上中下三部分:head、middle、bottom(一般来说页面都是三部分,上下固定,中间滑动)
在这里插入图片描述
这样基本框架就搭建好了。
之后就是往head里添加导航信息,middle里添加内容,bottom添加导航信息。

接下来我来讲讲怎么设置底部的导航条:

.bottom{
  position: fixed;   //位置固定
  bottom: 0px;   //距离body底部0像素
  width: 100%;   //bottom占据的屏幕宽度
  height: 7%;    //bottom占据的屏幕高度
  border: 1px solid rgb(0, 0, 0);   //bottom 的宽度为1像素的内边框 颜色为#000000(黑色)
  display: flex;   //设置bottom的子盒的伸缩
  flex-direction: row;  //子盒 伸展方向 行
  flex-wrap: nowrap;     //子盒是否换行
  justify-content: space-around;  //主轴内容分布(设置的row) space-around(效果)
}

按照这个基本框架就可以搭建一条底部固定的导航条:
在这里插入图片描述
同理,顶部的导航条只要把bottom改为top就好了。

小结一下:关键是把要固定的盒子(框框)设置 position:fixed;,其他的都比较简单

那么有了固定的底部导航栏之后,就是对导航栏里的盒子伸缩布局了:
可以看到上图的导航栏里有四个子盒按间隔伸缩的,代码如下:

.guide-item {           //导航栏的四个子盒
  text-align: center;   //文本排序 居中
  font-size: 10px;      //字体大小
  width: 15%;          //盒子的宽度
  line-height: 1;      //文本与图片的距离(不太懂对不对,设置百分比时没变化)
  padding: 2px;        //外边框2像素
}
.guide-item image {
  width: 30px;  //图片宽度
}

这里发一个微信学院教程的flex伸缩dome链接 Flexbox Playground

小结:只要用好position、flex 两个组件,基本上大部分的界面都可以设计出来。

最后贴一下小程序界面设计常用的组件:
margin 外边距
padding 内边距
border 内边距
(三个都是内容的外边距)
在这里插入图片描述
width 宽度
hight 高度
border-radios 设置圆边角

flex-direction 伸缩方向
flex-wrap 是否换行
justify-content 设置主轴分布
align-items 设置侧轴分布
align-content (没用过,默认就好。。)

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值