您好,欢迎光临! 请 |

通过 CSS3 根据子元素数量为其定义不同样

通过 CSS3 根据子元素数量为其定义不同样式

在 LEA VEROU 的博客翻到这么一篇文章——《Styling children based on their number, with CSS3》。原文谈到使用“:nth-child 伪类元素选择器”的方法在 2009 年被提出,LEA VEROU 又通过普通相邻选择器(General sibling combinator[1])改良了一下。最终的代码很酷。 内容介绍 标题写的有些拗口,看看下面的例子应该可以明白。主要作用是无......

IE8下实现兼容rgba

IE8下实现兼容rgba

昨天遇到一个问题,要实现一个背景透明的效果,用CSS3用rgba()就能实现,即 background: rgba(0,0,0,.5); 但是要兼容到IE8,就发现没有透明效果,因为IE8不支持rgba()函数。下面我们总结一下rgba()函数的含义。 rgba的含义,r代表red,g代表green,b代表blue,a代表透明度。红绿蓝是三原色,所有颜色都可以由这三种颜色拼合而成。比如rgb......

[转]页面在360浏览器下的兼容性问题解决

[转]页面在360浏览器下的兼容性问题解决

问题的提出: Web页面在360的浏览器上,显示不正确。 但是在Firefox、chrome和IE8+以上的浏览器上,都是显示正常的。 问题的分析 1.  检查了一些Javascript框架,标准的jquery类库1.x系列,确认其工作正常,问题不是在于Javascript方面。 2.  排查掉HTML标签内容的显示 问题。 3.  怀疑是CSS在不同浏览器下的兼容性问题,见过排查,没有发......

iOS 4.2+webfont(TTF)的加粗字体重量

iOS 4.2+webfont(TTF)的加粗字体重量渲染错误

这一个是相当注明:指定TTF字体渲染font-weight:bold不正确的探险之旅,开放的现场演示与iPhone / iPad的与iOS 4.2/4.3 Beta 3版本或以上: (这是Reenie +豆豆从谷歌字体) 屏幕捕获 你看到粗体字体看起来双重渲染。这不是小字体大小显著,但对于大的字体大小/缩放在相当显著 我的朋友会报告这个错误给苹果。然而,任何事情他可以做些什......

[转]百度,淘宝,腾讯三大巨头HTML页面

[转]百度,淘宝,腾讯三大巨头HTML页面规范分解

【兼容html5方案】 百度贴吧,百度图片的实现 <!--[if lt IE 9]> <script> (function(){     var tags = ['header','footer','figure','figcaption','details','summary','hgroup','nav','aside','article','section','mark','abbr','meter','output','progress','time','video','audio','canvas','dialog'];     for(var ......

网页配色的天然范儿

网页配色的天然范儿

本文没有咬文嚼字的地方,只是一个技巧的分享,十分简单,简单到流泪。 网页视觉层面主要是由形式(或叫布局)、色彩、图片和文字信息组成,设计师通常对形式感关注的比较多,因为视觉冲击力、设计差异性或创新大多都仰赖形式呈现,而色彩主要影响整体观感、设计品质以及受众情绪,很多时候我们设计了一个不错的形式却未能做出这个稿子应......

谈谈游戏产品微网站可实现的类型

谈谈游戏产品微网站可实现的类型

==名词解释”微网站“== 通过微信内拉起和内置浏览器网页呈现的网站,笔者自顾自的在本文里把它们统称为“微网站”。 ==铺垫== 微信正不可阻挡的发展成新的国民级聊天工具。身为游戏人,当然也想在这个时代里,让自己的游戏产品在微信端里搞出点什么事来。 笔者发现,当前随着越来越多的企业和产品开始在微信中制作自己的微网站,有的已经非常......

[转]互娱新官网品牌站-背后的重构技术

[转]互娱新官网品牌站-背后的重构技术

项目背景 2014年4月16日,由中国领先的互联网综合服务商腾讯公司举办的“UP2014腾讯互动娱乐年度发布会”在北京国家会议中心举行,互娱官网的品牌站 http://ieg.tencent.com/ 也同一时间发布。TGideas 对这一次的官方网改版进行了包装,在本次改版中,页面重构上(小李刀刀 & 索尼克)运用了不少尝试,整合了不少团队先前积累的知识,今......

儿童产品网站可用性研究

儿童产品网站可用性研究

儿童产品在几年间异军突起,越来越受到人们的欢迎。艾瑞咨询于2012年2月进行的儿童网民用户调查的数据、CNNIC公布19岁以下网民规模及中 国统计局公布的各年龄段人口分布加以推算,艾瑞咨询得出目前中国6-14周岁的儿童网民数量达到7660.2万,较2010年6-14岁儿童网民规模 7379.2万增加了约280万。 儿童用户量在不断的增加,网民年龄分布及......

原生App切图的那些事儿

原生App切图的那些事儿

如何切图? 了解iphone界面的尺寸 最小的分辨率是320x480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x)。 在实际设计过程中,为了降低设计成本,一般拿设备最高的分辨率作为设计稿的原始尺寸,拿iphone来说就是iphone5或5s的640x1136啦,当然也可以用iphone4或4s的640x960,因为宽度都是640px,他们......

HTML5 拍照应用开发经历的那些坑儿

HTML5 拍照应用开发经历的那些坑儿

一、项目简介 1.1、项目背景: 这是一个在移动终端创新应用的项目,用户在浏览器端(微信/手Q)即可完成与金秀贤的合影,希望通过这样一种趣味体验,引发用户的分享与转发的热潮。 1.2、系统要求: ios6-ios7、android3.0-android4.3、android4.4+(非webview内) 1.3、体验地址: 二、初步技术方案确定 在项目前期首先启动了技术预演,确......

Block Formatting Context (块格式化上

Block Formatting Context (块格式化上下文)

1    BFC是什么 Block Formatting Context (块格式化上下文)是 W3C CSS 2.1 规范中的一个概念,在CSS3中被修改为flow root。格式化则表明了在这个环境中,元素处于此环境中应当被初始化,即元素在此环境中应当如何布局等。元素如果创建了BFC,那么BFC决定了如何对 其内容进行定位,以及它与其他元素的关系和相互作用。创建了BFC的元素会......

[转] 网页浏览毫秒必争,超强前端网页性能总

[转] 网页浏览毫秒必争,超强前端网页性能总结三

用 link 代替@import 避免使用@import的原因很简单,因为它相当于将css放在网页内容底部。 避免使用Filters AlphaImageLoad也是IE5.5 – IE8中支持,这种滤镜的使用会导致图片在下载的时候阻塞网页绘制,另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。 Javascript 将脚本置底 HTTP/1.1 specification建议浏览器对同一个hos......

[转] 网页浏览毫秒必争,超强前端网页性能总

[转] 网页浏览毫秒必争,超强前端网页性能总结二

避免404 404我们都不陌生,代表服务器没有找到资源,我们要特别要注意404的情况不要在我们提供的网页资源上,客户端发送一个请求但是服务器却返回一个无用的结果,时间浪费掉了。 更糟糕的是我们网页中需要加载一个外部脚本,结果返回一个404,不仅阻塞了其他脚本下载,下载回来的内容(404)客户端还会将其当成Javascript去解析。 服务器 ......

[转]网页浏览毫秒必争,超强前端网页性能总

[转]网页浏览毫秒必争,超强前端网页性能总结一

你愿意为打开一个网页等待多长时间?我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人开始建立自己的网站,博客,你的网页响应速度如何呢?在这篇文章中我们来介绍一下提高网页性能的最佳实践,以及相应的问题解决方案。 最佳实践 最佳实践我们引用的来自yahoo前端性能团队总结的35条黄金定律。原文猛......

CSS Sprites 工具

CSS Sprites 工具

CSS Sprites 在显著降低 HTTP 请求方面功不可没,但 CSS sprite 可不是个简单的技术,Sprite generator 可以帮你做这些繁复的工作,将你的图片打包成 zip 上传上去,他们会把你的图片组合成 sprite,还帮你生成 CSS 代码。 官方网址:http://spritegen.website-performance.org/ 还有中文版的:http://cn.spritegen.website-performance.......