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. JavaScript概述-第1章

    目录 初始JavaScript 学会使用编辑工具 如何引入脚本代码 常用语句 常见浏览器兼容性问题 了解前端开发技术JavaScript,JavaScript的发展,JavaScript特点,Java ...

  2. API接口设计：防参数篡改+防二次请求

    API接口由于需要供第三方服务调用,所以必须暴露到外网,并提供了具体请求地址和请求参数 为了防止被第别有用心之人获取到真实请求参数后再次发起请求获取信息,需要采取很多安全机制 1.首先: 需要采用ht ...

  3. asp.net mvc 安全测试漏洞 "跨站点请求伪造" 问题解决

    IBM Security Appscan漏洞筛查-跨站请求伪造,该漏洞的产生,有多种情况: 1.WebApi的跨站请求伪造,需要对WebApi的请求头部做限制(此文不做详细介绍): 2.MVC Act ...

  4. Maven - 实例-1-手工创建Maven项目

    1- 根据包结构创建maven项目目录 TestMaven - src - src/main/java/anliven/testmaven01/HelloMaven.java - src/test/j ...

  5. LeetCode--No.015 3Sum

    15. 3Sum Total Accepted: 131800 Total Submissions: 675028 Difficulty: Medium Given an array S of n i ...

  6. Django --ORM常用的字段和参数 多对多创建形式

    1 ORM字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列. IntegerField 一个整数类型 ...

  7. Android动态添加Fragment

    Android动态添加Fragment 效果图如下: 项目结构图如下: Fragment1: package com.demo.dongtaifragment; import android.app. ...

  8. Java读取Properties的几种方法

    本文转载自:http://blog.csdn.net/chjttony/article/details/5927613 每次用完每次忘相对与绝对...

  9. "java.lang.IllegalStateException: No instrumentation registered! Must run under a registering instrumentation."问题解决

    问题描述 运行uiautomator,报错"java.lang.IllegalStateException: No instrumentation registered! Must run ...

  10. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（十八）：注册中心（Spring Cloud Consul）

    什么是 Consul Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其它分布式服务注册与发现的方案,Consul 的方案更“一站式”,内置了服务注册与 ...