一、头部

核心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. ireport如何拼接sql?

    ireport如何拼接sql   ireport如何拼接sql? 解决方法: 1.ireport的sql select * from emp as e $P!{whereSQL}; 2.java代码 ...

  2. json简单案例

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

  3. Docker 部署 ELK 收集 Nginx 日志

    一.简介 1.核心组成 ELK由Elasticsearch.Logstash和Kibana三部分组件组成: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引 ...

  4. （九）UML之活动图

    一.概念 二. 在Rational rose 中画活动图 2.1 创建Activity Diagram 2.2 画图

  5. 无权限安装vim8

    本文介绍Ubuntu14.04在没有sudo权限的情况下安装vim8 1.默认vim版本为7.3 $ vim --versionVIM - Vi IMproved 7.3 (2010 Aug 15, ...

  6. 关于React的脚手架

    Rewire你的应用 https://ant.design/docs/react/use-with-create-react-app-cn create-react-app (官方脚手架 简称cra) ...

  7. easyui 解决连弹两个dialog时候，第二个dialog居中问题

    $('#showDivSecond').dialog('center'); (该方法自1.3.1版开始可用)

  8. MySQL的数据库时间与电脑系统时间不一致

    问题描述 在开发的过程中遇到数据库的时间与电脑本身的系统时间不一致的状态. 首先查看数据库的时间是多少 select now(); select sysdate(); 执行上面的两个sql语句,看数据 ...

  9. opencv根据摄像头名称获取索引值

    OpenCV的VideoCapture是一个视频读取与解码的API接口,支持各种视频格式.网络视频流.摄像头读取. 针对一般摄像头的读取,opencv为了实现跨平台读取摄像头时是使用的摄像头索引, V ...

  10. java - redis学习

    在学习redis之前,我们首先需要了解一下NoSQL(非关系数据库).非关系型数据库通常指数据以对象的形式存储在数据库中,而对象之间的关系通过每个对象自身的属性来决定. 为什么需要NoSQL? (1) ...