之前发了一篇文章介绍带箭头提示框（不知道专业名词叫什么，姑且这么叫着）的制作方法，不过那种方法不是很好。那种方法把工作放在了HTML和CSS两种技术上，而且还要JS操纵他们两个进行相应改变，这不太符合结构、样式以及行为分离的设计原则。今天无意中在github找一个表单验证提示框的jQuery插件的时候，在它的网页上看到了一种新型的设计方法，这种方法把所有工作都放在了CSS上，是纯CSS设计。于是心血来潮，花了几个小时研究了一番，写了个箭头指向上下左右的demo，喜欢的拿去试试，有神马BUG留言或者站内反馈给我，有交流才有进步，专注前端，大家一起进步。

    空心箭头的实现方法还是一样，就是利用无宽高元素的border可以组成三角，利用隐藏其余三个三角和小三角覆盖大三角的方法制作空心三角。只不过之前是用两个DIV来表示两个三角。今天的这种方法用两个伪类 :after,:before实现。

    伪类可以在CSS文件里直接引用。不用再依赖HTML结构，好处就在这了。

    下面是放大了N倍的效果图：

放大的效果图

    HTML代码如下:


  
  1. <!DOCTYPE HTML> 
  2. <html lang="en-US"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title></title> 
  6.     <link rel="stylesheet" href="test.css" /> 
  7. </head> 
  8. <body> 
  9.     <div id="rl"> 
  10.         <a href="#" class="rl-l">1</a> 
  11.         <a href="#" class="rl-r">2</a> 
  12.         <a href="#" class="rl-t">3</a> 
  13.         <a href="#" class="rl-b">4</a> 
  14.     </div> 
  15. </body> 
  16. </html> 
 
  
    CSS代码如下(test.css):
 
  

  
  1. #rl a{ 
  2.     position:relative; 
  3.     display:inline-block;*display:inline;zoom:1; 
  4.     border:1px solid #d4d4d4;border-radius:3px; 
  5.     background-color:#fafafa;color:#333; 
  6.     padding:6px 8px 5px;margin-left:8px; 
  7.     text-decoration:none;outline:none; 
  8.     font-size:11px;font-weight:bold; 
  9. } 
  10. /*上下左右公有样式*/ 
  11. .rl-l:after,.rl-r:after,.rl-t:after,.rl-b:after{ 
  12.  display:block;width:0;height:0;content:"";position:absolute; 
  13.     border:4px solid transparent; 
  14. } 
  15. .rl-l:before,.rl-r:before,.rl-t:before,.rl-b:before{ 
  16.  display:block;width:0;height:0;content:"";position:absolute; 
  17.     border:5px solid transparent; 
  18. } 
  19. /*左*/ 
  20. .rl-l:before,.rl-l:after{right:100%;top:50%;} 
  21. .rl-l:before{border-right-color:#d4d4d4;margin-top:-5px;} 
  22. .rl-l:after{border-right-color:#fafafa;margin-top:-4px;} 
  23. /*右*/ 
  24. .rl-r:before,.rl-r:after{left:100%;top:50%;} 
  25. .rl-r:before{border-left-color:#d4d4d4;margin-top:-5px;} 
  26. .rl-r:after{border-left-color:#fafafa;margin-top:-4px;} 
  27. /*上*/ 
  28. .rl-t:before,.rl-t:after{bottom:100%;left:50%;} 
  29. .rl-t:before{border-bottom-color:#d4d4d4;margin-left:-5px;} 
  30. .rl-t:after{border-bottom-color:#fafafa;margin-left:-4px;} 
  31. /*下*/ 
  32. .rl-b:before,.rl-b:after{top:100%;left:50%;} 
  33. .rl-b:before{border-top-color:#d4d4d4;margin-left:-5px;} 
  34. .rl-b:after{border-top-color:#fafafa;margin-left:-4px;} 
 
  
    昨天被分到了项目中考核模块做前端开发，作为一个入职不到两个月的FE本科实习生，让我去做Flash本地存储、HTML5 LocalStorage，压力那是相当的大。而且这个项目里用的JS框架是百度的开源项目tangram，之前一直用jQuery，现在要重新学习一个JS框架，泪奔ING。本来今天打算花点时间研究下HTML5本地存储和tangram，看到提示框新的实现方式就忍不住研究了几个小时。。。
 
  
    此刻在会议室交接考核模块RD的工作，抽闲写了篇博客分享出来。
 
  
    05年之前是没有web前端工程师这个职位的，那时候的网页制作比较简单、而且不专业，以致于现在很多人对前端的概念还停留在前端就是软件拖拉拽的模式。不过新的技术标准马上就出台了，可能很多人都在人人或者一些社交平台分享、看到过一些用纯HTML5做的很炫的网页效果。ajax的大量使用将前端带到了RIA（富互联网应用）的风口浪尖上，HTML5、CSS3.0新技术的发展也逐渐消弱了Flash、Flex这些RIA应用的优势。新技术带来了一大片的空白市场，互联网迫切需要一种新的模式、新的理念、新的应用交互。人才知道如何高效、快捷的工作，天才知道如何抓住机遇创新。那么谁又在敏思苦想试图基于新技术创造新模式？是你，是他？我希望是中国人。中国缺少一门心思钻研技术的人。
 
  
2012年7月20日17:03:37于横峰会议室。