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. kaldi的TIMIT实例一

    TIMIT语音库是IT和MIT合作音素级别标注的语音库,用于自动语音识别系统的发展和评估,包括来自美式英语,8个地区方言,630个人. 每个人读10个句子,每个发音都是音素级别.词级别文本标注,16k ...

  2. 利用PHP扩展Taint找出网站的潜在安全漏洞实践

    一.背景 笔者从接触计算机后就对网络安全一直比较感兴趣,在做PHP开发后对web安全一直比较关注,2016时无意中发现Taint这个扩展,体验之后发现确实好用:不过当时在查询相关资料时候发现关注此扩展 ...

  3. JavaScript控制页码的显示与隐藏

    前端页面开发分页显示功能时,一般都要求使用自定义的页码样式,直接用网上分页插件就比较麻烦了,这里记录一下工作中总结的一个比较简单通用的控制页码显示与隐藏的的js代码. 首先是使用时需要自己根据自己具体 ...

  4. Testing - 软件测试杂谈

    Part-1 起步 测试是发现质量问题.分析.跟踪.推动与解决的过程. 1 熟悉业务,设计优质的测试用例,需要对所测试项目的业务需求非常熟悉 了解整个产品的研发和测试流程 全程参与,对需求.设计.开发 ...

  5. 测试工具之RobotFramework关键字和快捷键

    RF中关键字很多,即使经常使用也有些关键字没有使用过,所以我们就需要记住一些常用的关键字,在使用中本人整理了部分关键字.快捷键和部分RF的常识 1.F5 如果只记得关键字部分,可以通过F5呼出关键字查 ...

  6. springboot配置监听器、过滤器和拦截器

    监听器:listener是servlet规范中定义的一种特殊类.用于监听servletContext.HttpSession和servletRequest等域对象的创建和销毁事件.监听域对象的属性发生 ...

  7. 2.WF 4.5 流程引擎设计思路

    本文主要给大家分享下基于WF 4.5框架的流程引擎设计思路 1.流程启动时的数据写入EventMsgPP对象中,ObjectAssemblyType记录流程启动时需要的类型,ObjectContent ...

  8. 关于JAVAweb的一些东西

    1.Servlet 1.Servlet访问URL映射配置 <servlet> <servlet-name>ServletDemo1</servlet-name> & ...

  9. 喜大普奔，SITE4J网站上线啦

    喜大普奔,SITE4J网站上线啦: 你懂的:https://peterchenhdu.club/

  10. 从零开始学 Web 之 BOM（三）offset，scroll，变速动画函数

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...