CSS-MUI:笔记-01
ylbtech-CSS-MUI:笔记 |
1. mui-navbar 导航条返回顶部 |

<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>

<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>
2. mui-content 内容返回顶部 |

<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>
<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>
<div class="mui-content" id="detail"></div>
3. mui-page-content返回顶部 |
<!--页面主内容区开始-->
<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>
4. mui-col返回顶部 |

<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>
5. mui-table-view返回顶部 |

<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>

<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>
6. top-tabs返回顶部 |
<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、

7.返回顶部 |
8.返回顶部 |
9.返回顶部 |
10.返回顶部 |
11.返回顶部 |
12.返回顶部 |
13.返回顶部 |
14.返回顶部 |
15.返回顶部 |
16.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
CSS-MUI:笔记-01的更多相关文章
- CSS学习笔记01 CSS简介
1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
- 总结了一下css的部分基础知识点。---css学习笔记01
一. css基础 1. 什么是css 层叠样式表:层叠 2. css的三种使用方式 style 属性 --> <div style="css属性值"></d ...
- PHP 学习笔记 01
例子: 为什么要学PHP 主观原因: 前段时间在学校处理了毕业的一些事情,回到上海后开始了找工作的旅程.意向工作是WPF开发或者ASP.NET 作为后端的WEB开发. 陆陆续续一直在面试,其中有一家公 ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- 软件测试之loadrunner学习笔记-01事务
loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...
- 《30天自制操作系统》笔记(01)——hello bitzhuwei’s OS!
<30天自制操作系统>笔记(01)——hello bitzhuwei's OS! 最初的OS代码 ; hello-os ; TAB=4 ORG 0x7c00 ; 指明程序的装载地址 ; 以 ...
- 《The Linux Command Line》 读书笔记01 基本命令介绍
<The Linux Command Line> 读书笔记01 基本命令介绍 1. What is the Shell? The Shell is a program that takes ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
- 算法总结之 数组的partition调整 三个值的升序
给定一个数组arr, 其中只可能有 0,1,2三个值,请实现arr排序 另一种问法: 有一个数组,只有红 蓝 黄 球,请事先红球全放在数组的左边,蓝球放中间,黄球放右边 另一种问法: 有一个数组,再给 ...
- 导出android真机上应用的apk文件
1. 首先你的手机要开启调试模式 2. 终端输入命令行 (这个时候需要在手机端打开此应用.它的思路是抓取出当前窗口的包名.以下命令操作自己未亲自验证.) adb shell dumpsys windo ...
- Spring Cloud遇到的坑——服务状态为DOWN
今天启动上次写好的微服务时出现了这样的情况: 于是一脸懵逼... 忽然打开DOWN状态微服务的pom文件,看到如下情况: <dependencies> <dependency> ...
- review34
Thread类与线程的创建 让线程启动时使用我们自己创建run()的两种方式:一种是继承Thread类,实现其中的run()方法,然后用继承的类用无参构造方法创建对象就可以了.第二种是实现Runnab ...
- 关于Javascript没有块级作用域和变量声明提升
Javascript是没有块级作用域的,在语句块中声明的变量将成为语句块所在代码片段的局部变量.例如: if(true){ var x=3; } console.log(x); 结果输出3. 再如: ...
- python字典方法
本文参考自<python基础教程 (第二版)> 操作 语法 举例 结果 建立字典 dict() 1.以关键字参数建立字典 2.以其他映射作为参数建立字典 1.d = dict(name=' ...
- ASP.NET Core 开源项目整理
前言: 对 .NET Core 的热情一直没有下降过,新起的项目几乎都是采用 Core 来做开发. 跨平台是一个方面,另外就是 Core 很轻,性能远超很多开发语言(不坑). 一.ASP.NET Co ...
- python--关于if __name__==__main__的解释
在解释之前首先我们看下__name__这个变量存的是什么: #!/usr/bin/env python # -*- coding:utf-8 -*- print(__name__) 结果: __mai ...
- Win 7升级记
微软要抛弃它的XP了,我也应该提前把家里的PC升级成Win7,省得将来麻烦事多. 其实升级它也很简单,这全要归功于网络上的能人.我首先在网络上下载好一个操作系统DEEP_Ghost_Win7_Sp1_ ...
- UVA - 11214 Guarding the Chessboard (可重复覆盖,DLX+IDA*)
题目链接 正解是IDA*+四个方向判重,但由于是个裸的可重复覆盖问题,可以用DLX水过~ 每个格子与放上皇后能干掉的标记连边,跑可重复覆盖DLX.注意要用IDA*来优化,否则会超时. #include ...