白树 - 博客园

2013年4月8日

摘要：转载文章，原文地址：http://ipmtea.net/css/201006/16_5.html对于每个程序设计者来说，为用户提供一个风格统一的界面是一项不变的要求。但是在网页上实现这种风格统一却显得格外困难，因为不同操作系统、不同浏览器对网页内容的表现方式存在着差对于每个程序设计者来说，为用户提供一个风格统一的界面是一项不变的要求。但是在网页上实现这种风格统一却显得格外困难，因为不同操作系统、不同浏览器对网页内容的表现方式存在着差异，而且这种差异几乎毫无规律性。在处理表单元素过程中这个问题显得格外突出，其中，让很多人束手无策的就是“Submit”按钮表现标准统一化的问题。比如说，... 阅读全文

posted @ 2013-04-08 17:43 白树阅读(63179) 评论(1) 推荐(5) 编辑

免费开发者兼容性测试工具Modern.IE

摘要：微软推出免费开发者兼容性测试工具Modern.IE：输入URL即可获得网站IE兼容性报告，并提供相应问题解决方案。地址：http://www.modern.ie/zh-cn/modern.IE 是一个开发人员中心，提供免费的工具和资源，旨在使您能够花更少的时间来测试各种版本的 Internet Explorer，并留出更多时间在现代 Web 上构建重要的内容。仍有大量用户使用旧版 Internet Explorer 进行浏览，虽然现代 Web 标准和带平台预览的自动更新可能步向正确的方向，但是我们知道设备和浏览器版本的范围仍然对您的测试矩阵构成挑战。modern.IE 在支持旧版 IE 的同时阅读全文

posted @ 2013-04-08 17:14 白树阅读(782) 评论(0) 推荐(0) 编辑

2013年4月3日

在网页中嵌入Base64编码文件

摘要：大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/　KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/　LCKuVgz5BDCSb13ZO99ZOdcZGvt4m 阅读全文

posted @ 2013-04-03 18:09 白树阅读(2212) 评论(2) 推荐(0) 编辑

2013年4月1日

【原】提高网站加载速度的3项黄金守则

摘要：如何优化网页加载速度是每个前端开发工程师需要了解的，也是前端开发工程师需要具备的基本条件。优化网站加载速度的原理主要是减少网站文件的大小，减少HTTP请求数。网站文件越小，浏览器加载页面会比较轻松，打开页面的速度也会提升；一个HTTP请求，对页面打开速度造成的延时大概是0.01秒，HTTP的请求数越多，网站打开的速度就会越慢。那么如何减少网站文件的大小，减少HTTP请求数呢？笔者做前端(重构方向)有2年多了，这里分享3项优化网站加载速度的方法，希望能给有需要的同学以及刚接触前端的初学者带来帮助~comm on！一起来优化你的网站~1、优化图片使用Css Sprites（适用于大流量的网站）其原阅读全文

posted @ 2013-04-01 18:24 白树阅读(8044) 评论(15) 推荐(14) 编辑

2013年3月28日

22个HTML5的初级技巧

摘要：这篇文章原文地址不知道在哪里！不管怎么样，对我的学习还是有帮忙，先收藏了。Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。因此，为了应对即将到来的HTML5，本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。1. 新的Doctype声明XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器阅读全文

posted @ 2013-03-28 16:12 白树阅读(1672) 评论(1) 推荐(2) 编辑

【原】HTML 5应用程序缓存使用总结

摘要：近期接触了HTML5本地缓存，在HTML页面的html标签加入后缀为.appcache的文件，即可以轻松地创建 web 应用的离线版本。使用本地缓存带来的好处：离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。浏览器支持：所有主流浏览器均支持应用程序缓存，除了 IEHTML5 Cache Manifest 实例下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：HTML页面demo.appcache文件Cache Manifest 基础如需启用应用程序缓存，请在文档的 < 阅读全文

posted @ 2013-03-28 15:36 白树阅读(2762) 评论(3) 推荐(1) 编辑

2013年3月21日

【原】[webkit移动开发笔记]之兼容iPhone4和iPhone5的方法

摘要： 2012年8月份刚开始接触前端移动开发，现在主要是android和ios系统的手机，一套代码需要同时兼容android和ios，就android而言已经有N个型号的手机，如果css代码在这些手机上解析有稍微差别或者出现bug，那么，做兼容是必不可少，事实上随着手机版本的不断更新，产生一些不同的体验，这也可以理解为制造了bug~半年多了，遇到了不少问题，解决问题的过程即辛苦又很开心，辛苦是因为刚接触，很多知识都不懂，需要花费很多的时间去摸索遇到的困难，开心呢当然是接触到新鲜的手机开发，感到比较兴奋，学习了不少知识。好了，不多说，开始本次的主题，今天主要对iphone手机的兼容方法做总结。摘要：[ 阅读全文

posted @ 2013-03-21 10:43 白树阅读(6099) 评论(2) 推荐(2) 编辑

2013年3月13日

CSS box-flex属性，然后弹性盒子模型简介

摘要：张鑫旭博客的一篇css3盒模型文章，对我而言，实用价值挺大的，多次重复打开该文章学习，这一次决定转载到我的博客！一、淡淡的开头语昨天趁着不想工作的时间间隙闲逛24ways，在My CSS Wish List一文中，见到了个新鲜的CSS属性，就是题目中的box-flex，以前没有见过，顿生疑惑，不知是骡子还是马，于是习惯性谷歌之，真是不谷不知道，一谷吓一跳。倒不是该属性本身，而是此属性作为导火索，让我了解了下CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)。对于我这样的流体布局控而言，这种盒子模型的出现就好比打麻将杠上开花杠到绝张边七条，让人兴奋不已。在国外，弹性盒阅读全文

posted @ 2013-03-13 22:20 白树阅读(1464) 评论(0) 推荐(1) 编辑

2013年3月9日

CSS3Ps -Photoshop图层特效转CSS3代码

摘要：推荐给大家一款免费PS扩展插件CSS3Ps，灰常好用，可以将Photoshop图层特效等效果直接转为CSS3代码，无需为了再浏览网页查询css3代码的写法，无需手动查看ps图层特殊的数据来编写css3代码，大大提升编写代码的效率，走过路过的同学不过错过哈！Come on，直接进去正题吧！！！下图为Photoshop CS5图层的混合选项菜单。有了CSS3Ps，上面的特效可以直接导出CSS3代码~以webkit浏览器为主的css3代码示例：圆角边框：-webkit-border-radius: 5px;模块阴影：-webkit-box-shadow: 1px 1px 1px rgba(0,0,0 阅读全文

posted @ 2013-03-09 14:30 白树阅读(9129) 评论(6) 推荐(1) 编辑

2013年3月8日

【原】[webkit移动开发笔记]之空链接是使用javascript:void(0)还是使用#none

摘要：基于webkit内核的移动开发笔记，之前已经写过4篇，主要是关于移动开发重构的分享，今晚有空了再写一篇。回忆去年年底最后的一个项目，还有一个很怪异的bug，让项目团队的成员感到十分头疼。测试组的同事做完最后的测试回归后，项目发布上线，并通过微信推送链接。在ios系统中(android显示正常)，微信内页打开链接后，点击页面的一个按钮，页面被重新加载了，这时才可以对页面进行其它操作。再次不断测试后，我们这边的同事肯定是微信软件内部配置引起的，可是微信的同事也无法定位具体的问题......纠结了很久....后来啊，想到各种蛋碎，才知道是a标签的引起的<a href="#none&q 阅读全文

posted @ 2013-03-08 00:03 白树阅读(4023) 评论(5) 推荐(0) 编辑

2013年2月28日

【原】[webkit移动开发笔记]之如何去除android上a标签产生的边框

摘要：去年年底，做完最后一个项目就可以开开心心回家，可是在测试阶段，发现了不少bug，为了不影响回家时间，加班加点也要解决这些问题，这里算是工作回忆，也算是工作的一点小总结。在ios4+和android2+系统，当手指触摸屏幕a标签链接或按钮时，会产生不同的效果，对于ios点击元素的时候，就会出现一个半透明的灰色背景；对于android则出现红色的边框。对这2个系统自带的效果，这种体验的意义无非为了告知用户按钮已经点击到，带来的价值是好的。可惜带来了体验的同时，也带来了bug......主要是在android手机的一个bug使用css给模块设置了opacity:0，控制该模块隐藏，如果该模块包含a标阅读全文

posted @ 2013-02-28 12:29 白树阅读(14835) 评论(10) 推荐(10) 编辑

2013年2月27日

【转】PNG的秘密—— 一淘前端分享会

摘要： PNG是我们经常使用的图片格式，但是你真的了解PNG吗？此次一淘前端分享会，一丝冰凉将带大家深入了解你不知道的PNG。首先有三个问题：什么是 PNG?PNG 有哪些特点?如何优化 PNG? Png的秘密 from jieorlin Png的秘密— 内容简介1. PNG 的秘密—— 你真的了解 PNG吗？ By一淘 UX 一丝冰凉旺旺:yisibl2. 首先我们来看三个问题：◆什么是 PNG?◆PNG 有哪些特点?◆如何优化 PNG?3. 一、什么是 PNG?◆全称是：便携式网络图形（Portable Network Graphics）是一种：无损位图图像文件格式◆PNG... 阅读全文

posted @ 2013-02-27 17:43 白树阅读(2099) 评论(1) 推荐(0) 编辑

2013年2月19日

【转】CSS 与 HTML5 响应式图片

摘要：关于响应式的，近来国内外也不断提到，还是目前比较流行的技术话题，这篇文章来至淘宝UED的，讲得是响应式图片，写得很不错。随着Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的Retina屏幕显示依然清晰，曾经一度困扰着网页开发者，好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？什么是响应式图片？响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。CSS3 响应式图片对于很多 IOS 开发者来说可能已经不太陌生了，为了适配 Re 阅读全文

posted @ 2013-02-19 20:51 白树阅读(3733) 评论(0) 推荐(0) 编辑

2013年2月17日

【原】[webkit移动开发笔记]之CSS3径向渐变

摘要：谈到渐变，大家并不陌生，设计稿中经常会遇到，其中最常见的也最平凡使用的是线性渐变和径向渐变，在pc端开发，很多大型网站都需要考虑所有浏览器的兼容，通常如渐变的按钮或者背景图一般会被重构师们切成图片，而在移动开发中如果使用图片是很占流量，能不用图片尽量不使用，那么，CSS3来实现无图的渐变效果是首选的。本文以移动开发中遇到的一个径向渐变例子，讲解CSS3径向渐变在项目中的应用和以及需要注意的地方。一、径向渐变的基础知识径向渐变的概念：从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）。二、径向渐变的基本语法background-image:-webkit-gradient(type,x1 y1 阅读全文

posted @ 2013-02-17 21:26 白树阅读(8774) 评论(18) 推荐(5) 编辑

2013年2月5日

【原】[webkit移动开发笔记]之无法自动播放的audio元素

摘要： HTML5新增了video元素和audio元素，替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法。这次的一个项目，产品经理要求手机加载开始时播放音乐，想到播放音乐，又是在ios和android平台，那audio元素必然是首选。一、audio的基本知识audio:标签定义声音，比如音乐或其他音频流。二、audio的属性三、audio的写法写法一：你的浏览器还不支持哦写法二：优先播放音乐baishu.ogg，不支持在播放baishu.mp3四、audio实战在项目中使用audio，一开始在chrome浏览器下做测试，使用了autoplay和loop属性，在页面打开阅读全文

posted @ 2013-02-05 17:03 白树阅读(21412) 评论(24) 推荐(2) 编辑

2013年1月30日

【原】[webkit移动开发笔记]之使用chrome进行手机开发

摘要： Chrome浏览器，相信大家并不陌生，该浏览器是基于其他开放原始码软件所撰写，包括WebKit和Mozilla，以其简单、快速、安全、稳定、扩展丰富等特性受到了不少人的喜爱，2012年8月6日，Chrome已达全球份额的34%，成使用最广浏览器。Chrome浏览器提供了非常简单方便的开发人员工具，方便我们在PC端做手机开发，那么如何是如何在PC上做简单的手机页面开发呢？首先下载chrome最新版本版本 24.0.1312.56（有些旧版的缺少一些功能，建议更新到最新版本），然后在Chrome浏览器中打开某个页面，选定网页元素(如通栏、文字、图片等)，按鼠标右键，从右键菜单中选择“审查元素”，就阅读全文

posted @ 2013-01-30 18:12 白树阅读(4711) 评论(6) 推荐(1) 编辑

Linr PS toolkit（Photoshop开发人员辅助工具）

摘要：来自(vickey)的肖软件~github地址：https://github.com/Linrstudio/LinrPSToolkitLinr PS toolkit（Photoshop开发人员辅助工具）一键导图:快速输出选区为Web所用格式;若当前图层被锁定则只输出当前图层的当前选区; 快速获取信息... 阅读全文

posted @ 2013-01-30 11:28 白树阅读(3029) 评论(4) 推荐(2) 编辑

2013年1月23日

404 您访问的页面找不回来但我们可以一起寻找失踪的宝贝

摘要：公益404 页面已经有一段时间，可能有些朋友还不清楚，这里简单介绍下。公益404页面是由腾讯公司员工志愿者自主发起的互联网公益活动。网站只需要在自己的404页面中嵌入一段简单的代码，就能通过互联网来迅速传播失踪儿童信息，从而提高找回失踪儿童的概率。失踪儿童信息来自宝贝回家寻子网。目前QQ 空间、QQ首页等已经上线了公益404 页面如在QQ空间当用户点错链接或请求的链接不存在的时候会自动转到http://qzone.qq.com/404如在QQ首页当用户点错链接或请求的链接不存在的时候会自动转到http://www.qq.com/babygohome/?pgv_ref=404404页面的体现了它阅读全文

posted @ 2013-01-23 13:48 白树阅读(7349) 评论(2) 推荐(0) 编辑

2012年12月13日

【转】IE10 CSS hack

摘要：整理自：http://www.impressivewebs.com/ie10-css-hacks/中文原文：IE10 CSS hack请尊重版权，转载请注明来源，多谢~~传说Windows 8刚上市没几天就卖出了4000多万份，好厉害。然后我们就发现项目中很多页面在IE10中表现不正常了。有的是之前对各版本ie的hack引发的，有些不确定是否是ie10引出的bug，所以惯性思维让我们重新寻找针对IE10的CSS Hack。。。首先，ie10不支持条件注释了。方法一：特性检测：@cc_on我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10 阅读全文

posted @ 2012-12-13 11:00 白树阅读(1371) 评论(0) 推荐(0) 编辑

2012年11月29日

【原】设计稿中字体pt与px之间的转化

摘要：通常，设计网页时，字体一般会使用像素（px）或者倍数（em）。某一天开始重构页面，用PS打开设计师给过来的稿子，开始切图，在查看文字时，发现字体大小是用pt来设置的，⊙﹏⊙b汗，如下图：为了解pt和px是如何转换的，百度后整理出来的资料如下：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；pt就是point，是印刷行业常用单位，等于1/72英寸。这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。pt全阅读全文

posted @ 2012-11-29 22:26 白树阅读(9067) 评论(4) 推荐(3) 编辑

公告

朋友同事同行

团队博客

推荐资源