CSS 简介 你需要具备的知识 在继续学习之前，你需要对下面的知识有基本的了解： HTML / XHTML 如果你希望首先学习这些项目，请在 首页 访问相关教程。. 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 CSS 实例 一个HTML文档可以显示不同的样式: 查看CSS是如何工作的 样式解决了一个很大的问题 HTML 标签原本被设计为用于定义文档内容，如下实例： <h1>这是一个标题</h1> <p>这是一个段落。</p> 样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的…
CSS 教程 通过使用 CSS 我们可以大大提升网页开发的工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。 各章节实例 本 CSS 教程包含了数百个CSS在线实例 通过本站的在线编辑器，你可以在线编辑CSS,并且可以在线查看修改后的效果。 CSS 实例 body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:“Times New Roman“; font-size:20px; } 点击 “尝试一下” 按钮查看css是如何工作的。 CSS 实例 css 在线150个实例，通过本站编辑器，你可以学习在线查看修改后css的运行效果。 尝试一下! HTML/CSS/JS 在线工具 HTML/CSS/JS 在线工具可以在线编辑…
ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。 对于 iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)。 用法 实例 <ion-tabs class=“tabs-positive tabs-icon-only“> <ion-tab title=“首页“ icon-on=“ion-ios-filing“ icon-off=“ion-ios-filing-outline“> <!– 标签 1 内容 –> </ion-tab> <ion-tab title=“关于“ icon-on=“ion-ios-clock“ icon-off=“ion-ios-clock-outline“> <!– 标签 2 内容 –> </ion-tab> <ion-tab title=“设置“ icon-on=“ion-ios-gear“ icon-off=“ion-ios-gear-outline“> <!– 标签 3 内容 –> </ion-tab> </ion-tabs> 效果如下所示： API…
ionic 加载动画 ion-spinner ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。 该图标采用的是SVG。 用法 <ion-spinner icon=”spiral”></ion-spinner> //默认用法 像大部分其他的ionic组件一样，spinner也可以使用ionic的标准颜色命名规则，就像下面这样： <ion-spinner class=”spinner-energized”></ion-spinner> 实例 HTML 代码 <ion-content scroll=”false” class=”has-header”> <p> <ion-spinner icon=”android”></ion-spinner> <ion-spinner icon=”ios”></ion-spinner> <ion-spinner icon=”ios-small”></ion-spinner> <ion-spinner icon=”bubbles” class=”spinner-balanced”></ion-spinner> <ion-spinner icon=”circles” class=”spinner-energized”></ion-spinner> </p> <p> <ion-spinner icon=”crescent” class=”spinner-royal”></ion-spinner> <ion-spinner icon=”dots” class=”spinner-dark”></ion-spinner> <ion-spinner icon=”lines” class=”spinner-calm”></ion-spinner> <ion-spinner icon=”ripple”…
ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换： 效果图如下： 用法 <ion-slide-box on-slide-changed=”slideHasChanged($index)”> <ion-slide> <div class=”box blue”><h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class=”box yellow”><h1>YELLOW</h1></div> </ion-slide> <ion-slide> <div class=”box pink”><h1>PINK</h1></div> </ion-slide> </ion-slide-box> API 属性 类型 详情 delegate-handle (可选) 字符串 该句柄用$ionicSlideBoxDelegate来标识这个滑动框。 does-continue (可选) 布尔值 滑动框是否开启循环滚动。 auto-play (可选) boolean 设置滑动框是否循环播放，如果 does-continue 为 true，默认也为 true。 slide-interval…
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。 效果图如下所示： 用法 要使用侧栏菜单，添加一个父元素<ion-side-menus>，一个中间内容 <ion-side-menu-content>，和一个或更多 <ion-side-menu> 指令。 <ion-side-menus> <!– 中间内容 –> <ion-side-menu-content ng-controller=”ContentController”> </ion-side-menu-content> <!– 左侧菜单 –> <ion-side-menu side=”left”> </ion-side-menu> <!– 右侧菜单 –> <ion-side-menu side=”right”> </ion-side-menu> </ion-side-menus> function ContentController($scope, $ionicSideMenuDelegate) { $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; } 尝试一下 » API 属性 类型…
ionic 滚动条 ion-scroll ion-scroll 用于创建一个可滚动的容器。 用法 <ion-scroll [delegate-handle=””] [direction=””] [paging=””] [on-refresh=””] [on-scroll=””] [scrollbar-x=””] [scrollbar-y=””] [zooming=””] [min-zoom=””] [max-zoom=””]> … </ion-scroll> API 属性 类型 详情 delegate-handle (可选) 字符串 该句柄利用$ionicScrollDelegate指定滚动视图。 direction (可选) 字符串 滚动的方向。 ‘x’ 或 ‘y’。 默认 ‘y’。 paging (可选) 布尔值 分页是否滚动。 on-refresh (可选) 表达式 调用下拉刷新， 由ionRefresher触发。…
ionic 对话框 $ionicPopup ionic 对话框服务允许程序创建、显示弹出窗口。 $ionicPopup 提供了3个方法：alert(), prompt(),以及 confirm() 。 实例 HTML 代码 <body class=”padding” ng-controller=”PopupCtrl”> <button class=”button button-dark” ng-click=”showPopup()”> 弹窗显示 </button> <button class=”button button-primary” ng-click=”showConfirm()”> 确认对话框 </button> <button class=”button button-positive” ng-click=”showAlert()”> 警告框 </button> <script id=”popup-template.html” type=”text/ng-template”> <input ng-model=”data.wifi” type=”text” placeholder=”Password”>…
ionic 浮动框 $ionicPopover $ionicPopover 是一个可以浮在app内容上的一个视图框。 可以实现以下功能点： 在当前页面显示更多信息。 选择一些工具或配置。 在页面提供一个操作列表。 方法 fromTemplate(templateString, options) 或 fromTemplateUrl(templateUrl, options) 参数说明： templateString: 模板字符串。 templateUrl: 载入的模板 URL。 options: 初始化选项。 实例 HTML 代码部分 <p> <button ng-click=“openPopover($event)“>打开浮动框</button> </p> <script id=“my-popover.html“ type=“text/ng-template“> <ion-popover-view> <ion-header-bar> <h1 class=“title“>我的浮动框标题</h1> </ion-header-bar> <ion-content> Hello! </ion-content> </ion-popover-view> </script> fromTemplateUrl 方法…
ionic 平台 $ionicPlatform $ionicPlatform 用来检测当前的平台，以及诸如在PhoneGap/Cordova中覆盖Android后退按钮。 方法 onHardwareBackButton(callback) 有硬件的后退按钮的平台，可以用这种方法绑定到它。 参数 类型 详情 callback function 当该事件发生时，触发回调函数。 offHardwareBackButton(callback) 移除后退按钮的监听事件。 参数 类型 详情 callback function 最初绑定的监视器函数。 registerBackButtonAction(callback, priority, [actionId]) 注册硬件后退按钮动作。当点击按钮时，只有一个动作会执行，因此该方法决定了注册的后退按钮动作具有最高的优先级。 例如，如果一个上拉菜单已经显示，后退按钮应该关闭上拉菜单，而不是返回一个页面视图或关闭一个打开的模型。 参数 类型 详情 callback function 当点击返回按钮时触发，如果该监视器具有最高的优先级。 priority number 仅最高优先级的会执行。 actionId (可选) * 该id指定这个动作。默认：一个随机且唯一的id。 返回值: 函数， 一个被触发的函数，将会注销 backButtonAction。 ready([callback])…