本着不增加服务器开销，负担的原则，考虑使用CSS来处理用户头像，相册等。
圆角头像，是可以通过CSS技巧来实现的，并且浏览器兼容性佳！
看看效果图片如何？
看着还行，对吧?
一下为运行代码：
提示：你可以先修改部分代码再运行。
在以上的图片圆角框处理中，有一个技巧。
图片圆角框上下左右都会预留一个空间，而这个尺寸恰好是头像图片中CSS的padding值。
/* face img */
.face1 img,.face2 img,.face3 img{
padding:3px;
}
这样处理后，方便让圆角框正好遮住目标图片。
似乎上面的例子中，还可以在此减少服务器的开销，对。可以把圆角框拼接起来，成为一张图片。原理CSS Sprite,运行一下第二个优化方案。
提示：你可以先修改部分代码再运行。
上篇博客出题《深刻理解表现与结构分离之好友列表操作》，希望能对弟子们有一个考核，看参差不齐的技术水平到底问题再那里？或者这只是我单方面的意愿罢了，截止我发这篇博客开始，还没有一份卷子，更别说是否合格。
废话不多说，看Demo例子就是：
提示：你可以先修改部分代码再运行。
以上内容中鼠标的浮动主要通过JQ类库添加class（addClass）和移除class操作，选中使用JQ切换toggle并添加/删除em标签来实现。
制作的思路是，基本样式控制布局（结构），然后利用js添加修饰元素（表现）。
通俗讲法：用脚本将衣服穿在裸体的人身上。，暂且可以这样理解表现与结构。
网页是否漂亮，就看你这个前端的设计师给他穿什么样的衣服！
如果你觉得你是一个CSSer，可以试试按照如下图片的内容，制作一个符合标准的，并且表现与结构分离的页面。
1.深绿色为选中状态
2.浅绿色为鼠标hover状态
以上的试题没有标准的答案，只能用最接近标准可用性方案来解决。
（js的可用性咱略过，因为我可能也搞不好）
我的答案在下周五公布，希望你们能在下周五前交卷。