08 2017 档案
摘要：顾名思义Chrome开发工具就是一个工具，它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面，也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具，你可以做很多有趣的事情： 调试界面的问题 使用断点调试JavaScript代码 优化你的代码 打开开发者工具，你只需要在页面
阅读全文
摘要：一，定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。 语法 indexOf() 方法 lastIndexOf() 方法 返回值 lastIndexOf
阅读全文
摘要：常用例子 1.居中对齐 效果： 2.自适应导航 效果： 3.常见3栏移动优先布局 设置子元素从左到右，超出换行（flex-flow:row wrap;）。 默认情况下所有子元素拓展比例为1（flex-grow:1），伸缩比例为100%（flex-basis:100%）。 大于800px时，.main
阅读全文
摘要：属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 定义一个flex容器，内联或者根据指定的值，来作用于下面的子类容器。· box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（css3） inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老
阅读全文
摘要：CSS3 多列布局——Columns 语法： 多列布局columns属性参数主要就两个属性参数：列宽和列数。 参数 参数说明 <column-width> 主要用来定义多列中每列的宽度 <column-count> 主要用来定义多列中的列数 实例代码： 效果： CSS3 column-count 属
阅读全文
摘要：animation-duration 代码实例： 效果： animation-name 代码实例： 效果： animation-timing-function 语法animation-timing-function: linear | ease | ease-in | ease：缓解效果，等同于cu
阅读全文
摘要：CSS Animations 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。 animation-delay animation-delay CSS属性定义动画于何时开始，即从动画应
阅读全文
摘要：CSS Transition 1.1 基本用法 在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。 上面是一个演示，当鼠标放置于缩略图之上，缩略图会迅速变大。注意，缩略图的变大是瞬间实现的。下面是代码，相当简单。 transiti
阅读全文
摘要：效果： CSS3变形--旋转 rotate() 演示结果 CSS3中的变形--缩放 scale() 演示结果 CSS3中的变形--矩阵 matrix() 演示结果： matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY())
阅读全文
摘要：“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示： 从上图中可以看出，用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中，默认显示样式为
阅读全文
摘要：实例 1.清除浮动 通常我们清除清除浮动的方式就是在浮动元素后面添加一个空的Div标签，然后在设置它的清除浮动要是，使用after伪元素，我们就不需要添加无意义的div标签在html中了，下面的例子就使用了伪元素清除浮动 效果： 没有清除浮动： 2.常见消息框 注意，此时伪类content:' ',
阅读全文
摘要：CSS3选择器 :read-only选择器 “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’” 示例演示 通过“:read-only”选择器来设置地址文本框的样式。 HTML代码： CSS代码： 结果演示 CSS3
阅读全文
摘要：:before和:after伪元素的用法 :before和:after伪元素的用法十分简单；下面的代码样例中， :before 和 :after 将会在 blockquote 元素之前和之后插入新内容，它使用content属性，也就是在内容上进行操作。 下面的代码中一个引号标记将出现在blockqu
阅读全文
摘要：css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择器来匹配选择没有被选中的单选按钮或复选框。 语法： 如： 设置被选中的单选按钮(radio)或复选框
阅读全文
摘要：css :enabled和:disabled伪类选择器 在Web表单中，有些表单元素（如输入框、密码框、复选框等）有“可用”和“不可用”这2种状态。默认情况下，这些表单元素都处在可用状态。 在CSS3中，我们可以使用:enabled选择器和:disabled选择器来分别设置表单元素的可用与不可用这两
阅读全文
摘要：CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型
阅读全文
摘要：CSS3 first-of-type选择器 “:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示： 通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不
阅读全文
摘要：CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。
阅读全文
摘要：CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例： 效果： 点击标签1 点击标签2 点击标签3
阅读全文
摘要：1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。 “:root”选择器等同于<html>元素，简单点说： :root{background:orange} html {background:orange;} 示例演
阅读全文
摘要：在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了
阅读全文
摘要：1.background-origin background-origin 里面有3个参数 ： border-box | padding-box | content-box; border-box,padding-box,content-box从边框，还是内边距（默认值），或者是内容区域开始显示。
阅读全文
摘要：1. 给文字添加阴影 text-shadow 语法： X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反
阅读全文
摘要：一、RGBA颜色 RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA说白了，就是在RGB的基础上加了一个透明度通道Alpha。 语法： rgba(R,G,B,A) 说明： R：红色值（Red）； G：绿色值（Green）； B：蓝色值（Blue）；
阅读全文
摘要：box-shadow是向盒子添加阴影。支持添加一个或者多个。 box-shadow: h-shadow v-shadow blur spread color inset; h-shadow：水平阴影的偏移值，必需，可以为负值。 v-shadow：纵向阴影的偏移值，必需，可以为负值。 blur：阴影模
阅读全文
摘要：border-radius是向元素添加圆角边框 使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 5px 5px 5px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 不要以为border-
阅读全文
摘要：className 规定元素的 class 属性。注意：该属性名不是 “class”，因为 “class” 是 JavaScript 中的保留字。类型：String。状态：可写 dir规定元素的 dir 属性，声明了文档文本的方向。类型：String。状态：可写。 id规定元素的 id 属性。在一个
阅读全文
摘要：窗口位置 screenLeft和screenTop screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX 和 screenY 属性中提供相同的窗口位置信息，Safari 和 Chrome 也同时支持这两个属性。Opera虽
阅读全文
摘要：Document 对象Document 对象代表整个HTML 文档，可用来访问页面中的所有元素。Document 对象是 Window 对象的一个部分，可通过 window.document 属性来访问。 Document 对象的常用方法 1、getElementById(id) 通过元素的ID访问
阅读全文
摘要：DOM DOM 是英文Document Object Model的缩写，即文档对象模型。它是一种跨平台的、独立于编程语言的API，它把HTML、XHTML或XML文档当作一个树结构，而每个节点视为一个对象，这些对象可以被编程语言操作，进而改变文档的结构，映射到文档的显示。 简单来说，DOM就是我们为
阅读全文
