web analytics

存档

文章标签 ‘CSS’

浏览器的渲染原理简介

2013年5月22日 66 条评论 43,595 人阅读    

看到这个标题大家一定会想到这篇神文《How Browsers Work》,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文。为什么我还想写一篇呢?因为两个原因,

1)这篇文章太长了,阅读成本太大,不能一口气读完。

2)花了大力气读了这篇文章后可以了解很多,但似乎对工作没什么帮助。

所以,我准备写下这篇文章来解决上述两个问题。希望你能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西。

浏览器工作大流程

废话少说,先来看个图:

从上面这个图中,我们可以看到那么几个事:

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (34 人打了分,平均分: 4.94 )
Loading ... Loading ...

神奇的CSS形状

2012年3月24日 18 条评论 15,075 人阅读    

感谢 Neo 投递本文 – 微博帐号@_锟_

在StackOverflow上有这么一个问题,有位同学在http://css-tricks.com/examples/ShapesOfCSS/  找到一些使用CSS做的形状,其中一位同学对下面的这个形状充满了疑问。

形状是:

代码是:

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

这位同学就提问啦,为啥这么这么几句就能画出一个三角形呢?
于是呢,有高人出现,这个高人图文并茂的解释了这个三角的成因

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (14 人打了分,平均分: 4.07 )
Loading ... Loading ...

CSS 布局:40个教程、技巧、例子和最佳实践

2012年3月19日 18 条评论 29,781 人阅读    

感谢 Neo 投递本文 – 微博帐号_锟_

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本经典的CSS书籍《CCS: The Missing Manual, 2nd Edition》中都可以找到,据我所知,第二版在中国没有翻译出版。你可以从这里下载英文版(不过需要注册个用户名)

正文
基于CSS的布局能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解CSS布局的基础和本质。这也是本文成文的原因 ——找到那些完美的布局,完全灵活的,等高栏和工作完美的布局。
因此下面这个列表就是我们整理了网络上关于基于CSS布局的一些技巧,教程和最佳实践的列表。
当然你也可能对下面这些和CSS相关的主题有兴趣:

The 7 CSS Hacks that we should use
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Using CSS to Fix Anything: 20+ Common Bugs and Fixes

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (13 人打了分,平均分: 4.92 )
Loading ... Loading ...

Web开发中需要了解的东西

2011年12月7日 55 条评论 69,634 人阅读    

在StackExchange上有人问了这样一个问题:What should every programmer know about web development?(关于Web开发,什么是所有程序员需要知道的?)里面给出的答案非常不错,所以,我翻译转载过来。 顺便说一下,StackExchange真是非常好,大家可以对同一个答案做贡献和修订,看看这个问题的修订过程你就知道了——专业的问答网站应该怎么去做。这就是我在这篇文章中也说过真正的用户体验是什么样的

好了,下面是正文(我对原文做了一些批注,也许不对或有误导,请大家指正)

下面的这些东西可能对于大多数人并不陌生,但是可能会有些东西你以前并没有看过,或是没有完全搞懂,甚至都没有听说过。(陈皓注:我相信当你看完这个列表后,你会觉得对于我国的Web开发有点弱了,还是那句话,表面上的东西永远是肤浅的)

接口和用户体验

  • 小心浏览器的实现标准上的不一致,确信让你的网站能够适当地跨浏览器。至少,你的网站需要测试一下下面的浏览器:

最后,你可以使用一下这个工具 来看看你的网页在不同的浏览器下是怎么被显示出来的(陈皓注:这个工具就是以前本站介绍过的在不同浏览器和平台上检查你的网站的兼容性

  • 多考虑一下人们是怎么来访问你的网站而不是那些主流的浏览器:手机,读屏软件和搜索引擎,例如:一些Accessibility的东西: WAI 和  Section508, 移动设备开发:MobiForge.
  • 部署Staging:怎么部署网站的更新而不会影响用户的访问。 Ed Lucas的答案 可以让你了解一些(陈皓注:Ed说了一些如版本控制,自动化build,备份,回滚等机制)。
  • 千万不要直接给用户显示不友好的错误信息。
好烂啊有点差凑合看看还不错很精彩 (35 人打了分,平均分: 4.86 )
Loading ... Loading ...

CSS图形

2011年8月15日 39 条评论 13,977 人阅读    

下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码。这个收集的原文在这里

经测试,IE9, Chrome, FF, Safari都可以正常显示。

正方形
长方形

阅读全文…

分类: Web开发, 杂项资源 标签: ,
好烂啊有点差凑合看看还不错很精彩 (9 人打了分,平均分: 5.00 )
Loading ... Loading ...

一些有意思的贴子和工具

2011年3月4日 16 条评论 12,749 人阅读    

又到了介绍各种杂项的时候了,正如以前的这三篇(这篇这篇,和这篇)文章一样,本篇文章也给你介绍一些最近出现的一些有趣的东西。希望你能喜欢。

先说找工作吧,电影《该页无法显示》里的那个facebook主页上的招聘网页上是列了一堆问题,你可以去看看,你可以使用c/c++,Erlang,Haskell,Java,Perl,Python,PHP,Ruby来解题,不过只接受Unix/Linux下的版本, 不接受Windows的版本。无独有偶,DropBox招聘网页上也是些算法题,大家可以过去看看,不过需要翻墙。(现在,对于美国互联网企业来说,如果你没有被C2C,说明你根本不存在,如果你没有被墙,说明你还不算成功)

接下来给大家介绍一些文档和教程吧,都是英文的。

  • Java和C#的完整比较。这是一个相当完整的比较Java和C#语言的网页。很有意思,有助于你了解Java和C#的各种特性和不同。
  • SQL 性能调优。这个文档覆盖了IBM DB2MySQLOracle,PostgreSQL 和 Microsoft SQL Server。不过这个电子书还没有写完,你可以使用其RSStwitter 或 Facebook 来跟踪其进度。
  • Clever Algorithms。这个电子书也是免费的。其主要面向一些AI和面向自然的算法,一共45个。其包括概率随机算法,迭代进化算法,物理算法,可能性算法,蚂蚁蜜蜂式算法,免疫算法,神经算法等。里面大量的高等数学公式对我来说我已经看不懂了。不过,我相信这个电子书非常适合搞理论研究的人,或是需要抄袭一篇论文以顺利毕业的人使用。
  • HTML5 Audio & Video 处理。这是一组在线的幻灯片,请使用键盘光标键翻页。这是一组带着各种演示的幻灯片,对于你要学习HTML5的声音和视频相关的知识很有帮助。
  • C 语言的宏。你想知道C语的宏有哪些有些意思的用法吗?这篇文档不会让你失望的。其由浅入深地向你介绍了宏的各种用法。
  • 物理模拟F#教程。相信你一定玩过那种游戏,画一个任意形状的石头,其会从天上落下以砸下面的一个东西,这个教程用.NET的F#向大家说明了这种东西怎么去做。(演示程序

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (15 人打了分,平均分: 5.00 )
Loading ... Loading ...

Web开发人员速查卡

2011年2月16日 8 条评论 13,572 人阅读    

无论你是多牛的程序员,你都无法记住所有的东西。而很多时候,查找某些知识又比较费事。所以,网上有很多Cheat Sheets,翻译成小抄也好 ,速查卡也好,总之就是帮你节省 时间的。之前给大家介绍过Web设计的速查卡25个jQuery的编程小抄,还有程序员小抄大全,今天转一篇开发人员的速查卡,源文在这里。下面的文章我就不翻译了。

HTML Cheat Sheet

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (10 人打了分,平均分: 4.90 )
Loading ... Loading ...

30+ Web下拉菜单

2010年10月20日 6 条评论 9,355 人阅读    

以前给大家介绍过13个不错的Javascript和CSS的菜单20个优秀的Javascript导航技术30种时尚的CSS网站导航条,今天在网上看到一篇文章其收集了30多个下拉菜单(分为两类,jQuery和CSS+Javascript的),转过来。

原文:http://smashinghub.com/3-useful-drop-down-menu-scripts-to-enhance-header-navigation.htm

jQuery

Smooth Navigation Menu

Drop Down Menu Scripts 5 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (4 人打了分,平均分: 4.00 )
Loading ... Loading ...

40个很不错的CSS技术

2010年10月8日 4 条评论 7,350 人阅读    

以前发布过《30种时尚的CSS网站导航条》,下面是40个CSS的技术,可以让你的网页有更好的用户体验。希望你喜欢

1. A CSS styled table version 2

2. A CSS-based Form Template

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (4 人打了分,平均分: 5.00 )
Loading ... Loading ...

一些非常有意思的杂项资源

2010年9月28日 16 条评论 19,408 人阅读    

下面是一些最近在互联网上看到的一些各式各样的资源和文章,当然,都是英文社区的,本来想每一个写一篇文章,但是觉得一篇文章一句话真没劲,所以,把这些东西合并写成一篇文章,这样有利于减轻本站的负载,也有利于节省网络带宽,同样,也就节省了能力和电力,因此也就很环保,很低碳。呵呵。

  • 说到这些很酷很炫的东西,大家一定会想到使用Flash,不过,目前的Flash正在受到HTML5的强力挑战,目前,对于HTML5的展示网站很多,让我们看到了HTML5完全可以做出Flash的样子,比如前些天本站说到的这个演示,还有给大家展示的纯HTML5的小游戏,不过,那些都是一些演示和展示罢了。今天在网上看到一个更强大的HTML5游戏,相当有可玩性,大家不妨一去试玩:http://www.phoboslab.org/biolab/

  • HTML5 可以应用的还不只是游戏,这不,有文章指出,用VexFlow还可以很轻松地在网页上发布乐谱。而这个网页还可以让你制作Hi-PoP音乐。

Rendered music

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (6 人打了分,平均分: 4.67 )
Loading ... Loading ...