Coding Serf - Web

兼容性不完全笔记

1.清除浮动[2013-04-09] 方法一:下一个兄弟元素{clear:both;}. 缺点是要多加个空元素。 方法二:设置父元素是{display:block; zoom:1; overflow:hidden;}.不需要冗余元素。 实践:父元素包含浮动子元素且未设置高度时,父元素高度将变成0。此时可通过设置父元素float:left;才会有自动高度,但在ie6中当用DD_belatedPNG修复父元素中的png图片时,会导致失效,即图片不显示,...

CSS3随意画之Transform3D变换

昨天Boss拿着手机过来:“David,看这效果,咱能做不?!” 我一看3D的??心想CSS3D还没普及,直接就说“做不了……” “为什么?!?!?!” “3D现在还没标准化,不兼容呀?!这个是APP吧?!” “这是个网页……” “……那一定是用了插件吧……” 出糗了!!!狂汗呀!!!虽然CSS的3D尚未普及,但是webkit内核的浏览器支持得不错,加之手机端大多浏览器内核是webkit的。 啥也不说了,开始...

关于单页模式网站的历史记录

之前,在做FlipScript官网的时候,将网页前端架构定位在单页模式,故页面之间的切换是由Ajax加载而来的。当时并未考虑iframe,也没什么理由。如果你有更好的思路,欢迎共享。 单页模式——顾名思义,网站在单个页面里完成浏览,不会轻易发生跳转。如果单纯地用Ajax来做的话,浏览器的url是不会发生改变的,这样浏览器也就无从记录网站的浏览历史。所以为了让...

CSS3随意画之repeating-radial-gradient

今天看到重复径向渐变背景(repeating-radial-gradient)的例子,感觉像是棒棒糖,就拿来画画,又加了些动画。顺便看看浏览器兼容性。但愿你是用高级浏览器打开本页面的。 最终效果如下:     CSS代码如下: #David_lollipop{ width: 200px; height: 200px; border-radius: 50%; box-shadow:-8px -8px 25px 10px rgba(0,0,0,.4) inset; /* 用重复的...

兼容各浏览器的CSS3进度条

之前,在做“圣诞捞”手机端的时候,想加一个类似进度条一样的能量槽,待能量充满后才能捞下一次。当时想的是用CSS来做,因为时间间隔是固定的,不是动态改变的。大体思路是嵌套两层div,外面的是能量槽,里面的是能量条,本想控制能量条的left属性(网上也有些是控制width的),但是在IE下(其实当时并不需要考虑兼容IE),只要用到position属性,内部的div(能量条)就会溢...

CSS3+jQuery网页下雪效果

之前,在2012年圣诞节的时候给FlipScript官网加了下雪的效果。现在把代码贴出来,代码效率还有待提高。但愿您是用高级浏览器打开本页(但愿不久的将来我不用再说这句话),您应该在打开本页面时就可以看到效果,为了明显一点我把雪花颜色变成蓝色。 /* chrismas begin */ span.snow{ position: fixed; top: -10px; left: 0; display:block; width: 1px; height: 1p...

用CSS3画个会转的太极图

今天看到一篇文章是关于CSS画图的,所以就练练手,顺便做个注释。但愿你是用高级浏览器打开本文的,在IE10 for Windows 7下渲染效果亦不佳。 最终效果: 下面就来记录一下代码: #shape{ width:100px; height:50px; background-color:white; border-color:black; border-style:solid; border-width:2px 2px 50px 2px; /*下边框就是黑色的那一半*/ border-rad...

Ajax轮询与浏览器缓存的问题

一、背景了解 什么是IE缓存 为了提高访问网页的速度,Internet Explorer浏览器会采用累积式加速的方法,将你曾经访问的网页内容(包括图片以及cookie文件等)存放在电脑里。这个存放空间,我们就称它为IE缓存。以后我们每次访问网站时,IE会首先搜索这个目录,如果其中已经有访问过的内容,那IE就不必从网上下载,而直接从缓存中调出来,从而提高了访问网站的速度。 ...

文章归档
友情链接
参与项目
  • 830.格林学堂
  • 840.精优教育
  • 850.拯救红包君
  • 860.不开心抢包包
  • 870.打大折
  • 880.金地广场(西安)
  • 890.Engine Group
  • 900.Starbucks Mooncake
  • 910.宝存科技
  • 920.诺优能
  • 930.Zuse
  • 940.新吉士
  • 950.KSNY x Darcel
  • 960.澳大利亚官方旅游网站
  • 970.圣诞捞
  • 980.FlipScript
  • 990.五维互动
Copyright © 2013-2014 Coding Serf | Powered By WordPress |Theme design By Coding Serf