CSS-MUI：笔记-01

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-width: 0px;width: 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="width: 40%;">终止时间</label>
            <input style="width: 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="width: 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/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。