关于z-index的真正问题是,很少有人理解它到底是怎么用。其实它并不复杂,但是如果你从来没有花一定时间去看具体的z-index相关文档,那么你很可能会忽略一些重要的信息。问题:在 接下来的HTML里 有三个<div>元素,并且每个<div>里包含一个<span>元素。每 个<span>被分别给定一个背景颜色:红、绿、蓝。每个<span>被放置到文档的左上角附近,部分重叠着其他 的<span>元素,这样你就可以看到哪些是被堆叠在前面。第一个<span>有一个z-index的值为1,而其他两个没有任 何z-index值。以下就是这个HTML和它的基本CSS。HTML代码<div> <span>R

CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.顺序规则如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点.<div id="a">A</div><div id="b">B</div>定位规则如果将 position 设为 static, 位于文

在HTML5中,使用DataTransfer对象中提供的方法,可以实现浏览器与其他应用程序之间文件的拖动。虽然HTML4之前的版本也支持拖放数据的操作,但仅局限于浏览器中,不支持浏览器之外的数据。来个拖放上传图片的例子。 Html部分:<div class="content"> <form> <div class="drag" ondrop = "dropFile(event)" ondragenter = "return false" ondragover = "return false"> <span class="spn-img" id="spn-

HACK原理:不同浏览器对各中字符的识别不同(读完文章你会发现,FF和IE8对以下字符的识别能力完全相同)在CSS中常用特殊字符识别表: (1) *:IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;(2) !important: 除IE6不能识别!important外,FF+IE8+IE7都能识别!important (3) _: 除IE6支持_外,FF+IE8+IE7都不支持_;(4) \9:所有IE浏览器都识别(IE6、IE7、IE8、IE9) 示例: (1)区别FF(IE8)与IE6 IE7backgorund:orange; -

html5的canvas不仅可以画直线,也可以画曲线哦。画直线的方法是:var canvas = document.getElementById('myCanvas2');var context = canvas.getContext('2d');context.beginPath();//直线开始context.moveTo(100, 150);//直线的起点context.lineTo(450, 50);//直线的终点context.lineWidth = 15;//直线的宽度context.strokeStyle='rgb(255,0,0)';//直线的颜色context.lineCap

一 基本语法在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性:p:before {}不过,在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后,建议按照标准双写。过于老的浏览器可能会存在支持问题,不过伪元素大多是配合 CSS3 使用,就无所谓向下兼容了:img::after {}这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会

HTML5画布(CANVAS)速查简表HTML5画布(CANVAS)元素>HTML5画布(Canvas)元素<canvas id="myCanvas" width="500" height="300">浏览器不支持画布(canvas)时的备案<canvas id="myCanvas" width="500" height="300"> your browser doesn't support canvas!</canvas>2d contextvar context = canvas.getContext('2d');Webgl context (3d)var context = canva

font-family命令CSS的font-family命令,指定了网页元素所使用的字体。下面是一个例子。font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;它的规则有三条;(1)优先使用排在前面的字体。(2)如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。(3)如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。根据这些规则,font-family