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. 背水一战 Windows 10 (81) - 全球化

    [源码下载] 背水一战 Windows 10 (81) - 全球化 作者:webabcd 介绍背水一战 Windows 10 之 全球化 Demo 格式化数字 示例1.演示全球化的基本应用Locali ...

  2. 关于java集合的一些操作

    1.数组转集合 java提供了一个方法:Arrays.asList(T... a)的方法. 测试: String[] arr = {"Lida","huanda" ...

  3. Windows 远程栈溢出挖掘与利用

    缓冲区溢出攻击很容易被攻击者利用,因为 C 和 C++等语言并没有自动检测缓冲区溢出操作,同时程序编写人员在编写代码时也很难始终检查缓冲区是否可能溢出.利用溢出,攻击者可以将期望数据写入漏洞程序内存中 ...

  4. Android 实现手写板技术

    Android手写板和涂鸦的功能,代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro ...

  5. 学爬虫，需要掌握哪些Python基础？

    入手爬虫确实不要求你精通Python编程,但基础知识还是不能忽视的,那么我们需要哪些Python基础呢? 首先我们先来看看一个最简单的爬虫流程:   第一步要确定爬取页面的链接,由于我们通常爬取的内容 ...

  6. LeetCode:114_Flatten Binary Tree to Linked List | 将一棵二叉树变成链表的形式 | Medium

    要求:Given a binary tree, flatten it to a linked list in-place.将二叉树转化为平坦序列的树.比如: 结题思路: 该题有个提示,转化后的树的序列 ...

  7. javaweb目录结构简介

    以上图说明: bbs目录代表一个web应用 bbs目录下的html,jsp文件可以直接被浏览器访问 WEB-INF目录下的资源是不能直接被浏览器访问的 web.xml文件是web程序的主要配置文件 所 ...

  8. 脚手架vue-cli系列五：基于Nightwatch的端到端测试环境

    不同公司和组织之间的测试效率迥异.在这个富交互和响应式处理随处可见的时代,很多组织都使用敏捷的方式来开发应用,因此测试自动化也成为软件项目的必备部分.测试自动化意味着使用软件工具来反复运行项目中的测试 ...

  9. setInterval()、clearInterval()、setTimeout()和clearTimeout() js计数器方法（还有第三个参数）

    用法是会用,但是之前一直以为接函数的 var a = setInterval(function(){},1000) 比如a是函数名,最近才发现它是一个ID, var intervalID = wind ...

  10. [Java初探外篇]__关于正则表达式

    正则表达式通常用于判断语句之中,用来检测一段字符串是否满足某一个格式.在日常生活中被广泛的用于各种用户输入信息的检测上. 而正则表达式实际上是一些具有特殊意义的字符序列.通过这些特殊字符构成的特殊序列 ...