语义化的HTML结构到底有何好处?
相信大家都知道html和css，知道html结构和css表现分离，知道html语义化，这些都是这几年的热门关键字。语义化的html在国内也是一两年前才开始被追捧的，看看现在群里谈论的html结构，关于html结构的面试题，语义化的html占据了很大一部分。那么为什么要使用语义化的HTML？语义化的HTML到底有什么好处呢？
Archive for the ‘HTML/CSS’ Category
[转]网站优化应重视 DNS 预获取(DNS Prefetching)
网站优化技术总是在进化。今天重新阅读了一下以前的前端优化笔记，发现对于 YSlow 优化 34 条准则关于减少 DNS 查找 (Reduce DNS Lookups)的部分或许应该修正一下了。
More »
JavaScript 图片切割效果
现在社区网越来越多,注册可以上传照片,并进行切割,形成较小的图片(头像),这样对自动的后台是有好处的.
我就开始到网上到处去搜索,下面是自己找到的两个JS代码.前个是用原javacript写的,后个是用框架jquery的一个插件写的.感觉都不错.(其实这些JS都不是真正的能对图片进行切割,他们只是提供一个从那点开始切割,要切割的长各宽.把这些参数传到后台由后台语言去操作.)也不多说了,下面就给出这两下例子吧.
这个是cloudgamer博客的,这个解释的很清楚
http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html
下面的一个是用jquery框架的一个插件.这个是英语的,不过还好啦,看jquery代码应该还是没有问题的
[转]如何做好一份前端工程师的简历？
春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事，节后收到很多简历，加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历，数量上是相当的多，把这些简历一一看完真是一个漫长而幸苦的体力活，何况我还要仔细认真的去提取和核查有用信息评估其能力，尽量不错过任何一个埋藏在大量简历中合适的人，这绝大部分时间并不是一个相当愉悦的过程。所以，我感觉有必要来谈谈：如何做好一份前端工程师的简历。
一、你是前端工程师
虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。
毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。
二、内容为王
08腾讯实习生招聘设计类网页重构组岗位公开试题
08腾讯实习生招聘设计类网页重构组岗位公开试题
请将答卷、作品及简历压缩后发送到：Campus@tencent.com 邮箱，投递作品请在主题标明：职位+地区+学校+姓名，如：用户研究+北京+北京大学+张三
参考答案：http://www.hemin.cn/blog/?p=90
一、 耐心填一填！（每空4分，共24分）
1. 为div设置类a与b,应编写HTML代码__________。
2. 设置CSS属性clear的值为_ ___________时可清除左右两边浮动。
3. ____ ________标签必须直接嵌套于ul、ol中。
4. CSS属性____________可为元素设置外补丁。
5. 设置CSS属性float的值为___ _________时可取消元素的浮动。
6. 文字居中的CSS代码是____ ________。
[转]基于jQuery的饭否输入框.（QQ校友的留言和评论心情也有）
基于jQuery的饭否输入框.
相信大多数人都使用过饭否。总的来说，饭否算是国内一个不错的互联网产品。个人比较喜欢。特别是那个140字的输入框，我觉得还不错，能实时的显示 “已经输入多少字”和“还可以输入多少字”。所以，这篇文章就是来讲解如何制作一个类似的输入框。（现在QQ校友上的留言和评论心情这块也有）
1，基本布局
所需要的元素：一个标题，一个提示字数的元素，多行输入框一个，loading图片一张，提交按钮一个。
布局涉及到2个状态：”1个默认状态” 和” 1个已经超出” 的状态。
具体布局可以看下面的2个例子：
http://www.cssrain.cn/demo/fanfoutext/demo1.html
http://www.cssrain.cn/demo/fanfoutext/demo2.html
2，添加脚本
布局做好后，添加脚本就相对简单了。
很多人做这个效果的第一反应就是 使用 onkeydown或者onkeyup。我以前也是，当时遇到了很多问题。
不过上次看了国外一个代码后，我改变了思路。使用的是focus + setInterval() + +blur来实现。
具体思路就是 当鼠标获取焦点(onfoucs)后，添加一个setInterval(), setInterval()中的函数就是用来截取字符串的。当鼠标失去焦点后， 清除interval。另外需要注意的是，在focus时，需要判断 避免重复执行。
具体代码可以看Demo3:
http://www.cssrain.cn/demo/fanfoutext/demo3.html
前端开发必备工具
1.IETester 0.3.2 多国语言版-同时拥有IE6、IE7、IE8（Vista兼容）
http://www.my-debugbar.com/wiki/IETester/HomePage
2.Web Developer for firefox插件
在菜单和工具栏加上多种网页开发工具
https://addons.mozilla.org/en-US/firefox/addon/60/
3.FireBug1.3.3 for firefox插件
Firebug 和 firefox 整合在一起，使你浏览网页时手边有了一套强大的网页开发工具。你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。
http://addons.sociz.com/firefox/531/
【译】10个惊人的CSS hack和技术 (10 astonishing CSS hacks and techniques)
【译】10个惊人的CSS hack和技术 (10 astonishing CSS hacks and techniques)
原文：10 astonishing css hacks and technique
译文： 10个惊人的CSS hack和技术|奇亚
版权所有，转载请注明出处，谢谢
我猜想绝大多数人都知道CSS能为你做什么，但是一些惊人的技术对开发人员来说依然比较隐秘。在这篇文章中，让我们来看看10个跨浏览器的css技术，一定会强大你的设计！
1 – 跨浏览器的 inline block
【经典】CSS技巧教程资源大全
一，Web 标准
要玩游戏，就得先了解规则。要学CSS，就应该先了解一下Web标准。尽管看上去不是必须的(我在学CSS之前，根本不知道也不想知道Web标准是 个啥玩意儿)。应该说，你是否学Web标准，跟你是否能学会CSS没有什么关系，但跟你能写出什么样的CSS，以及XHTML或其它代码，跟你能做出什么 质量的网页有很大的关系。
IE6元素float的hack
不知道什么时候可以告别IE6，写CSS每次都要考虑到IE6 的HACK，前几周自己写一页，又碰到这个问题，以前写法是出现问题后就加一个display:inline;或者是加一个overflow:hidden;虽然问题可以解决，但不知道到底什么时候应该加。现在总结一些要加的情况：
总的来说这些问题都是因为float引起的，IE7还好不会有脾气，可是IE6它就不一样了。
1.如果一个选择器的子元素有float,就是设定一漂动，那么就会应该失去选择器的高度，下面有给个示例下：如
这个正常的情况：
下面这个是不正常的：
下面的是正确的代码
More »
Recent Replies / 最新回复