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. Android 经验之文件下载

    在Android 开发中,我们肯定会接触到下载需求,那么如何通过技术实现呢? 一.简单实现: 通过了解HTTP原理,我们应该可以知道,HTTP学习的时候,可以通过HTTPGET方式来进行文件下载: n ...

  2. js验证身份证号，超准确

    js验证身份证号,超准确 看程序前先来了解下身份证号的构成:身份证号分为两种,旧的为15位,新的为18位.身份证15位编码规则:dddddd yymmdd xx p    其中 dddddd:地区码  ...

  3. PHP画矩形，椭圆，圆，画椭圆弧 ，饼状图

    1:画矩形: imagerectangle ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $col ) imagere ...

  4. redis epoll 原理梗概

    redis 是一个单线程却性能非常好的内存数据库, 主要用来作为缓存系统. redis 采用网络IO多路复用技术来保证在多连接的时候, 系统的高吞吐量.为什么 Redis 中要使用 I/O 多路复用这 ...

  5. 自定义线程池reject策略

    import java.util.Date;import java.util.concurrent.ArrayBlockingQueue;import java.util.concurrent.Rej ...

  6. 测试工具之Match Tracer（正则表达式匹配工具）

    这个工具完全界面化,非常好用,如果对自己写的正则表达式不够确定,可以使用这个软件来试水一下 从下面网址可以下载: http://www.regexlab.com/zh/mtracer/download ...

  7. 课程四(Convolutional Neural Networks)，第四 周（Special applications: Face recognition & Neural style transfer） —— 3.Programming assignments：Face Recognition for the Happy House

    Face Recognition for the Happy House Welcome to the first assignment of week 4! Here you will build ...

  8. Spring Cloud Hystrix——熔断器

    1.雪崩效应在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服务消费者 ...

  9. Docker 数据卷和数据卷容器

    1.本节课主要讲解如何在Docker内部及容器之间管理数据.容器中管理数据主要有两种方式:数据卷(Data volumes)数据卷容器(Data volume containers) 2.数据卷:是一 ...

  10. idea中切换svn地址不起作用

    由于公司换地儿,svn地址也跟着变化. 期望用idea能修改svn的地址,不至于重新checkout.网上很多说修改 vcs -> Subversion -> Relocate .把原来的 ...