CSS z-index 属性的使用方法和层级树的概念
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.
为什么要在网站上通过 IP 区分来自不同国家用户? 这是为了让不同的国度和习惯的访客看到不一样的信息, 避免误导用户产生多余的交互行为或者因为页面的不合理而感到不爽.
上图是最近我在顶部放置的广告 banner. 上方红色的是某网站圣诞节促销活动的 Affiliate 广告, 中国大陆之外地区的访客可以看到; 下方蓝色的是最新发布的与我同行 Apply App 应用广告, 只有中国大陆地区的访客可以看到.
因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解.
上节已经介绍了如何取得画布及其上下文对象, 我们将开始使用 HTML5 Canvas 的绘图 API 来进行图形绘制, 本文会提及线条, 矩形, 圆形和文本这几个基本图形. 本节主要介绍相关的图形绘制方法, 不会有难以理解的内容, 在需要注意的地方会着墨较多.
最近在看一本关于 HTML5 Canvas 的书, 叫《Foundation HTML5 Canvas: For Games and Entertainment》, 书名比较长, 作者说得也比较累赘, 但是章节和内容都很清晰. 后面我会写一系列文章, 关于 HTML5 画布, 与此书章节同步, 可能插放一些别的内容.
第三章涵盖了基本事件的使用, 但是有一个话题没有被覆盖到 (出现在后面的章节中), 那就是使用 dispatchEvent() 方法发送一个特殊的, 设置自定义的事件. 这个方法被包含在 EventDispatcher 类之中.
ActionScript 提供 getter 和 setter 以存取类的属性. 在 OOP 编程的角度, 是出于类的封装性考虑, 类的继承 (protected) 和私有化 (private) 的属性不能直接暴露在外, 外部只能通过存取方法访问和修改.
Notepad++ 有 ActionScript 的语法高亮功能, 但它似乎不能被程序探查到. 打开的每个 AS 文件, 都要自行套用语法高亮, 特别麻烦. 当你打开一批文件, 那就需要逐个文件进行设定语言为 Flash actionscript.
虽然我一直不喜欢 Flash, 但作为前端, 我还是忍不住要玩一下传说中的 AS3. 今天在师弟和网友的帮助下, 终于将开发环境搭建了起来, 写出那让人怀念的 Hello World.
记录一下搭建步骤, 没啥技术含量, 纯学习笔记.
960px 网格系统 (960.gs), 也称 960 栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局. 当显示屏和分辨率变得更大, 我发现 960 网格系统已经不能完全满足我的需求. 20px 的槽让内容区域实际只有 940px, 对现代的 Web 设计来说太窄小了. 在设计 Themify 主题的时候, 我发现一种新的网格布局, 相当适合用来设计当今的 Web 布局.
博客流行在侧边栏放置 4 到 6 个 125x125 的广告, 但一般的摆放顺序存在问题. 如果广告位置被固定, 各个位置的天然关注度肯定是不一样的.
投放广告的人都很关注他的广告会放在哪个位置, 因为这可能影响点击次数, 甚至是否在第一屏显示. 就这个问题, 其实很容易解决, 只要随机显示广告即可.
代码如何实现? 在这我推荐两种随机显示广告的处理办法.
我很喜欢在 google.cn/music 上找 mp3, 因为谷歌音乐在版权方面, 用户体验和搜索功能都做得很好. 但是它的搜索栏提示功能一直存在一个小问题, bug 存在半年以上了吧...
在加载页面的时候, 将光标快速定位到搜索栏上, 待页面加载完成, 搜索栏进行初始化后会显示搜索提示. 此时输入的任何内容将成为搜索提示的一部分而不是搜索关键字. 截图如下:
JavaScript 是弱类型语言, 为了保证数值的有效性, 在处理数值的时候, 我们可以对数值字符串进行强行转换. 如 parseInt 取整和 parseFloat 取浮点数.
Java 也有 Integer.parseInt() 方法, 但是 JavaScript 的 parseInt 处理方式与 Java 等强整型语言不太一样, 所以经常有人因为对这个方法的使用不当而获得异常返回.
JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象.
用过 Java 和 .NET 的同学对包或命名空间的概念应该不会陌生, 正因为有这个概念, 使代码的简洁易读得到了保证. 不知 JavaScript 设计之初是如何定位 with 语句的, 个人觉得它们之间有一定的相似度. 如:
对JavaScript 放大镜来说, 计算倍率必不可少.
一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗. 镜片在缩略图上的覆盖位置, 其实就是视窗对原图的部分展示, 所以它们之间有如下关系.
倍率 = 原图/缩略图 = 视窗/镜片
倍率一般大于等于 1, 因为原图一般都不会小于缩略图. 一旦倍率小于 1, 则将倍率设为 1.
因为缩略图和原图的尺寸是不可变的, 所以我们通过它们来获得倍率.