zIndex - 混乱的三次元

南瓜小米粥 发表于 前端开发 分类,标签: zIndex

w3c关于z-index的解释如下:
   定义和用法:z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值。z-index 仅能在定位元素上奏效(例如 position:absolute/relative;)
   说明:该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
   可能的值:auto/number/inherit 

简单理解就是,z-index将二次元的web带入了三次元的空间。除了x、y轴之外,通过z-index我们还能操作z轴(在做3D变换时这非常重要)。 

影响元素堆叠顺序都有哪些因素呢:
   1.文档流:默认情况下位于文档流后面的元素会覆盖前面的元素。
   2.定位:position不为static的元素,z-index越大,堆叠优先级越高。 

阅读全文>>

用google分析统计锚点点击

南瓜小米粥 发表于 前端开发 分类,标签: Google Analytics 统计锚点
很多网站都用Google Analytics作为自己的分析工具,统一pv,加载速度等数据。除了这些基本的数据外,Google Analytics还有很多很好用的方法,比如统计如下tab的点击:

点击查看原图

阅读全文>>

七夕,让你的网站跟css3约会吧

南瓜小米粥 发表于 前端开发 分类,标签: css3解决方法 Conditional-CSS使用方法

对于单身宅男来说,节日什么的真的就是浮云,我们的生活里只有上班和周末。

css3、html5已经出生一段时间了,但至今仍然是两条光棍,远不及自己的学长xhtml、css2受欢迎。究其原因无非他们妈逼的紧,再加上这2条光棍要求也高。

这个七夕,Conditional-CSS做红娘,让css3跟你的网站来一次约会吧。

先介绍下Conditional-CSS:

Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

简单的说就是:Conditional-CSS允许你在css文件中使用类似脚本语言的if语句。是不是很爽呢~~更爽的是:当浏览器请求css时Conditional-CSS会过滤掉跟当前请求的浏览器不匹配的css内容,而不是把所有的css都输出给客户端。

阅读全文>>

chrome下12px字号限制的解决办法

南瓜小米粥 发表于 前端开发 分类,标签: chrome 12px
使用Webkit的私有属性 -webkit-text-size-adjust 来解决chrome下12px字号限制的问题:
.xxx {-webkit-text-size-adjust:none;font-size:*px; }

阅读全文>>

基于css3的图片轮播

南瓜小米粥 发表于 前端开发 分类,标签: 图片轮播 css3图片轮播

基于css3的图片切换效果,主要改进了2点:

    1. 切换的效果使用了css3。

    2. 用css实现了1、2、3的数字效果

效果图:

阅读全文>>

IE9的那些新功能

南瓜小米粥 发表于 前端开发 分类,标签: 豆瓣电台 jump list 新功能 IE9

IE9的固定网站(Site Pinning)为我们提供了一些好玩的功能。除了拖动站点图标到任务栏固定外,IE9还提供了window.external.msAddSiteMode()方法,可以把网站添加到开始菜单。

Site Pinning的部分方法如下:

  1.添加到开始菜单:window.external.msAddSiteMode;

  2.是否第一次使用Site Pinning:window.external.msIsSiteModeFirstRun;

Site Pinning提供的部分新功能:

1. 跳跃列表(Jump List)
   点击查看原图 

阅读全文>>

fiddler 自动从定向https文件

南瓜小米粥 发表于 前端开发 分类,标签: 重定向 fildder https 替换https文件

 

fiddler有一个很好用的功能AutoResponder,能帮我们重定向http请求中的任何资源到本地文件,https中的资源默认情况是无法重从定向的,需要修改fildder设置:

点击查看原图

阅读全文>>

淘江湖自动竞拍工具

南瓜小米粥 发表于 前端开发 分类,标签: 金币竞拍工具 淘江湖 淘江湖金币竞拍工具

用到的工具:

1. fiddler
   2. firefox或者IE

用fiddler替换页面上某个js文件成你自己的(替换统计用的js最好)。然后写个定时器循环检查页面上的倒计时,在最后2秒或者10秒的时候触发下面竞拍按钮的click事件参加竞拍,只要页面不关,竞拍没结束前就不用管了,爱干嘛干嘛去。

阅读全文>>

IE虚线框偏移的bug

南瓜小米粥 发表于 前端开发 分类,标签: 虚线框 虚线框偏移 ie

dom raedy和window load这个时间段内,用js向页面内添加a节点时候在IE下会发生虚线框偏移的问题。

假设有3个连接,link1、link2、link3 其中link2、link3 是写在html里的,link1是dom ready后添加到页面上的,ie下点击任意一个连接,跳转后直接后退回原来的页面,会发现虚线框偏移了。偏移的位置等于添加到页面上的a即诶但的个数。

阅读全文>>

优化jpg - 选择性的jpg压缩

南瓜小米粥 发表于 前端开发 分类,标签: fireworks 选择性jpg压缩

在fireworks中输出jpg时指定图片中某些区域的输出品质,这样可以在减小图像总大小的同时保留较重要区域的品质。

仙五 中的小蛮 为例,fireworks直接输出jpg时是这样的:

阅读全文>>