分类目录归档：HTML

2016
07-05

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

在 LEA VEROU 的博客翻到这么一篇文章——《Styling children based on their number, with CSS3》。原文谈到使用“:nth-child 伪类元素选择器”的方法在 2009 年被提出，LEA VEROU 又通过普通相邻选择器（General sib.... Read More >

2016
03-24

IE8下实现兼容rgba

昨天遇到一个问题，要实现一个背景透明的效果，用CSS3用rgba()就能实现，即 background: rgba(0,0,0,.5); 但是要兼容到IE8，就发现没有透明效果，因为IE8不支持rgba()函数。下面我们总结一下rgba()函数的含义。 rgba的含义，r代表red，g代.... Read More >

2015
03-05

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

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

2015
02-12

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

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

2015
01-29

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

【兼容html5方案】 百度贴吧，百度图片的实现 <!--[if lt IE 9]> <script> (function(){     var tags = ['header','footer','figure','figcaption','details','summary','hgroup','nav','aside','article'.... Read More >

2014
12-04

网页配色的天然范儿

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

2014
12-04

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

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

2014
12-04

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

项目背景 2014年4月16日，由中国领先的互联网综合服务商腾讯公司举办的“UP2014腾讯互动娱乐年度发布会”在北京国家会议中心举行，互娱官网的品牌站 http://ieg.tencent.com/ 也同一时间发布。TGideas 对这一次的官方网改版进行了包装，在本次改版中，页面重构上（小李刀.... Read More >

2014
12-04

儿童产品网站可用性研究

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

2014
12-04

原生App切图的那些事儿

如何切图？ 了解iphone界面的尺寸 最小的分辨率是320x480，我们把这个尺寸定为基准界面尺寸（baseline），基准尺寸所用的图标定为1倍图（1x）。 在实际设计过程中，为了降低设计成本，一般拿设备最高的分辨率作为设计稿的原始尺寸，拿iphone来说就是iphone5或5.... Read More >

2014
12-04

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

一、项目简介 1.1、项目背景： 这是一个在移动终端创新应用的项目，用户在浏览器端（微信/手Q）即可完成与金秀贤的合影，希望通过这样一种趣味体验，引发用户的分享与转发的热潮。 1.2、系统要求： ios6-ios7、android3.0-android4.3、android4.4+(非.... Read More >

2014
11-19

Block Formatting Context （块格式化上下文）

1    BFC是什么 Block Formatting Context （块格式化上下文）是 W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BF.... Read More >

2014
11-05

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

用 link 代替@import 避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。 避免使用Filters AlphaImageLoad也是IE5.5 – IE8中支持，这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。I.... Read More >

2014
11-05

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

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

2014
11-05

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

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

2014
11-05

CSS Sprites 工具

CSS Sprites 在显著降低 HTTP 请求方面功不可没，但 CSS sprite 可不是个简单的技术，Sprite generator 可以帮你做这些繁复的工作，将你的图片打包成 zip 上传上去，他们会把你的图片组合成 sprite，还帮你生成 CSS 代码。 官方网址：ht.... Read More >