一、头部

核心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. mybatis/tk mybatis下实体字段是关键字/保留字，执行报错

    实体如下: import com.fasterxml.jackson.annotation.JsonFormat; import com.xxx.web.bean.PagesStatic; impor ...

  2. JS时间转换，url编码，jquery返回类型等问题

    1.当时间被转换为json格式后会被转换成 /Date(...)/ 这种格式,其中...为时间转换成妙后的一串整数 function changeDateFormat(cellval) { )); v ...

  3. 【Leetcode_easy】645. Set Mismatch

    problem 645. Set Mismatch 题意: solution1: 统计每个数字出现的次数了,然后再遍历次数数组,如果某个数字出现了两次就是重复数,如果出现了0次,就是缺失数. 注意:如 ...

  4. 48.javascript基础学习

    javascript基础学习:   http://www.w3school.com.cn/jsref/index.asp jS的引入方式: 1.行间事件:为某一个具体的元素标签赋予js内容,oncli ...

  5. Asp.Net Core 客户端验证和远程验证

    我们先来看这样一个注册页面和它的后台Model @model RegisterViewModel @{ ViewBag.Title = "用户注册"; } <h1>用户 ...

  6. Linux软件安装管理---源码安装

    在Linux平台下,软件包的类型可以划分为两类:源码包.二进制包. 源码包: 即程序软件的源代码(一般也叫Tarball,即将软件的源码以tar打包后再压缩的资源包). 二进制包: 如 Red Hat ...

  7. 【转帖】iPhone 11 Pro Max皇帝版物料成本不足3500元 卖一赚二

    iPhone 11 Pro Max皇帝版物料成本不足3500元 卖一赚二 https://www.cnbeta.com/articles/tech/894449.htm 供应链的掌控力很重要 苹果今年 ...

  8. Oracle常用指令

    /**  为了清晰化的显示:所有固定命令都是用大写格式显示 SQL语法分类:DML,DDL,DCL (1)DML(Data Manipulation Language ,数据库操作语言): 数据:增加 ...

  9. Oracle10G安装手册

    环境准备: 操作系统:windows-7 32bit 数据库:oracle10G 网络环境:不能使用DHCP模式,必须设置一个固定IP地址. 运行安装 1.打开oracle安装文件,请勿直接选择set ...

  10. 【坑】Mybatis 多次逆向工程生成mapper文件

    在使用 mybatis 逆向工程的时候,多次逆向工程生成的文件,是不会产生覆盖的,而是追加: 假如,你第一次逆向,发生数据库的某个字段类型错了,修改以后再次逆向,那么得到的 mapper文件,将是 2 ...