工作中的细节.一
可能是不涉及到算法的缘故,页面构建在大多数人看来比较简单。但是在工作一段时间后,也有了一些个人心得,这项工作虽然简单,但是有不少的细节。注意这些细节并把它们做好,可以提高他人的工作效率,或是避免特殊情况导致的错误,亦能改善用户体验。下面列举了几处工作中的案例。
- a标签包含整个产品信息。
常用做法给图片和文字各添加相同的链接,但如果手动更新则必须修改两个a标签中的href属性,工作时间增加了一倍。而使用a标签包含整个内容(图片和文字),只需要操作一次,提高他人的工作效率。 - 字数不确定区域指定高度
图片下方的产品介绍定义height和overflow为hidden,其利有二:产品介绍的文字后面的内容位置固定,和其它商品的此类信息保持在同一行(如价格都在同一行);当内容字数过多,对高于指定高度的部分隐藏,避免页面错乱。 - 预留适当的padding
上图是页面发布IDC后出现的问题:设计稿中的产品名称只有一行,而后台数据中名称的长度可能会超过一行,和价格一栏挤在一起。所以构建页面时要思考各种极端情况,而这些情况可能是交互和设计没有考虑到的。 - body设置word-wrap:break-word body设置word-wrap:break-word;可以避免单词长度大于父级元素长度时单词不换行的问题,另:FF 3.5+和chrome 4+均支持该属性,Opera不支持。而word-break:break-all;个人不提倡使用,因为词内换行会破坏用户的阅读习惯。