《基于 Bootstrap 的小程序UI设计框架》 一 CSS 通用样式

版式

  1. 标题

    • H1 到 H6 标题标签进行的优化。这里将不针对标签而是标题类 .H1 到 .H6。小程序仅识别 VIEW 标签。
    • 重设上下边界为固定值,默认为一个行高距离,优化后统一为上 20 像素、下为 10 像素,h4 到 h6 距离顶部为 10 像素且不分标题级别,全部统一样式
    • 固定所有标题行高为 1.1,避免行高因标题字体大小而变化,同时也避免不同级别标题行高不一致,影响版式风格统一
    • 固定不同级别标题字体大小,依次为 36px 30px 24px 18px 14px 12px。这里将像素单位改成 rpx 以兼容小程序
    • 标题里面 small 类取消了字体粗体样式(font-weight:noraml)字体颜色为浅灰色 #999999 行高为 line-height:1。修改一级二级三级风格大小为 65%,四级五级六级风格大小为 75%
  2. 文本
    • wxml 页面代码通通常推荐有一个顶层 类似于 body 标签。为顶层标签添加类样式 page 应用预定义的默认样式
    • .page 类定义页面字体默认样式 font-size 为 14px ,line-height 为 1.428, color  为 #333333 background-color 为 #ffffff
    • .p 类定义为 1/2 行高(10px (14 * 1.428 正好是 20 px))的底部外边距属性
  3. 对齐
    • 文本水平对其方式有三种 分别是 左对其(text-left)中对齐(text-center)右对齐(text-right)
时间: 2024-10-13 05:41:30

《基于 Bootstrap 的小程序UI设计框架》 一 CSS 通用样式的相关文章

小程序UI设计(7)-布局分解-左-上下结构

FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解  左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列.第一个WViewColumn中放一个图片,第二个放两张图片.如下图展开的结构树. 下面针对第二个WViewColumn中有两个图片的FlexBox进行分解讲解. flex-direction=column说明内部组件主轴x是从上而下.flex-wrap在本工具中对于column类型的不起作用.此处

小程序UI设计(6)-布局分解-九宫格

今天我们来个庖丁解牛.对于一个完整的组合组件,看看通过工具是如何轻松完成的.首先看看九宫格完整的样子. 结构树是这样的.在结构树中,我们可以看到WViewColumn下面有九个WViewRow.WViewColumn之上的我们可以不用管,这些是画布上的内容,为了辅助设计用的.9个WViewRow是九宫格中的实际元素item. 每个item中图片和文字上下排列,九个item换行排列.那么这些是怎么做到的呢,当然是FlexBox的作用.下面详细介绍FlexBox属性对布局的影响.首先来介绍item的

小程序UI设计(8)-布局分解-FlexBox的align-content应用

FlexBox的align-content到底是什么鬼,我也搞了好半天才开发出来,目前工具中WViewRow组件使用了此属性,WViewColumn中此属性不起作用.下图是justify-content.align-items和align-content属性组合使用的两个例子,请仔细理解一下. 大家看出来区别了吗,第一个整体右侧排列(justify-content=flex-end),第一行和第二行短黄和短红所在行上对齐(align-items=flex-start).第二个整体左对齐,第一行和

Android应用程序窗口设计框架介绍

在Android系统中,一个Activity对应一个应用程序窗口,任何一个Activity的启动都是由AMS服务和应用程序进程相互配合来完成的.AMS服务统一调度系统中所有进程的Activity启动,而每个Activity的启动过程则由其所属进程来完成.AMS服务通过realStartActivityLocked函数来通知应用程序进程启动某个Activity: frameworks\base\services\java\com\android\server\am\ ActivityStack.j

微享商盟小程序开发系统框架分析

从微信小程序发布这段时间,陆陆续续开发了不少小程序相关的项目,总结了一些通用性的组件,但是对于小程序如何做测试,依然是一头雾水,直到做了不少的项目,积累的一些经验和开源库之后才理清如何做测试,下面将会介绍如何对小程序做UI测试和单元测试. 微信小程序微享商盟具体做什么? --举例,顾客到某水果店购买商品后通过微信小程序共享链支付成功后进入微信小程序微享商盟小程序,该小程序里面会显示消费者的消费金额,奖励金额和已经到账金额,之后其他消费者也到该水果店消费,那微信小程序微享商盟系统会做一个时间排序,

iView Weapp微信小程序UI组件库中i-input的使用

iView Weapp微信小程序UI组件库为小程序的开发提供了良好的交互界面,组件库自定义了一系列组件,具有较强的开发友好性,但一些组件与微信小程序原生组件的使用方式有差异. i-input组件是该框架自定义的输入框组件,与微信中input具有相同功能. 在使用i-input输入值时,可以增加其bind:change="myInput" 属性,如: wxml: <i-input type="number" right  maxlength="2&qu

从零开发一款自己的小程序UI组件库(二)

写在前面:从零开发一款自己的小程序UI组件库(一) 上节我们讲到初始化组件库模板.模板文件概述.模板上传npm以及npm包文件下载至本地并运用到项目.这节我们继续,内容主要有基础UI组件库的搭建(button组件的实例)以及如何在本地使用npm link调试npm包项目. 本节所用到的物料:mineui-weapp组件库v1.1.weapp-for-mineui程序v1.1 1.开发基础组件button 我们上节有提到,要开发组件库的话,需要在官方单组件模板的基础上,①修改tools目录下的co

微信小程序:其中wxml和wxss的样式说明

微信小程序:其中wxml和wxss的样式说明 一.简介 对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式. 二.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 关于这八大类的属性和具体用法可参考以下参考文献链接: http://www.w3cschool.cn/w

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

微信小程序开发:学习笔记[3]--WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS与Web开发中的CSS类似.为了更适合小程序开发,WXSS对CSS做了一些补充以及修改. 文件组成 项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面. 页面样式:与app.json注册过的页面同名且位置同级的WXSS文件.比如注册了pages/rpx/index页