有意思团队-友商用户体验团队博客

都知道，a标签通常就是利用href的属性来创建超文本链接，用来链接到互联网中的某个位置，就像网中的一个节点。Internet也因它而神奇。

除了它本身的作为超链接的源的应用外，还有什么扩展应用呢。

1.最简单的，<a href=”xx.xx”><img src=”xxx.jpg”/></a>，这种是最初的扩展，利用图像作为a的内容，而不仅仅是文字，这样就能使得链接看起来更直观，更醒目。

2.javascript ，有时候，为了在点击a标签时能够触发某些事件，你可以在<a >内写javascirpit，例如：< a href=”#” onclick=”alert(”fafsfs”);”>xxx</a>。

3.还有一种，能够给浏览者更进一步的良好体验，就是让鼠标hover时，< a>能够变换视觉效果。

mail.163.com的做法：

利用了onmouseover和onmouseout事件将这个INPUT上的class进行切换，使得背景变换。

优点：对很多元素都可以使用这个方法。

缺点：要添加额外的脚本，如果浏览者禁用脚本，就不会起作用。

阅读全文

这段时间，友商网完成了第三次改版，收获了很多，挑其中的一点稍稍的进行了“深入思考比较学习分析研究参悟理解”。啰嗦的话说完了，正题……

应该不难发现，在目前的各大网站中，大量的采用了圆角去修饰边框，使得页面的呈现更加柔和，干净舒服。所以，友商网在这一次改版中也大量采用了这个样的设计，特别是二级页面的大部分元素框，就采用了时尚的银灰色调配上灰黑的圆角。在将设计稿实现成页面的时候，这个地方开始的确让我头疼，因为这些元素有很多相似的特点，也有一些不一样的地方，相似的是：

title是银灰色渐变x轴横向

底部圆角内凹度一样

而不一样的地方是，整个元素框宽度不一定一样，title高度也有两种，在看到绝大部分的频道设计稿后，我决定将这些元素框做成通用的结构和样式，希望能提高开发效率，省去了一次次重复的调试，也有利于不用的前端开发同事统一风格，整体提高开发速度。

实现的思想是这样的（可以说主要是滑动门的应用）：

1.将title的银灰条进行分离（其实也可以合在一起），作为两个结构元素（分别是h2和span）的背景，进行适应的拉伸

阅读全文

在经过6个小时的奋战后，可爱的友商网以另一种美貌展现给更更可爱的浏览者。时尚的web2.0色调再次优化的页面，我想，会给大家更好的体验。

这次换衣裳，还调整了频道，资讯和课堂合并到了社区，增加了代账平台，将原来的在线管理改版成了在线会计，供应和进销存合并为在线供应链，这是业务模式上的调整，希望更能贴合市场，给广大企业和个人带来更贴切的SAAS服务，还有一个亮点就是增加了免费体验的功能，不用注册也能在线体验各种SAAS产品。

这是衣裳，下次再写写“身材”，o(∩_∩)o…哈哈

阅读全文

在前端开发中经常会用到一些不设置高度的元素，用的最多的，例如清理元素，大家经常会这么写:selector{clear:both;}

他能清理浮动是没错，但是不注意的话就会在IE下造成一些不和谐。请大家看如下样式和图例—–

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
< html xmlns=”http://www.w3.org/1999/xhtml”>
< head>
< meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
< title >test BR< /title>
< style type=”text/css”>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,

blockquote,th,td{margin:0;padding:0;}
#testBr{ width:950px;height:10px;background:#000; }
< /style >
< /head >
< body >
< div id=”testBr”>< /div>
< /body>
< /html>

下面是#testBr在不同高度值下的表现：

阅读全文