index代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Todo</title>

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

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->

    <script src="js/app2.js"></script>

    <script src="cordova.js"></script>

</head>

<body>

    <!--头部样式-->

    <div class="bar bar-header bar-light">

        <h1 class="title">bar-light</h1></div>

    <div class="bar bar-header bar-positive">

        <h1 class="title">bar-positive</div>

    <div class="bar bar-header bar-energized">

        <h1 class="title">bar-energized</h1></div>

    <div class="bar bar-header bar-assertive">

        <h1 class="title">bar-assertive</h1></div>

    <div class="bar bar-header bar-royal">

        <h1 class="title">bar-royal</h1></div>

    <div class="bar bar-header bar-dark">

        <h1 class="title">bar-dark</h1></div>

    <div class="bar bar-header bar-calm">

        <h1 class="title">bar-calm></h1></div>

    <!--副标题-->

    <div class="bar bar-header">

        <h1 class="title">Header</h1>

    </div>

    <div class="bar bar-subheader">

        <h2 class="title">sub Header</h2>

    </div>

    <!--底部-->

    <div class="bar bar-footer bar-balanced">

        <div class="title">Footer</div>

    </div>

    <div class="bar bar-footer">

        <button class="button button-clear">Left</button>

        <div class="title">Title</div>

        <button class="button btton-clear">Right</button>

    </div>

    <div class="bar bar-footer">

        <button class="button button-clear pull-right">Right</button>

    </div>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-ionic-头部与底部的更多相关文章

  1. ionic-CSS：ionic 头部与底部

    ylbtech-ionic-CSS:ionic 头部与底部 1.返回顶部 1. ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮. ion ...

  2. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  3. 【代码笔记】Web-ionic-卡片

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. html 如何引入一个公共的头部和底部

    2016-01-08 作者案:尽己之力,用心打造一个商城!当你有十二分力气时,发现用了十分力气依旧没什么进展,请不要放弃希望:或许你想得到的东西正在十二分力气的地方等你:假若你用尽了十二分力气,还是没 ...

  5. HTML5 开发APP(头部和底部选项卡)

    我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面 ...

  6. vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  7. 在html页面中引入公共的头部和底部

    参考链接: http://www.cnblogs.com/jason-star/p/3345225.html http://blog.csdn.net/jsxzzliang/article/detai ...

  8. html头部和底部固定时,中间的内容随屏幕分别率铺满页面

    html页面头部和底部有东西时,怎么让内容填充到中间的页面,且去适应不同的电脑分辨率,看代码 <!DOCTYPE html> <html> <head> <m ...

  9. 利用ajax 引入静态页公共的头部与底部

    利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有很多种,这是我个人觉得比较简单方便的 首先得把公用的 ...

随机推荐

  1. Scala微服务架构 一

    因为公司的一个项目需求变动会非常频繁,同时改动在可控范围内,加上产品同学喜欢一些超前思维,我们的CTO决定提前开启八门,使用微服务架构. 划重点 微服务架构主要特点: ==独立组件(自主开发升级)== ...

  2. Linux pwn入门教程(6)——格式化字符串漏洞

    作者:Tangerine@SAINTSEC 0x00 printf函数中的漏洞 printf函数族是一个在C编程中比较常用的函数族.通常来说,我们会使用printf([格式化字符串],参数)的形式来进 ...

  3. 11.webview、shareSDK

    布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:la ...

  4. react写一个todo

    概述 最近学习redux,打算先复习一下react,所以用react写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 代码 代码请见我的github 组织架构如下图:

  5. 锚接口(上)——hashchange api 和 $.uriAnchor

    概述 这是我在单页Web应用这本书上看到的方法,并深入的研究了一下,把结果记录在下面,供以后开发时参考,相信对其它人也有用. 说明一下,这个方法已经过时了,H5有更新的方法:history api,我 ...

  6. 我自己的sublime3环境

    概述 我本来一直用的别人自带的破解版sublime3,自带插件. 前几天看<程序员修炼之道>,其中谈到了最好精通一种编辑器,我觉得说的很有道理,于是重新下了最新版的sublime3,一步步 ...

  7. [Mac]macOS Mojave ：发现 Mac 的新功能。

    1.深色模式 换种颜色看 Mac “深色模式”为桌面和内建应用带来更生动的外观,可让您轻松专注于最重要的内容. 若要在浅色和深色外观之间切换,请打开“系统偏好设置”并点按“通用”. 2.叠放 整理桌面 ...

  8. Qt之使用CQU库快速开发统一风格界面

    在使用Qt开发时,肯定是想让开发的项目界面统一风格:不希望每个界面都要程序员用代码去修饰美化以及进行事件处理等等,这样非常繁琐,容易出错而且没有格调:所以我就开发一个动态链接库,封装统一的风格界面.事 ...

  9. .NET手记-JS获取Url参数

    最近为App做活动专区,其中很多活动都是采用html 5页面来制作的.一方面体量较小,制作快速,更新维护容易:另一方面,嵌入App后适配效果也不会很差. 这里我们采用混编形式来从native app传 ...

  10. mysql使其支持插入中文数据的办法

    1.找到安装的文件夹C:\Program Files (x86)\MySQL\MySQL Server 5.0 2.修改文件夹下的my.ini文件: 找到画黄线的这一字段 将后面改为utf8 这个过程 ...