web前端
寒风问雪
专注于服务器领域前端领域
展开
-
webkit引擎的浏览器取消默认样式:-webkit-appearance:none
在写样式的时候,iphone会有一些默认样式,比如 背景竟然是比较灰,并不黑。使用-webkit-appearance:none可去除系统默认的样式关于-webkit的一些介绍:转载自:http://www.playgoogle.com/post/61.htmlWebKit是Mac OS X v10.3及以上版本所包含的软件框架(对v10.2.7及以上版本也可通过转载 2012-12-13 22:50:22 · 1056 阅读 · 0 评论 -
如何让你的网站提速:Web缓存加速指南(二)
如何让页面通过缓存达到最快相应? 缓存最好的副本是那些可以长时间保持新鲜的内容;基于校验虽然有助于加快相应,但是它不得不和源服务器联系一次去检查内容是否够新,如果缓存服务器上就知道内容是新的,内容就可以直接相应返回了。 我理解缓存是好的,但是我不得不统计多少人访问了我的网站! 如果你必须知道每次页面访问的,选择【一】个页面上的小元素,或者页面本身,通过转载 2013-01-01 21:44:17 · 923 阅读 · 0 评论 -
HTML CSS 控制浮动元素居中
基本的html结构:12345--> p1p2p3p4p5欲实现效果: 浮动元素居中的出现条件:*1.首先是内部元素需要设置宽高*2.元素需要同行显示*3.元素需要居中分析:如果想对一个元素设置宽高,那么元素类型就不能够是行内元素,只能够是块状元素)*如果内部开始为块状元素时,如p元转载 2013-01-11 10:46:54 · 1623 阅读 · 0 评论 -
雅虎面试题-你真的了解HTML吗?
有这么一段HTML,请挑毛病: 哥写的不是HTML,是寂寞。 我说:不要迷恋哥,哥只是一个传说复制代码这是原来雅虎一道笔试题(文字变了变),用了很多年了,还没有一个人完全答对过。============== 解答部分 ==============出这道题的动机是,太多人觉得HTML太简单,但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计转载 2013-02-03 00:55:10 · 555 阅读 · 0 评论 -
web前端研发工程师编程能力成长之路 [转]
by 徐德明 249 次浏览更多2【背景】如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧;如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧;如果你是四五年的前端开发高手,没有难题能难得住你的寂寞高手,来看这篇文章吧;WEB前端研发工程师,在国内是一个朝阳职业,自07-08年正式有这个职业以来,也不过三四年的时间。转载 2013-03-10 23:46:39 · 549 阅读 · 0 评论 -
再谈Yahoo关于性能优化的N条军规
本来这是个老生常谈的问题,上周自成又分享了一些性能优化的建议,我这里再做一个全面的Tips整理,谨作为查阅型的文档,不妥之处,还请指正;如果你已经对yahoo这些优化建议烂熟于心,果断点这里一、 Yahoo的军规条例:谨记:80%-90%的终端响应时间是花费在下载页面中的图片,样式表,脚本,flash等;详细的解释来这里查:http://developer.yahoo.co转载 2013-03-11 19:18:25 · 581 阅读 · 0 评论 -
浏览器是怎样工作的:渲染引擎,HTML解析
前两天看到一篇不错的英文文章,叫做 How browsers work,该文概要的介绍了浏览器从头到尾的工作机制,包括HTML等的解析,DOM树的生成,节点与CSS的渲染等等,对于想学习浏览器源码的同学来说,实在是很棒的一篇科普文章。尽管对于每部分,该文的描述并不足够深入,但综合来讲,即使没兴趣学浏览器源码,也还是有一些值的学习的思想在里面的,可以权当开拓下视野,有益无害。于是,我想分节挑转载 2013-03-12 21:58:44 · 1344 阅读 · 0 评论 -
前端开发利器—FIDDLER
1.Fiddler相对其他调试工具的优势HttpWatch 和 Firebug绝大多数前端开发人员都比较熟悉,但是HttpWatch虽然可以抓到每个 HTTP 请求的全部数据,但无法修改返回的数据;尽管Firebug可以修改 HTML和CSS,但是在调试CGI接口时无法干预HTTP请求的参数值和CGI返回的数据。而 Fiddler作一个 HTTP 调试代理,不但能够记录客户端同服务器之间的转载 2013-03-13 13:47:19 · 930 阅读 · 0 评论 -
前端开发大众手册(包括工具、网址、经验等)
一直觉得前端开发缺个手册,这是个体力活。不过总得有人来干。今天闲来无事,把一些工具(online和client的)、常用网址、以及经验总结等罗列出来和大家分享下。这个标题起地大了点,肯定会有很多地方没列到,包括类目的分法也可能考虑不周,所以还请大家积极补充指正,可以直接留言,也可以发邮件给我(sorrycc#gmail.com)。之所以加上“大众”两字,因为以下资源对于高手来说可能早就很熟转载 2013-03-13 16:55:04 · 617 阅读 · 0 评论 -
淘宝触屏版宝贝详情改造(一)
经历了将近2个月的时间,宝贝详情的改造终于完成,已经在前段时间上线了,接下来总结一下在项目过程中前端的一些实现。 提示:css3的属性目前浏览器都只要加私有前缀才能支持(如firefox:-moz,chrome & safari & android & ios:-webkit,opera:-o等) 元素宽度自适应 之前做pc端的时候写过一篇宽度自适应转载 2013-03-29 09:49:55 · 1641 阅读 · 0 评论 -
修复iPhone上submit按钮bug
自从完成上次iPhone的几个页面效果后,一直在没有制作iPhone的页面效果了,今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子:初载入页面后,表单中的input[type="submit"]和i转载 2012-12-13 21:26:23 · 751 阅读 · 0 评论 -
近期面试感受
Posted by Kejun on 2011/10/26. 119 comments.这两天大概面了5、6位应届的同学,最后往往忍不住聊的多了些,有点开复老师的感觉了。归纳下来有几个突出的问题。1. 在公司实习学不到技术,学到的只是做事的方式这些做事的方式(或者说技巧)有些是必要的,比如沟通方面。但更多是没有价值的,比如大公司繁琐的流程,各种毫无道理的开发规范,拖转载 2013-04-02 22:17:02 · 702 阅读 · 0 评论 -
CSS hack 汇总
10/12. 20111, IE条件注释法,微软官方推荐的hack方式。只在IE下生效这段文字只在IE浏览器上显示只在IE6下生效这段文字只在IE6浏览器上显示只在IE6以上版本生效这段文字只在IE6以上版本IE浏览器上显示只在IE7上不生效这段文字在非IE7浏览器上显示非IE浏览器生效这段文字只在非IE浏览器上显示2, 选转载 2013-04-04 13:33:17 · 535 阅读 · 0 评论 -
浏览器的渲染原理简介
看到这个标题大家一定会想到这篇神文《How Browsers Work》,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文。为什么我还想写一篇呢?因为两个原因,1)这篇文章太长了,阅读成本太大,不能一口气读完。2)花了大力气读了这篇文章后可以了解很多,但似乎对工作没什么帮助。所以,我准备写下这篇文章来解决上述两个问题。希望你能在上班途中,或是坐马桶时就能读完,并能从转载 2013-05-25 10:18:37 · 574 阅读 · 0 评论 -
如何让你的网站提速:Web缓存加速指南(一)
这是一篇知识性的文档,主要目的是为了让Web缓存相关概念更容易被开发者理解并应用于实际的应用环境中。为了简要起见,某些实现方面的细节被简化或省略了。如果你更关心细节实现则完全不必耐心看完本文,后面参考文档和更多深入阅读部分可能是你更需要的内容。 什么是Web缓存,为什么要使用它? 缓存的类型: 浏览器缓存; 代理服务器缓存;转载 2013-01-01 21:39:30 · 1570 阅读 · 0 评论 -
Console命令详解,让调试js代码变得更简单
Firebug是网页开发的利器,能够极大地提升工作效率。但是,它不太容易上手。我曾经翻译过一篇《Firebug入门指南》,介绍了一些基本用法。今天,继续介绍它的高级用法。===================================Firebug控制台详解作者:阮一峰出处:http://www.ruanyifeng.com/blog/2011/03/转载 2012-12-28 23:49:47 · 529 阅读 · 0 评论 -
CSS3 Media Query实现响应式Web设计(针对不同移动设备宽度)
如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下英文原文:responsive design with css3 media queries 如今的屏幕分辨率,小至320px(iPhone),大到2560转载 2012-12-13 23:08:14 · 1815 阅读 · 0 评论 -
移动平台前端开发总结(针对iphone,Android等手机)
移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp,并非是针对普通手机开发Wap 2.0,所以在阅读本篇文章以前,你需要对webkit内核的浏览器有一定的了解,需要对HTML5和CSS3有一定的了解。1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 (1)转载 2012-12-13 23:19:05 · 955 阅读 · 0 评论 -
视网膜New iPad与普通分辨率iPad页面的兼容处理
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2732一、这是篇经验分享就算不是果粉也应该知道,iPad2与new iPad的重大区别之一就是显示屏的分辨率。new iPad显示屏被称之为“视网膜显示屏”,其设备分辨比(之前有详细介绍,点击这里查看)是i转载 2012-12-13 23:47:55 · 640 阅读 · 0 评论 -
如何灵活利用免费开源图标字体-IcoMoon篇
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2416一、温故知新之前有专门介绍过如何使用类似fontforge软件制作自定义字符字体以及如何在web中实际应用。不过,文中提到的是利用系统自带的一些特殊字体,如WINGDNG3.ttf字体。转载 2012-12-13 23:53:41 · 771 阅读 · 0 评论 -
-webkit-appearance实现iPad端日历框样式的改变
2012年11月1日随着iPad的盛行,很多人开始在iPad上看网页,对于携程这样一个旅行网来说,日历控件的使用是必不可少的,然后目前使用自定义的日历控件在iPad上会影响用户的操作(使用input文本框来模拟实现,会弹出键盘导致日历弹出层被覆盖等情况)。解决的方法肯定会有,而且方法应该也挺多的,但对于JS能力不强的我而言,想到的是利用HTML5中的input日历属性值。最初在转载 2012-12-13 23:34:26 · 656 阅读 · 0 评论 -
W3C验证失败的10个常见原因
W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错。验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能。下面十个细微的失效问题难住了大批程序员,我们告诉你如何解决。在本文开始前介绍一些使用W3C验证程序时需要注意的问题。不要担心验证程序的警告——如果验证程序说发现12处错误以及83处警告,不要理它,继续进行下一步。转载 2012-12-15 00:56:27 · 877 阅读 · 0 评论 -
你真的了解HTML吗
有这么一段HTML,请挑毛病: 哥写的不是HTML,是寂寞。 我说:不要迷恋哥,哥只是一个传说这是原来雅虎一道笔试题(文字变了变),用了很多年了,还没有一个人完全答对过。============== 解答部分 ================出这道题的动机是,太多人觉得HTML太简单,但它恰恰又是前端开发中最基础最重要的部分。HT转载 2012-12-15 01:25:02 · 408 阅读 · 0 评论 -
W3C网页标准验证服务地址
学习网页标准也有一段时间了,不知道自己的水平到底怎么样,下面可以通过W3C提供的网页标准验证来检验一下你的水平啦!css验证地址:http://jigsaw.w3.org/css-validator/#validate-by-uri这个css验证还是中的呢!如果通不过验证,会指出哪些地方出了问题。XHTML验证:http://validator.w3.org/和cs转载 2012-12-15 01:26:26 · 681 阅读 · 0 评论 -
有关WEB前端中的语义化
作天在变卖大学书籍时也不晓得怎么的就想起语义化这个概念,于是乎也就花点时间搞搞它。语义化标记对于刚学web前端脚本语言的童鞋来说往往都没太 在意,哇哈哈,其实我也就算只比较老的菜鸟而已,本文不是说教,只是分享有关语义化的一些东西。那什么是语义化呢?首先抽象的说下语义(Semantic)的概念:“语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义,以及这些含义转载 2012-12-15 01:36:27 · 845 阅读 · 0 评论 -
谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer
Google Chrome在招来了FireFox,FireBug的项目组领导人John J. Barton后,Chrome Dev Tools也变的越来越好用,越来越方便了。本文根据Google I/O上对Chrome Dev Tools的介绍(http://www.youtube.com/watch?v=N8SS-rUEZPg),和相关PPT:http://chrome-devtools-io2转载 2012-12-28 23:22:38 · 548 阅读 · 0 评论 -
chrome developer tool 调试技巧
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-ex转载 2012-12-28 23:30:30 · 580 阅读 · 0 评论 -
样式库构建规范
分类: Alice 文档库发表评论↓是否记得这样的试题?用一套同样的HTML结构,生成不同 的视觉效果。CSS 的最大好处就是,灵活。比如同样的HTML结构,可以实现不同的外观;又比如,同样的外观,可以用不同的方式不实现。但灵活的同时也给我们带来麻烦。团队 协作时,大家的编码风格各异,其他人要看懂/debug的成本也因此提高。这时,我们需要一个规范,一个像红灯亮起我们就不能擅闯的规范。转载 2012-12-16 01:20:10 · 765 阅读 · 0 评论 -
CSS 规范
制定本规范的目的在于使我们的CSS代码更加易于维护和重用,从而提升效率执行本规范时建议的流程 建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup),即DCDVR的流程。首先需要规划样式并分为共有样式和页面个性化样式,然后才开始编码,编码的同时进行Debug,Validate和代码片断的总结,而不是在所有模板都完成后才进行这三个步骤。本规范概述一、关于转载 2012-12-16 01:34:46 · 743 阅读 · 0 评论 -
Web工程师的工具箱
本文出自Ivan Zuzak 的《The Web engineer’s online toolbox》,作者给了一个各种可以用来进行开发、测试、调试以及文档编排的在线工具集。(注:我发现CSDN上已经有了这篇文章《Web工程师必备的18款工具》,但可惜的是这篇文章并不全(原文后来被更新到了33个工具),而且其中并没有包括原文评论中出现的所有工具,所以,我一并补全了更出来,一共40多个工具)转载 2013-05-25 10:32:41 · 608 阅读 · 0 评论