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/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    Android源码编译jar包BUILD_JAVA_LIBRARY 与BUILD_STATIC_JAVA_LIBRARY的区别(一)
    模块化开发
    最近理解记忆
    ES6语法—— 模块化开发之import和export命令详解
    关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
    2.新知-display:inline-block元素之间空隙的产生原因和解决办法
    规避同源
    vue总结
    vue组件通信
    vue 多次学习
  • 原文地址:https://www.cnblogs.com/storebook/p/8549635.html
Copyright © 2011-2022 走看看