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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

CSS-MUI:笔记-01的更多相关文章

  1. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

  2. 总结了一下css的部分基础知识点。---css学习笔记01

    一. css基础 1. 什么是css 层叠样式表:层叠 2. css的三种使用方式 style 属性 --> <div style="css属性值"></d ...

  3. PHP 学习笔记 01

    例子: 为什么要学PHP 主观原因: 前段时间在学校处理了毕业的一些事情,回到上海后开始了找工作的旅程.意向工作是WPF开发或者ASP.NET 作为后端的WEB开发. 陆陆续续一直在面试,其中有一家公 ...

  4. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  5. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  6. 软件测试之loadrunner学习笔记-01事务

    loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...

  7. 《30天自制操作系统》笔记(01)——hello bitzhuwei’s OS!

    <30天自制操作系统>笔记(01)——hello bitzhuwei's OS! 最初的OS代码 ; hello-os ; TAB=4 ORG 0x7c00 ; 指明程序的装载地址 ; 以 ...

  8. 《The Linux Command Line》 读书笔记01 基本命令介绍

    <The Linux Command Line> 读书笔记01 基本命令介绍 1. What is the Shell? The Shell is a program that takes ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  10. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

  1. 算法总结之 数组的partition调整 三个值的升序

    给定一个数组arr, 其中只可能有 0,1,2三个值,请实现arr排序 另一种问法: 有一个数组,只有红 蓝 黄 球,请事先红球全放在数组的左边,蓝球放中间,黄球放右边 另一种问法: 有一个数组,再给 ...

  2. 导出android真机上应用的apk文件

    1. 首先你的手机要开启调试模式 2. 终端输入命令行 (这个时候需要在手机端打开此应用.它的思路是抓取出当前窗口的包名.以下命令操作自己未亲自验证.) adb shell dumpsys windo ...

  3. Spring Cloud遇到的坑——服务状态为DOWN

    今天启动上次写好的微服务时出现了这样的情况: 于是一脸懵逼... 忽然打开DOWN状态微服务的pom文件,看到如下情况: <dependencies> <dependency> ...

  4. review34

    Thread类与线程的创建 让线程启动时使用我们自己创建run()的两种方式:一种是继承Thread类,实现其中的run()方法,然后用继承的类用无参构造方法创建对象就可以了.第二种是实现Runnab ...

  5. 关于Javascript没有块级作用域和变量声明提升

    Javascript是没有块级作用域的,在语句块中声明的变量将成为语句块所在代码片段的局部变量.例如: if(true){ var x=3; } console.log(x); 结果输出3. 再如: ...

  6. python字典方法

    本文参考自<python基础教程 (第二版)> 操作 语法 举例 结果 建立字典 dict() 1.以关键字参数建立字典 2.以其他映射作为参数建立字典 1.d = dict(name=' ...

  7. ASP.NET Core 开源项目整理

    前言: 对 .NET Core 的热情一直没有下降过,新起的项目几乎都是采用 Core 来做开发. 跨平台是一个方面,另外就是 Core 很轻,性能远超很多开发语言(不坑). 一.ASP.NET Co ...

  8. python--关于if __name__==__main__的解释

    在解释之前首先我们看下__name__这个变量存的是什么: #!/usr/bin/env python # -*- coding:utf-8 -*- print(__name__) 结果: __mai ...

  9. Win 7升级记

    微软要抛弃它的XP了,我也应该提前把家里的PC升级成Win7,省得将来麻烦事多. 其实升级它也很简单,这全要归功于网络上的能人.我首先在网络上下载好一个操作系统DEEP_Ghost_Win7_Sp1_ ...

  10. UVA - 11214 Guarding the Chessboard (可重复覆盖,DLX+IDA*)

    题目链接 正解是IDA*+四个方向判重,但由于是个裸的可重复覆盖问题,可以用DLX水过~ 每个格子与放上皇后能干掉的标记连边,跑可重复覆盖DLX.注意要用IDA*来优化,否则会超时. #include ...