| ylbtech-CSS-MUI：笔记 |
| 1. mui-navbar 导航条返回顶部 |
1.1、样式一
1.2、
<div class="mui-navbar-inner mui-bar mui-bar-nav"> <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <span class="mui-icon mui-icon-left-nav"></span>学本领 </button> </div>
2.1、样式二
2.2、
<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: transparent;"> <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <a class="btn btn-default" style="margin-top: 5px; border-radius: 50%;float: left;background-color: rgba(235, 235, 235, 0.5);border- 0px; 40px;height: 40px;"> <span class="mui-icon mui-icon-back" style="color:rgb(102, 102, 102);font-size:27px;left: -1px;"></span> </a> </button> </div>
3.1、
| 2. mui-content 内容返回顶部 |
1.1、
1.2、
<div class="mui-content"> <div class="mui-input-group"> <div class="mui-input-row "> <label style=" 40%;">终止时间</label> <input style=" 60%;" id="EndTime" name="EndTime" type="text" placeholder="请选择日期"> </div> </div> </div>
2.1、
2.2、
<div class="mui-content" style="background-color: #ededee;"> <div class="mui-scroll-wrapper" style="margin-top: 44px;overflow-y: scroll;"> <div class="mui-scroll"> <ul id="wagedetail" class="mui-table-view" style="background: #EDEDED;"></ul> </div> </div> </div>
3.1、
3.2、
<div class="mui-content" id="detail"></div>
4.1、
4.2、
5.1、
5.2、
6、
| 3. mui-page-content返回顶部 |
1.1、
1.2、
<!--页面主内容区开始--> <div class="mui-page-content" style="background-color: #ededed;"> <div class="mui-scroll-wrapper" style="margin-bottom: 47px;"> <div class="mui-scroll" id="detail"></div> </div> </div>
2.1、
2.2、
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 4. mui-col返回顶部 |
1.1、
1.2、
<div class="mui-content" style="margin-top: 196px;"> <div class="mui-col-xs-3 fixclass" id="trainClass" style="border-right: 1px solid #c8c7cc;"> </div> <div id="segmentedControlContents" class="mui-col-xs-9" style="border-top: 1px solid #c8c7cc;"> </div> </div>
2.1、
2.2、
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 5. mui-table-view返回顶部 |
1.1、
1.2、
<ul class="mui-table-view" id="dataList" style="margin:0;"> <li class="mui-table-view-cell mui-media" data-id="{{item.Id}}" data-url> <img class="mui-media-object mui-pull-left" style=" 100%;" src="{{fmtImgPath(item.PictureUrl)}}" alt=""> <div class="mui-media-body"> <span style="font-family:microsoft yahei;"> <span style="font-size:14px;"><strong>{{item.Name}}</strong></span> <br>{{item.Remark}}<br>{{item.TotalPlayCount}}次播放 </span> </div> </li> </ul>
2.1、
2.2、
<ul id="dataList" class="mui-table-view mui-table-view-striped mui-table-view-condensed"> <li class="mui-table-view-cell mui-media" d-id="{{item.OrderId}}" data-id="{{item.VideoId}}" data-curstatus="{{item.CurStatus}}"> <img class="mui-media-object mui-pull-left" src="{{item.PictureUrl}}"> <div class="mui-media-body"> <div class="mui-ellipsis margin-bottom-5">{{item.Name}}</div> <p class="mui-ellipsis margin-bottom-5">{{item.Detail}}</p> <div class="mui-clearfix"> <p class="mui-ellipsis mui-badge mui-badge-warning mui-badge-inverted">￥{{item.Price}}</p> </div> <div class="mui-text-right"> <button type="button" class="mui-btn" data-evt="delete"> 删除记录 </button> {{if item.CurStatus==1}} <button type="button" class="mui-btn mui-btn-danger" data-evt="topay"> 去付款 </button> {{/if}} </div> </div> </li> </ul>
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 6. top-tabs返回顶部 |
1.1、
<div id="top-tabs"> <div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative"> <a class="mui-control-item mui-active" href="javascript:void(0)">全部</a> <a class="mui-control-item" href="javascript:void(0)" data-curstatus="1">待付款</a> <a class="mui-control-item" href="javascript:void(0)" data-curstatus="2">已付款</a> </div> </div>
1.2、
2.1、
2.2、
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 7.返回顶部 |
1.1、
2.1、
2.2、
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 8.返回顶部 |
2.1、
2.2、
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 9.返回顶部 |
2.1、
2.2、
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 10.返回顶部 |
2.1、
2.2、
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 11.返回顶部 |
2.1、
2.2、
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 12.返回顶部 |
2.1、
2.2、
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 13.返回顶部 |
2.1、
2.2、
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 14.返回顶部 |
2.1、
2.2、
3.1、
3.2、
4.1、
4.2、
5.1、
5.2、
6、
| 15.返回顶部 |
| 16.返回顶部 |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |