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/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    野生的男人,家养的猪
    能在xcode5中开发基于IOS7sdk的应用程序兼容ios4.3之后的系统吗?
    ios开发怎样才能做到代码和界面彻底分离,方便换肤?
    如何解决iOS6、iOS7 3.5寸和4.0寸屏的适配问题?不要写两个xib文件
    哪些听起来很牛逼的互联网理念!
    iOS 使用宏 常量 报错 expected expression
    ios测试宏指令出错:“Expected identefier”
    某个 页面覆盖了 UITabBar 的tabItem的解决办法
    ios(包括6、7)应用程序引用系统通讯录的方法 [亲测可行]
    ios 获得通讯录中联系人的所有属性 亲测,可行 兼容io6 和 ios 7
  • 原文地址:https://www.cnblogs.com/storebook/p/8549635.html
Copyright © 2011-2022 走看看