CSS-MUI：筆記-01

時間 2019-11-15

標籤 css mui 筆記欄目 CSS 简体版

原文原文鏈接

ylbtech-CSS-MUI：筆記

1. mui-navbar 導航條返回頂部

1.一、樣式一

1.二、

<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.一、樣式二

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.一、

2. mui-content 內容返回頂部

1.一、

1.二、

<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.一、

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.一、

3.二、

<div class="mui-content" id="detail"></div>

4.一、

4.二、

5.一、

5.二、

六、

3. mui-page-content返回頂部

1.一、

1.二、

<!--頁面主內容區開始-->
<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.一、

2.二、

3.一、

3.二、

4.一、

4.二、

5.一、

5.二、

六、

4. mui-col返回頂部

1.一、

1.二、

<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.一、

2.二、

3.一、

3.二、

4.一、

4.二、

5.一、

5.二、

六、

5. mui-table-view返回頂部

1.一、

1.二、

<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.一、

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.一、

3.二、

4.一、

4.二、

5.一、

5.二、

六、

6. top-tabs返回頂部

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>