本着不增加服务器开销，负担的原则，考虑使用CSS来处理用户头像，相册等。
圆角头像，是可以通过CSS技巧来实现的，并且浏览器兼容性佳！
看看效果图片如何？
看着还行，对吧?
一下为运行代码：
提示：你可以先修改部分代码再运行。
在以上的图片圆角框处理中，有一个技巧。
图片圆角框上下左右都会预留一个空间，而这个尺寸恰好是头像图片中CSS的padding值。
/* face img */
.face1 img,.face2 img,.face3 img{
padding:3px;
}
这样处理后，方便让圆角框正好遮住目标图片。
似乎上面的例子中，还可以在此减少服务器的开销，对。可以把圆角框拼接起来，成为一张图片。原理CSS Sprite,运行一下第二个优化方案。
提示：你可以先修改部分代码再运行。
王开放提交的作业
提示：你可以先修改部分代码再运行。
显然，Web标准并不是一个严格执行的标准，但是我们却可以像W3C推荐的那样尽可能的将页面实现标准化。
上周我们讨论了标准的导航写法：
第一种方案
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
优点：相对有语义，多一个控制节点，可以灵活控制，实现二级菜单。
缺点：用户体验相对差些，UL的执行效率显然逊色于A标签。
第二种方案
<div>
<a></a>
<a></a>
<a></a>
</div>
优点：代码简洁，能实现一般类型的导航，页面执行效率要不UL迅猛。
缺点：语义相对差些，若需实现较复杂的导航需要嵌套额外的标签。
那是不是有更标准的更符合语义的做法呢？有人说可以用HTML5里新增加的.
但就目前来看,等待HTML5的发布还为时尚早，再加上不同浏览器的支持程度，更是不敢恭维。
有没有更加合理的解决方案能够填补这个空白？ 有的！
请看如下代码：
<map><div>
<a></a><a></a><a></a>
</div></map>
对 就是 map !W3C官网的写法！
W3C的说明是The MAP element may be used without an associated image for general navigation mechanisms.MAP元素可用于无关联的图像一般导航机制。
map具有地图、导航的特性，结合上面提到的第二个方案，这就是最佳解决方案。当然用map嵌套UL也是可以的，不过显然现在UL的语意就不是那么重要了。提醒大家的是map里面必须嵌套一层块级元素，因为map本身不具有此属性。
详细资料：http://www.w3.org/TR/REC-html40/struct/objects.html#adef-usemap
附：W3C官网；http://www.w3.org/