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

标签：依次   通用   对齐   推荐   round   bsp   back   水平   标题   

版式

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）

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

标签：依次   通用   对齐   推荐   round   bsp   back   水平   标题   

原文地址：http://www.cnblogs.com/menu/p/7930179.html