zoukankan      html  css  js  c++  java
  • 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- 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.返回顶部
     
    warn 作者:ylbtech
    出处:http://ylbtech.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    HTTP 协议中的并发限制及队首阻塞问题
    聊聊JMM
    聊聊CacheLine
    git解决本地建立git仓库 连接远程git仓库出现拒绝合并问题
    django 本地项目部署uwsgi 以及云服务器部署 uwsgi+Nginx+Docker+MySQL主从
    我的第一篇播客
    大爷的超市管理系统——冲刺第一天
    能混绝不C——凡事预则立
    2020软件工程团队作业——05
    2020软件工程作业——04
  • 原文地址:https://www.cnblogs.com/storebook/p/8549635.html
Copyright © 2011-2022 走看看