分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

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

发布时间:2023-09-06 01:28责任编辑:赖小花关键词:CSSBootstrap

版式

  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 通用样式

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved