一、头部

核心css mui-bar mui-bar-nav

<header class="mui-bar mui-bar-nav">

    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

    <h1 class="mui-title">hello</h1>

</header>

二、主体部分

核心css mui-content

<div class="mui-content">

    主体部分....

</div>

完整代码演示

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title></title>

<script src="js/mui.min.js"></script>

<link href="css/mui.min.css" rel="stylesheet"/>

<script type="text/javascript" charset="utf-8">

mui.init();

</script>

</head>

<body>

<div>

<header class="mui-bar mui-bar-nav">

    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

    <h1 class="mui-title">hello</h1>

</header>

<div class="mui-content">

    内容部分....

</div>

</body>

</html>

效果图：

注意：如果效果有出入请检查下是否有错误，css文件是否已导入和字体文件是否存在。

MUI顶部导航布局的更多相关文章

  1. [js]顶部导航和内容区布局

    自己实现顶部导航布局--内容显示 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. android开发(49) android 使用 CollapsingToolbarLayout ，可折叠的顶部导航栏

    概述 在很app上都见过 可折叠的顶部导航栏效果.google support v7  提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下:    实现步骤 1. 写 ...

  3. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  4. TabLayout实现顶部导航(一)

    代码地址如下:http://www.demodashi.com/demo/14552.html 前言 顶部导航栏,是我们在开发中比较常见的一种显示布局,它的实现可以有多种方式,那么今天我们就来讲讲 T ...

  5. 使用PagerSlidingTabStrip实现顶部导航栏

    使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏. 效果图如下:          PagerSlidingTabStrip是github上的一个开源项目,项目地址如下 ...

  6. TabLayout实现顶部导航栏（1）

    TabLayout是android.support.design里的一个控件,使用它可以很方便的做出顶部导航和底部导航.类似于这样的,能设置选中时字体的颜色和选中时的图片. 首先我们在 build.g ...

  7. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

  8. 天书笔记：HTML+CSS实现顶部导航栏

    此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记 先晒效果图: 效果要求类似于b站的顶部导航(..原谅我老是拿b站做例子:) ) 然后是代码 ...

  9. 更改SharePoint 2010 顶部导航为下拉菜单样式

      更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...

随机推荐

  1. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_14-课程预览功能开发-CMS添加页面接口

    5.3 CMS添加页面接口 cms服务对外提供添加页面接口,实现:如果不存在页面则添加,否则就更新页面信息. 此接口由课程管理服务在课程预览时调用. 接口方法.:页面没有就添加.有了更新数据 之前的接 ...

  2. 123457123456#0#-----com.yuming.FromPuzzleGame01--前拼后广--宝宝农场拼图cym

    com.yuming.FromPuzzleGame01--前拼后广--宝宝农场拼图cym

  3. PAT 甲级 1054 The Dominant Color (20 分)（简单题）

    1054 The Dominant Color (20 分)   Behind the scenes in the computer's memory, color is always talked ...

  4. [LeetCode] 167. Fraction to Recurring Decimal 分数转循环小数

    Given two integers representing the numerator and denominator of a fraction, return the fraction in ...

  5. ADFS2016和ADFS代理的安装与配置

    一,ADFS安装教程 教程链接(包含安装和配置两个步骤): https://www.virtuallyboring.com/how-to-setup-microsoft-active-director ...

  6. react如何在网页上编辑并运行代码？

    最近想做个能在网站,能在网页上运行代码,并且保存这个组件,看了一下element-react的组件和官方的实例,发现都是可以编辑运行的,因为之前没有这方面的经验,所以看下各位大佬能不能给点意见

  7. OpenGL学习笔记 之二 （色彩相关）

    参考: http://www.cnblogs.com/FredCong/archive/2012/10/13/2722893.html 使用RGB #include <glut.h> #i ...

  8. 【ARM-Linux开发】嵌入式操作系统上的小型数据库移植SQLite

    近段时间在学数据库,因为自身需求,所以注重研究了点嵌入式sqlite数据库,SQLite,是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品 ...

  9. matlab求取积分

    声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 对于Matlab的使用情况常常是这样子的,很多零碎的函数名字很难记忆,经常用过后过一段时间就又忘记了,又得去网 ...

  10. vbox配置共享磁盘

    本人实在配置Oracle rac的时候,进行共享磁盘的配置 以下操作要在虚拟机关机的情况下进行: 接下来按照步骤走即可