HTML应用开发基础篇 |
您所在的位置：网站首页 › mui前端模板 › HTML应用开发基础篇 |
HTML应用开发基础篇
|
目录 1、MUI 栅格系统 2、MUI 标题栏 3、MUI 选项卡 4、卡片视图 5、轮播组件 6、列表 1、MUI 栅格系统1）、12 列响应栅格系统：父级容器上添加 .mui-row ，列上添加 .mui-col-[ sm | xs ] - [ 1-12 ]
简单说明一下： mui.init() 栅格系统
运行结果是：
实现一个小例子，效果图为：
代码如下： .mytb{ background: white; } .mytbHeader{ border-bottom: 1px solid gray; } a .myIcon{ font-size: 40px; } .myrow:nth-of-type(2n+1){ background: lightblue; } .myrow:nth-of-type(2n){ background: yellow; } .mui-row .mui-col-xs-3:nth-of-type(1) a{ color: green; } .mui-row .mui-col-xs-3:nth-of-type(2) a{ color: blue; } .mui-row .mui-col-xs-3:nth-of-type(3) a{ color: orange; } .mui-row .mui-col-xs-3:nth-of-type(4) a{ color: black; } mui.init() 标题 编号 姓名 选课信息 001 张三 H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发 002 李四 H5移动应用开发 003 王五 H5移动应用开发 微信 QQ 微博 设置2）、九宫格：如
关键代码为： Home 2、MUI 标题栏1）、普通标题栏： 父层容器： Header 容器添加 class = " mui-bar mui-var-nav " ，标题名称：class = " mui-title "。 2）、左侧导航图标 添加子容器 ( a | span ) ：class = " mui-action-back mui-icon mui-icon-left-nav mui-pull-left " 。 3）、右侧按钮图标 添加子容器（ a | span ）：加载图标或设置显示文字；添加右靠边： mui-pull-right 4）、透明标题栏（沉浸式设置&#x |
【本文地址】
今日新闻 |
推荐新闻 |