作者:kun10
发布时间:May 22, 2010
分类:CSS
开始前先问一句:现在让你说说css伪类你能说出几样?你又常用过哪几种伪类?
说句实话,自己学习css的时候很粗心,对于伪类真的了解不多,最多知道的就是
:hover,还知道在ie6下面hover只对a元素有效。于是乎觉得它功能很弱小,一直没有什么关注。
直至自己最近做项目时候遇到一个需求,要对段落第一个字母的样式进行单独控制(很常见的段落首字加粗或加大的那种效果),由于不熟悉伪类,接到需求自己很快的就敲定了一个html结构。
<p><span>这</span>是一段话</p>
通过span元素把第一个字从段落中分离出来,然后单独的定义样式。
这样的确是一种解法,但是这样的段落对于后期的维护不太有利,特别是要有一个不太懂html的人来维护这段话,很容易忽略掉span标签的作用。对于后台来说,对文本数据做处理又麻烦了一步。
很凑巧,今天逛了王卓同学的blog,发现他的文章以及回复留言处都是做成首字大写加粗变色的样子,很好奇,于是忍不住按了F12。
发现他的html中没有加过span,整段文字成一段,这样对于维护成本确实是减少不少。
那他这里是怎么实现的呢?其实很简单,使用了css伪元素:first-letter。
.paragraph:first-letter{
....
}
这样子,段落文本本身不需要使用任何的标签单独的隔离出来。
在此我突然想把伪类和伪元素总结一下,于是看了看w3school上面。我也自己再过一遍。
伪类及其支持情况

伪元素及其支持情况

套用@化龙的一句话,前端做的优化要考虑到成本和代价问题,在这次这个问题上,真的得以体现了,很明显使用css伪元素大大简化了后台开发人员和维护人员的操作,把样式和内容做了分离~~~
============= 也欢迎各位提出伪类伪元素的各种小技巧 ===============
作者:kun10
发布时间:May 9, 2010
分类:记生活
实习了将近有一个月了,原来打算最近翻译下高性能JavaScript和一些yahoo theater的视频的,不过自己看得不是太多且时间有点紧,而且这不离毕业也很近了,还是记一记最近实习的笔记比较靠谱。
步入正题,话说实习有一个月了,自己也在源源不断的接触实际的项目,觉得和年前的实习还是有很大的不同的。
实习中有几件事记得比较的清楚:
1、自己接手的第一个小功能,写了一段不是很好的代码(原因可能是自己有些心急和紧张),被师父“训斥”了一回,事后觉得有时候写代码的时候还是要多想,评估很重要,不要急于去写代码。虽然一开始可能会慢一些,但是自己一定要慢慢习惯。
2、才来了两周的时候,就突然被@清羽GG叫去,说是要去支持无线事业,当时因为刚刚经过了新人show,觉得自己刚刚要融入这个组,所以对组里的这个决定还是感觉很突然,自己对于无线也还一点感觉都还没有,下班后便傻傻的去找师父@沉鱼,其实自己很想知道是不是自己做得不好而被“发配”了~~~(这可能是很多的新人都有的想法)。不过,师父鼓励我要学会面对挑战和变化,其实在后来经历的百淘培训我也常常听到变化这个词,所以拥抱变化很重要,要用一种积极的态度去面对每件事情,主动的分析问题,这样自己才能渐渐的提高,同时也可以看到各种的困难和问题,获取不同的知识。
3、快乐工作、认真生活
很好的一个口号,百淘的时候听到的,觉得自己获得的很重要的一点就是上班下班都要快快乐乐的。乐观的时候人才可以有很多的想法,另外就是快乐的感觉对于团队也很重要,其实对于家人也很重要。
4、分析
前两天来无线,@化龙就叮嘱我一些事情,说要多分析需求,不单单是要分析需求、熟悉业务,更要熟悉业务人的情况,包括需求的来源,需求的链,需求人的提出需求频繁情况~~这样才能够把事情给做顺,减少做事情的成本,可见要做好做顺一件事要做的准备真的很多,自己应该多注意,另外@化龙的话也提示我前端优化的价值不只只是考虑给用户提供更好的产品性能,更是要考虑公司成本的消耗。
5、交流
处理需求之前沟通和交流都是很必要的,有时候更是要把不清楚的问题问得透彻,这样才能避免很多问题的发生,也有利于减少成本、控制时间。
6、百淘
不多说,贴上百淘的视频慢慢回味,自己做的,有些挫,各位多拍砖
================= 题外话================
今天是母亲节,在此也祝老妈和天下的母亲节日快乐
======================================