这个是面对有一定css经验的思考，如果你能够在一个钟头内用css写出这个导航条，并能自适应跟兼容所有浏览器，那么你就应该把css用得非常熟练了。【右键另存上面的图片源文件可以用fireworks编辑，有分层，photoshop打开的话会合并了。】

如果你写不出来，那么你也能通过这个css导航条的思考，让你获益不少。

当我看到这个图的时候，起初觉得挺简单的，一个高度30px的div，里面包含着一个ul跟一个more的a标签，可以用css 的float属性，一个飘左一个飘右，而如果按照ul 然后才是 a的顺序写的话，ie下会分成两行，可以先是a标签，然后才是ul。如果需要ul先load的话，可以用position去实现左右的定位。接下来是ul里面的细节。 一个ul里面包含着每个li，li里面又包含着a标签，a标签的文本嵌套一个span标签，用来控制右边的圆角自适应。这样不就出来了吗？

可实际在做的时候，你会发现问题多多。。

首先这个图你要怎么去切？从哪里入手？如果切整张图，又不能自适应，我看过一个外国人的一个css导航，就是把导航的各种状态都做成一整张，我把图给贴过来了。

Read the rest of this entry »