我们用CSS写网页导航菜单时不可避免得需要大量重复的写一些代码，这就影响了我们的时间是效率，那么用这个导航菜单自动生成软件可以帮助我们高效地生成各式各样的导航条而且兼容性也不错。
CSS Tab Designer操作简单，很容易上手。主界面共三列，如图：
Items列为你要添加的导航条项目。点击“+”就可以添加。
Tab Styles为导航条的样式，这个软件给我们提供了好多样式，你可以任意选择一款你喜欢的。
Preview为最终效果预览图，如果感觉不错就可以点击“Generate HTML & Images”导出html和素材文件。
OK！有了Tab Designer你就能轻松搞定一切的导航条了。
注意：如果导航条内容有中文的话请在Preview列中点右键选择网页编码为”GB2312”即可正常预览。
无意中发现一个很不错的网站，应该是一位叫Spiffy的设计师做的网页。该网页可以根据你的需要自动生成纯CSS圆角代码。大家有兴趣的可以去看看哦。
地址：http://www.spiffycorners.com/index.php
小提示：要在他给出的CSS代码中额外加上一条重置代码如*{ margin:0; padding:0 }才行，要兼容IE的话要给”class name”加上overflow:hidden哦。.
其实这个效果的制作思路在以前的文章纯CSS图片切换效果中提到过，这次做了些拓展。让它成为流行的选项卡效果。当然这个效果也可以用JS实现，也是介绍过的，只用到了几句很简单的JavaScript就可以实现。
先看最终效果图：
由于是纯CSS实现的在载入速度和效率方面应该是最快的，所以很广泛的应用于信息类网站。这次就不多解释了，直接上效果：
CSS条件注释是一微软从IE5开始就提供的一种非标准逻辑语句，作用是可以灵活的为不同IE版本浏览器导入不同html元素，如：样式表，html标签等。很显然这种方法的最大好处就在于属于微软官方给出的兼容解决办法而且还能通过W3C的效验。
总结一下通用的语法是这样的（注意红色部分）：
<!--[ if rang IE no]> ...... <![ endif ]-->
“rang”的取值有以下几种：
“no”即表示IE的具体版本号，如：5,6,7,8
“……”省略号表示在以上条件下显示出来的html代码，如:
<!--[ if lte IE 6]> <style type="text/css"> body{ text-align:center; } </style> <![ endif ]-->
这条代码表示：在IE6以下版本的浏览器中body元素的文字对齐方式为居中。
使用缩写的代码行式自然有很多好处：如加快代码输入速度，减少CSS文件大小，便于阅读等。那好吧我们研究一下。大概总结了四种：
关于边框如：
可以简写成：
border:1px solid #f00;
关于margin或padding如：