2016年12月_Tiramisu_C

原创 CSS—清除浮动的几种方式

什么是浮动？特性：1--浮动的元素不会占据标准流的空间，但是会影响标准流中的文本的排版。浮动只有左右浮动。 2--浮动元素A的位置与上一个元素有关系。如果上一个元素有浮动，则A的顶部与上一个元素顶部对齐，如果没有浮动，则与其底部对齐。 3--一个父盒子中的子盒子，如果其中一个子级有浮动，则其他子级都需要浮动，才能一行显示。 4--元素浮动之后，如果没有设

2016-12-26 17:11:29 9479

原创 HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容

1.新语义元素：HTML5提供了新的语义元素来明确一个Web页面的不同部分。：描述了文档的头部区域，于定义内容的介绍展示区域：定义导航链接的部分。：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，section通常包含了一组内容及其标题。：定义独立的内容。：定义页面主区域内容之外的内容（比如侧边栏）。：标签规定独立的流内

2016-12-26 13:33:23 37955

原创 Jquery—使用AJAX

AJAX 即异步 JavaScript 和 XML（Asynchronous JavaScript and XML），是一种与服务器交换数据的技术，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。不同浏览器ajax的实现并不相同，为了兼容不同浏览器，使用传统的JS代码来实现ajax是比较繁杂的，但是使用jquery，实现起来就非常简单。这里我使用本地服务器APM来发

2016-12-25 13:02:31 794

原创 Jquery—遍历元素

1.遍历祖先向上遍历 DOM 树的几个方法：parent()—返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历parents()—返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()parentsUntil()—返回介于两个给定元素之间的所有祖先元素用法：$("span").parent().toggleClass("green

2016-12-24 23:44:31 1429

原创 Jquery—获取和设置尺寸(width，height)

Jquery处理尺寸的几个方法：width()—设置或返回元素的宽度（不包括内边距、边框或外边距）height()—设置或返回元素的高度（不包括内边距、边框或外边距）。innerWidth()—返回元素的宽度（包括内边距）innerHeight()—返回元素的高度（包括内边距）outerWidth()—返回元素的宽度（包括内边距和边框）outerHeight()

2016-12-24 22:22:47 9389

原创 Jquery—操作css

jquery操作css有以下几个方法：addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性1.addClass()用法： $(function(){ $("button")

2016-12-24 20:06:16 707

原创 Jquery—添加、删除元素

1.添加新元素添加新元素的四个方法：append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容用法： $(function(){ $("button").click(function(){//

2016-12-24 16:57:35 1109

原创 Jquery—获取和设置html内容和属性

1.获取内容三个用于 DOM 操作的 jQuery 方法：text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值用法： $(function(){ $("button").click(function(){

2016-12-24 16:28:00 2257

原创 Jquery—效果（隐藏、显示、切换，滑动，淡入淡出及动画）

1.隐藏和显示语法：$(selector).hide(speed,callback); 隐藏$(selector).show(speed,callback);显示$(selector).toggle(speed,callback);隐藏显示进行切换其中，speed是隐藏显示的速度，可取："slow"、"fast" 或毫秒。callback是隐藏显示动作完

2016-12-24 12:25:57 1875

原创 Jquery—事件event

常见DOM事件：鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouse

2016-12-24 11:23:46 776

原创 HTML5—浏览器支持问题

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。为了能让旧版本的浏览器正确显示这些元素，可以设置 CSS 的 display 属性值为 block:header, section, footer, aside, nav, main, article, figure

2016-12-19 19:56:53 1122

原创 Bootstrap—进度条progress-bar

Bootstrap为我们提供具有漂亮样式的进度条来表示一个事务的进度，如下：实现方法如下：（1）引入bootrap文件，（2）添加一个；（3）在中添加一个其中，aria-valuenow="40"——进度条目前进度值。aria-valuemax="100"——最大进度值。aria-valuemin=“0”——最小进度值。style="w

2016-12-16 16:33:21 14003 3

原创 Bootstrap—标签label和徽章badge

.label label-default 默认的灰色标签.label label-primary "primary" 类型的蓝色标签.label label-success "success" 类型的绿色标签.label label-info "info" 类型的浅蓝色标签.label label-warning "warning" 类型的黄色标签.label lab

2016-12-15 22:31:02 5247

原创 Bootstrap—分页Pagination和翻页Pager

看新闻或者长内容文章的时候常常看到分页按钮，今天来学一下Bootstrap中的分页和翻页。分页：

2016-12-15 22:05:56 4555

原创 Bootstrap—面包屑导航breadcrumb

什么是面包屑导航，先来看一下效果：面包屑导航是具有层次结构的一种显示方式，bootrap中通过 .breadcrumb class 的无序列表实现面包屑导航效果，代码如下：面包屑导航鞋子女鞋高跟鞋本文

2016-12-15 21:49:40 4100 1

原创 Bootstrap—导航栏

使用Bootstrap制作导航栏，可以让导航栏具有响应式特性，在移动设备中，导航栏中的组件是折叠的，随着页面宽度的增加，导航栏也会水平展开。简单的导航栏如下图：制作步骤：（1）使用nav标签包裹住导航，加入class="navbar navbar-default"样式。（2）nav中放入导航项。这里放一个class="container"的div，然后再放入组件，如此可让导航内

2016-12-15 20:21:57 1331

原创 Bootstrap—导航元素

Bootstrap导航元素使用方法：1.创建无序列表ul,并添加基类样式.nav。2.在的class属性中添加需要的导航样式。导航样式：（1）标签式导航nav-tabs 导航1 导航2 导航3 导航4 导航5 导航6（

2016-12-14 23:49:51 724

原创 Bootstrap—输入框组input-group

相信你在很多的网站页面上都看见过这样的输入框：这样的输入框我们通过原生的手写css也能实现，但是使用Bootstrap的输入框组会让你实现起来更加简便。实现在输入框前后添加元素的代码如下：输入框组 @

2016-12-14 22:52:14 41958 5

原创 Bootstrap—按钮下拉菜单

按钮下拉菜单，顾名思义，就是一个按钮，点击按钮，弹出下拉菜单。使用bootstrap制作按钮下拉菜单，只需要在一个.btn-grounp中放置按钮和下拉菜单即可。一般的按钮下拉菜单是这样的：实现代码如下：按钮下拉菜单服务

2016-12-14 14:12:44 2857 2

原创 Bootstrap—使用按钮组

Bootstrap按钮组是将一组按钮放在一个拥有class="btn-group"的div中，这些button给他加上.btn或者.btn-success样式，让这些按钮形成一个组，效果如下：从图片中可以看出，使用按钮组包裹起来的按钮，当点击其中一个按钮时，此按钮呈现点击的状态，并当你点击非此按钮的区域时，这个点击的状态才会消失。代码如下：按钮组

2016-12-14 13:06:31 916 1

原创 Bootstrap—制作常用下拉菜单

项目中常常需要用到下来菜单，下面来讲一下如何使用Bootstrap的下拉菜单组件。先来看一下效果：这个demo代码如下：下拉菜单下拉菜单社区服务

2016-12-14 11:32:06 3042 2

原创 Bootstrap—解决下拉菜单不弹出问题

最近学到Bootstrap下拉菜单，学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo，写完代码发现运行之后点击按钮没反应，下拉菜单弹不出来，对照教程感觉代码没错。我的代码如下：下拉菜单点击弹出下来菜单 1

2016-12-14 00:14:57 34109 11

原创 Bootstrap—200多种字体图形，你想要的都在这里

还在辛辛苦苦切精灵图吗，还在使用position小心翼翼将精灵图上的小小图标一个一个显示吗，Bootstrap为我们提供了200多种常用的字体图形，这大大减少了以上说的这些工作。bootstrap 3.x以上支持字体图形，glyphicons为我们提供了各式各样常用图标。参照http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons

2016-12-13 22:55:12 9811

原创 Bootstrap—解决引入本地Bootstrap文件字体图标无法显示问题

你在使用bootstrap字体图标的时候，是否遇到引用本地Bootstrap文件无法显示字体图标，而使用CDN服务器上bootstrap却能正常显示的问题。在不能正常显示的时候，比如我要在一个按钮中使用一个√的字体图标，我的代码是这样子的： bootstrap字体图标但是他的显示却是这个样子的：网上查找

2016-12-13 16:29:48 61378 16

原创 Bootstrap—实现圆角、圆形头像和响应式图片

Bootstrap提供了四种用于类的样式，分别是：.img-rounded：圆角 (IE8 不支持)，添加 border-radius:6px 来获得图片圆角；.img-circle：圆形 (IE8 不支持)，添加 border-radius:50% 来让整个图片变成圆形。.img-thumbnail：缩略图功能，添加一些内边距（padding）和一个灰色的边框。.img-resp

2016-12-13 10:53:47 30852 1

原创 Bootstrap—各式各样的按钮

Bootstrap为我们提供了各式各样漂亮的按钮，我们无需自己给按钮写样式，直接使用它给我们提供的类样式，使用在我们的按钮上，非常的简单方便。活学活用，自己利用bootstrap的样式来做一个表格，里边放一些知识点：类样式描述.btn圆角灰色按钮，为了让按钮不那么尖锐，我们的按钮都应该使用这个样式来获得圆角，然后再覆盖上其他的特性

2016-12-13 00:00:29 27632

原创 Bootstrap—表单学习笔记

本文知识点借鉴来自http://www.runoob.com/bootstrap/bootstrap-forms.html，里面写的比较详细还给出了例子，这里总结一下重点方便记忆。一、表单布局1.垂直表单（默认）向父元素添加 role="form"。把标签和控件放在一个带有 class .form-group 的中。这是获取最佳间距所必需的。

2016-12-12 22:37:42 757 1

原创 Bootstrap—轻松制作漂亮表格（table）

学习了runoob.com网站中的bootstrap内容之后，参照其中的内容自己一下总结，以便帮助在这方面有疑惑的朋友，也有助于自己更好的消化所学的内容。我们应该庆幸自己活在这样一个互联网时代，开放、共享。很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架，共享出来让我们使用，使得我们轻松就能实现很漂亮的效果。下面就使用一个实例来讲一下如何使用Bootstrap现成的

2016-12-12 10:17:45 32250 1

原创 AngularJS—理解AngularMVC模式

MVC指的是 Model View Controller 模型-视图-控制器设计模式，下面通过一个简单例子来理解Angular MVC模式。代码如下：理解angular的MVC模式请输入姓名：输入的内容是：{{name}} {{msg}} angular.module("myapp",[]) .controller("My

2016-12-11 10:51:18 8301 1

原创 AngularJS—通过输入的值来改变样式

先看一下效果：本次例子实现的是让输入框底下的div，根据用户输入的值来改变颜色。先看html代码： angular通过输入的值来改变样式你想要的颜色是： {{mystyle}} 这个例子的要点是通过 class="{{mystyle}}" 将input的输入值赋给class属性，从而实现改变样式的效果。首先我们得先定

2016-12-10 23:30:34 3707

原创 AngularJS—实现根据数量、单价计算总价效果

先看一下效果：代码如下： angular计算总价单价: 数量: 总价:{{price*number|currency:'￥'}} 需要注意几点：1. 引入angularjs脚本；2. 声明ng-app；3. 数据来自拥有ng-model="price"/ng-model=

2016-12-10 23:00:35 5008 1

原创 AngularJS—实时获取输入的文本

先看一下效果：这次我们通过一个小实例来简单的学习一下Angular Js的使用。本次例子主要是获取我们输入的文本，并在输入框下边实时显示出来。实现起来非常简单。第一步：导入Angular Js脚本文件。导入脚本方式有两种，可以使用 Google CDN 服务器提供的文件，也可以使用自己本地的脚本文件，这里我们使用本地的。第二步：使用Angular

2016-12-10 16:31:43 6463 1

原创 Jquery-UI—制作选项卡（tabs）

使用Jquery-UI tabs方法制作简单选项卡

2016-12-10 12:52:59 2364 1

原创 Jquery-UI—制作可折叠面板（accordion）

先来看一下效果：使用jquery-ui制作如可折叠选项卡非常简单：第一步：引入 jquery 和 jquery-ui 文件。注 jquery-ui 要放在jquery引入之后。因为要引入自己的外部样式文件和脚本文件，以下是我的head部分代码。可折叠面板第二步：写面板布局。

2016-12-09 23:11:30 3018 1

生如夏花炫至茶靡