一、头部

核心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. json简单案例

    1.Group类 import java.util.ArrayList; import java.util.List; class Group{ private int id; private Str ...

  2. Linux MySql状态、启动、停止、重启命令

    1.查看mysql状态 [1]ps -ef|grep mysqld 看看是否有mysqld_safe 和mysqld进程 [root@localhost ~]# ps -ef|grep mysqld ...

  3. Oracle中查询当前时间、时间格式化方法

    Oracle中如何获取系统当前时间 select to_char(sysdate,'yyyy-mm-dd hh24:mi:ss') from dual;  ORACLE里获取一个时间的年.季.月.周. ...

  4. 车道线检测github集锦

    re1. github_lane_detection; end

  5. django：bootstrap table加载django返回的数据

    bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...

  6. Docker容器中用户权限管理

    在Linux系统中有一部分知识非常重要,就是关于权限的管理控制:Linux系统的权限管理是由uid和gid负责,Linux系统会检查创建进程的uid和gid,以确定它是否有足够的权限修改文件,而非是通 ...

  7. matlab截取图像

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

  8. 线程.Qt更新界面

    1.信号&槽 机制 即可 ZC:个人暂时 测试下来,类似是 PostMessage(...)的方式: a.是在各自的线程中执行代码, b.调用 emit不耗时(指的意思是 像调用PostMes ...

  9. git学习链接---收藏----

    Github 创建新分支:https://blog.csdn.net/top_code/article/details/51931916Git易百教程:https://www.yiibai.com/g ...

  10. Memcache安装配置

    介绍 Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等.简单的说就是将数据调 ...