一、头部

核心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. [Scikit-learn] 1.1 Generalized Linear Models - from Linear Regression to L1&L2

    Introduction 一.Scikit-learning 广义线性模型 From: http://sklearn.lzjqsdd.com/modules/linear_model.html#ord ...

  2. 123457------com.threeapp.quWeiKaTongPinTu01----趣味卡通拼图游戏

    com.threeapp.quWeiKaTongPinTu01----趣味卡通拼图游戏

  3. 123457---脑筋急转弯01－－com.threeObj03.JiZhuanWan

    脑筋急转弯01--com.threeObj03.JiZhuanWan

  4. PAT 甲级 1042 Shuffling Machine (20 分)（简单题）

    1042 Shuffling Machine (20 分)   Shuffling is a procedure used to randomize a deck of playing cards. ...

  5. iOS-UIToolbar与UISearchBar

    组件_ UIToolbar  /** 1. 顶部toolbar 2. TextField可以以UIBarButtonItem的自定义视图的方式加入toolbar 3. 三个按钮 4. 将UIBarBu ...

  6. （三）Asp.net web api中的坑-【http post请求中的参数】

    接上篇, HttpPost 请求 1.post请求,单参数 前端 var url = 'api/EnterOrExit/GetData2';var para = {};para["Phone ...

  7. MATLAB知识-解决因缺少libsvm 而运行出现Y must be a vector or a character array.

    matlab版本R2014b 最近运行一个使用svmtrain的程序,出现以下错误: 这是因为是在设定路径里面没有libsvm.辛亏有一位师姐的电脑里面有libsvm的包,我直接用了,这样就不需要下载 ...

  8. 基于SymmetricDS的多主一从数据库同步方案

    原文参照:https://blog.csdn.net/seattle0564/article/details/22096901 下面就记录下测试的一款第三方同步方案SymmetricDS(以下简称S) ...

  9. python 使用 RabbitMQ

    一.RabbitMQ消息队列介绍 RabbitMQ是在两个独立得python程序,或其他语言交互时使用. RabbitMQ:erlang语言 开发的. Python中连接RabbitMQ的模块:pik ...

  10. 纯C++实现操作配置文件（告别跨平台问题）

    CConfig.h #ifndef _CCONFIG_H #define _CCONFIG_H #include <iostream> #include <string> #i ...