一个hover效果和一个阴影效果

作者： 发布时间：February 2, 2010 分类：前端

腰子要的一个效果，写完了就顺手贴上来吧～没准有人有用～恩恩

<style type="text/css">
.box{ float: left; width: 200px; height: 200px; border: 1px solid #999; _overflow: hidden; }
ul{ margin: 0; padding: 20px 0; }
li{  list-style: none; margin-bottom: 5px; }
a{ position: relative; display: block; padding-left: 10px;width: 170px; height: 20px; margin-left:20px; line-height: 20px; font-size: 14px; }
a:link{ text-decoration: none; color: #42414A;outline:none; text-decoration: none; }
a:visited { text-decoration: none; color: #42414A;outline:none; text-decoration: none; }
a:hover { text-decoration: none; color: #999;outline:none; border: 1px solid #999; border-right: none; background: #FFF; height: 19px; line-height: 19px;  text-decoration: none; }
a:active { text-decoration: none; color: #999;outline:none; text-decoration: none; }
.content{ float: left; width: 300px; height: 200px; border: 1px solid #999; border-left: none; }
</style>
<div class="box">
<ul>
	<li><a href="#">内容内容</a></li>
	<li><a href="#">内容内容</a></li>
	<li><a href="#">内容内容</a></li>
	<li><a href="#">内容内容</a></li>
	<li><a href="#">内容内容</a></li>
</ul>
</div>
<div class="content"></div>

唐刀同学的一个需求，大概写了下，但是不太满足他的需求貌似，也备案。

<style type="text/css"> 
<!--
.box { position:relative; width: 300px; _padding-bottom:3px; _overflow-y:hidden; }
.boxcontent { position:relative; border:1px solid #999; background:#FFF; }
.shadow{ position:absolute; top:3px; left:3px; width:100%; height:100%; _height:700px; background:#CCC;  }
//-->
</style> 
<div class="box"> 
	<div class="shadow"></div> 
	<div class="boxcontent"> 
		test
	</div> 
</div>

如何做好一个前端工程师

作者： 发布时间：January 11, 2010 分类：前端

原文地址：What makes a good front end engineer?
中文翻译

昨天，我负责了Yahoo!公司组织的一次面试活动，感触颇深的是其中的应聘者提问环节。我得说自己对应聘者们提出的大多数问题都相当失望。我希望听到一些对在Yahoo！工作充满激情的问题。在昨天的应聘者中，只有一个人的问题是我认为最好的，那个人问我：“你觉得怎么才能成为优秀的前端工程师？”我觉得很有必要把这个问题从面试房间里拿出来讨论一下。

首先，前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一个或两个还不行，你必须对这三门语言都很熟悉。也不是说必须对这三门语言都非常精通，但你至少要能够运用它们完成大多数任务，而无需地频繁地寻求别人的帮助。

优秀的前端工程师应该具备快速学习能力。推动Web发展的技术并不是静止不动的，没错吧？我甚至可以说这些技术几乎每天都在变化，如果没有快速学习能力，你就跟不上Web发展的步伐。你必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而你的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。

计算机科学这个大门类下面的许多分支在人们眼中实际上都不外乎科学。但是，我们所说的前端不是什么科学，而是艺术。艺术家不仅要掌握谋生的技术，还要懂得如何运用。对同一个问题的解决方案在这种情况适用，在另一种情况下可能就不适用。对Web应用程序的前端而言，解决同一问题的方案经常会有很多。没有哪个方案是错的，但其中确实有一些是更合适的。优秀的前端工程师应该知道在什么情况下使用哪种方案更合适，而在什么情况下应该重新选择。

优秀的前端工程师需要具备良好的沟通能力，因为你的工作与很多人的工作息息相关。在任何情况下，前端工程师至少都要满足下列四类客户的需求。

产品经理——这些是负责策划应用程序的一群人。他们能够想象出怎样通过应用程序来满足用户需求，以及怎样通过他们设计的模式赚到钱（但愿如此）。一般来说，这些人追求的是丰富的功能。
UI设计师——这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。他们热衷于流畅靓丽但并不容易实现的用户界面。
项目经理——这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间（uptime）——应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。
最终用户——当然是应用程序的主要消费者。尽管我们不会经常与最终用户打交道，但他们的反馈意见至关重要；没人想用的应用程序毫无价值。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。
那么，前端工程师应该最关注哪些人的意见呢？答案是所有这四类人。优秀的前端工程师必须知道如何平衡这四类人的需求和预期，然后在此基础上拿出最佳解决方案。由于前端工程师处于与这四类人沟通的交汇点上，因此其沟通能力的重要性不言而喻。如果一个非常酷的新功能因为会影响前端性能，必须删繁就简，你怎么跟产品经理解释？再比如，假设某个设计如果不改回原方案可能会给应用程序造成负面影响，你怎么才能说服UI设计师？作为前端工程师，你必须了解每一类人的想法从何而来，必须能拿出所有各方都能接受的解决方案。从某种意义上说，优秀的前端工程师就像是一位大使，需要时刻抱着外交官的心态来应对每一天的工作。

阅读剩余部分...

zen coding 学习笔记

作者： 发布时间：December 22, 2009 分类：前端

什么是zen coding呢？

先去http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html看下。

项目在google code的地址是，http://code.google.com/p/zen-coding/

我这里就不对这个比较强大打东东作介绍了，想了解可以先看下前端观察的那片文章。对IDE的高效一直很追求，所以使用的编辑器一路从记事本到DW，到editplus再转到Mac之后的textmate，Espresso再到现在用的Coda。zen coding插件的强大在于花费部分学习成本之后“飞”一样的代码书写速度。废话不多说，进入正题，一下为部分学习笔记

代码可以在这里测试：http://zen-coding.ru/demo/

常用书写

E
元素名称(div, p); 
E#id
使用id的元素(div#content, p#intro, span#error); 
E.class
使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width; 
E>N
子代元素(div>p, div#footer>p>span); 
E+N
兄弟元素(h1+p, div#header+div#content+div#footer); 
E*N
元素倍增(ul#nav>li*5>a); 
E$*N
条目编号 (ul#nav>li.item-$*5);

Coda下的快捷键键修改
zen1
首先去资源库找到插件

zen
显示包内容，找到如图文件，打开

代码不是很难，看看就能找到了，或者直接搜索^,修改为你自己喜欢的按键就OK了。不过貌似command键设置的按键用不了，闹心！不知道怎么设置成tab键。

阅读剩余部分...

第四届D2前端技术论坛开始报名了

作者： 发布时间：December 7, 2009 分类：前端

第四届 D2前端技术论坛 (12月19日·杭州)

2005年前端工程师的职位开始在中国出现，2007年第一届D2前端技术论坛在杭州举行，从此D2伴随着中国的前端一起成长，从此越来越多的互联网产品的背后有着职业前端工程师坚定的身影。

在D2上我们曾交流过某项具体的前端技术，也曾探讨过团队协作的方式，那些美妙的话题都深入到我们频繁敲键盘的指尖。回首我们过去四年的坚持和梦想，现在是时候分享我们的积累和成果了。当架构、安全、性能等等在前端的领域扎根的时候，我们自己也在悄然发生质变，而推动这些变化的人和事正是D2想告诉你的。


巧用代码收藏，提高开发效率

作者： 发布时间：November 17, 2009 分类：前端

在写代码的时候，有很多代码是可复用的，每次都手打一遍简直是浪费我们大好的青春。所以代码收藏功能是我是否喜欢一个代码编辑器的原因之一，而且是重要的原因之一。

CSSEdit
我windows环境下最爱的Editplus也有代码片段功能，当然CSSEdit也有这个功能。点击 窗口>收藏管理器 你就可以打开这个功能了。
不过CSSEdit是拖来拖去的。拖进去的时候选择左侧的样式名，拖出来的时候，选择要用的拖到要使用的位置。

cssedit

Coda
Coda提供Clips功能，在代码编辑状态下可以在窗口的下面看到。使用方法很简单。

coda

Espresso
Espresso的代码收藏功能直接在右下角可以看到，方法也很简单

Espresso

    2. 1
    3. 2
    4. 3
    5. 4
    6. 5
    7. 6
    8. 7
    9. ...
    10. 32