CSS中的RGBa色彩
RGBa是一种在CSS中声明包含透明效果的颜色的方法，它的语法是这样的：
|
|
div { background: rgba(200, 54, 54, 0.5); } |
它允许我们为元素添加透明色。或许我们习惯了使用”opacity“，它很简单易用，但是，opacity会使所有的子元素都变成透明的，而且很难去解决这个问题。
Archive for the ‘HTML/CSS’ Category
HTML5新功能演示
这是一个HTML5新功能的演示文档，几乎包括HTML5所有激动人心的新功能的简介和DEMO。
IE系列浏览器无法浏览，firefox、opera等浏览器只能使用部分功能，如果想100%演示成功，请使用最新版的“谷歌浏览器（Google Chrome）”，建议使用最新版。
More »
用CSS修正一切：20多个常见Bug及其修正方法
毫无疑问，一个合理的布局和结构是最好选择。这不仅是因为你的布局在不同浏览器见表现不同，而且还因为的CSS有很多方法来布局你的每个元素。今天，我们希望与你们分享一些避免在创建CSS布局时容易遇到的错误的技巧。
15个Google为网站开发者打造的工具
Google 的使命是 Web，在 Google 眼中，未来的一切应用都将 Web 化，一直以来，Google 为 Web 开发与设计者推出了大量免费工具，让他们更好地创建，维护，改善他们的 Web 站点，这些工具包含了开发，分析，维护，修补等等用途，本文将介绍15款这样的工具。
转：使用 Dojo 开发离线应用
所谓离线，指的是用户能够在没有网络的环境下也可以进行工作，并且当网络环境恢复后，之前的操作能够自动地同步到服务器上。目前，离线应用可以分为两种，一种是桌面应用，其中以 IBM Lotus Notes 为代表。另外一种则是近来比较热门的 Web 离线应用，其中最具代表的为 Google 的离线应用，如 Google Docs, Gmail, Google Reader 等。而本文介绍的 Dojo 离线功能，则是目前最为流行的实现第二种离线应用的框架。
使用回车键提交网页表单的条件
回车键提交表单是我们经常操作的一个动作，而什么条件下能使回车键提交却很少有人关心！
我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。
要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
1、如果表单里有一个type=”submit”的按钮，回车键生效。
2、如果表单里只有一个type=”text”的input，回车键生效。
3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
4、其他表单元素如textarea、select不影响。
实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第4条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。
一个demo，列出了一些例子
[英,转]45个新鲜有用的JS与jQuery技术和工具
45 Fresh Useful JavaScript and jQuery Techniques and Tools
Yes, this is another round-up of fresh and useful Javascript techniques, tools and resources. But don’t close the tab yet, as you might find this one very useful. In this selection we present calendars, forms, buttons, navigation, debugging, optimization and compatibility tables as well as handy resources and tools. We also cover various jQuery-plugins that will help you extend the functionality of your website and improve user experience with ready components or coding solutions.
The last section also covers a number of useful educational resources such as a compilation of useful JavaScript coding practices, a detailed comparison of JavaScript frameworks and general JavaScript programming conventions. We are looking forward to your feedback.
“点亮网页”：一个实用的Firefox和IE插件
支付宝UED的鸽子同学制作了一个Firefox插件，它可以用来快速实时编辑网页代码，快速基于Firefox制作Demo页面，方便的编辑修改CSS Sprite，以及配合Fiddler调试页面，是一个很不错的前端开发助手。
Firefox版本
该插件基于Firebug，所以安装前请确保已经安装Firebug。
一些主要特性；
- 即时编辑——即改即现，把Firefox打造成超强网页编辑器；
- 与Fiddler一起使用，快速调试线上网页，HTML代码快速生成；
- 刷新CSS，DOM不刷新；
- 禁用单个CSS样式；
- CSS Sprites位置快速设定；
- 保持Session不过期；
- 导出任意节点为PNG图片；
[转]CSS文字排版终极指南
在今天的设计中，排版常常被忽视，特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说，我们被局限于某些“网络安全”排版，但是我们不应该限制我们自己的创造性。本文整理了一些用于在网页上排版的CSS技巧。
Font属性
CSS提供了font属性，它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。
Font-size
使用font-size可以修改你的文字的大小。
1 2 3 |
font-size: 1.2em; font-size: 12px; font-size: 10pt; |
预览
- 文字大小为1.2em.
- 文字大小为12px.
- 文字大小为10pt.
PS:关于font-size，推荐一下码头写的《http://www.css88.com/archives/821》
Font-weight
该属性用来改变你的文字的粗细(比如bold, bolder)
Zen Coding资源更新
先前有介绍过一个超级快速写HTML代码的插件，专门发布了博文牛x无敌！！！Zen-Coding-一种快速编写htmlcss代码的方法
下面是是从前端复制过来的Zen Coding的资源链接
- zen coding前些天升级到了0.6版本，新增了几项小功能，这里不再赘述，感兴趣的同学可以更新自己用的相应的插件；
- zen coding官方有个速查手册(PDF)，很全面，严重推荐；
- zen coding刚刚发布了 notepad++插件；
- 这里有个非官方的VIM插件：http://github.com/mattn/zencoding-vim (多谢 @kejunz 的分享)
- 使用UltraEdit的同学可以看一下 @ytzong写的《在UlrtraEdit中配置Zen Coding》教程；
- 使用EditPlus的同学可以看一下这个《zencoding(HTML) for EditPlus v1.0》
- zen coding的dreamweaver插件安装教程http://www.qianduan.net/zen-coding-for-dreamweaver-plug-in-tutorial.html:
Recent Replies / 最新回复