斜角菜单3例
近日遇到一个斜角菜单，以前还真没接触过，于是花点时间捣鼓了下，写了3个DEMO。
固定宽的斜角菜单
宽度自适应的斜角菜单
便签式宽度自适应斜角菜单
分类日志: 前端代码
包头信息门户导航菜单
这是参照主流的门户导航样式给包头信息网写的。我写的代码尽量没使用图片来分隔分类菜单。而是给li用的border-right:1px dashed #ccc,经过调整了行距，看起来上下两条边框象是一条似得。效果还不错。兼容IE系列和FF。当然如果想要精确效果可以用背景图片来控制，我的例子仅供参考。请运行代码后查看效果!
<style>
*{padding:0px;margin:0px;list-style:none;}
.nav{width:558px;height:56px;font-size:12px;border:1px solid #ccc;margin:20px}
.nav ul{margin:6px 0 0;}
.nav ul li{float:left;width:175px;border-right:1px dashed #ccc;padding:0 4px 0 6px;line-height:23px;}
.nav ul li a{padding:2px 3px 0;color:#666;margin:0 3px;text-decoration:none}
.nav ul .noborder{border:none}
.nav ul li a:hover{color:#fff;background:#ff5500;}
.nav ul li .b{font-weight:bold;}
</style>
<body>
<div class="nav">
<ul>
<li><a href="#" class="b">包头资讯</a><a href="#">本地</a><a href="#">市政</a><a href="#">百姓</a></li>
<li><a href="#" class="b">包头生活</a><a href="">餐饮</a><a href="">消费</a><a href="">读书</a></li>
<li class="noborder"><a href="#" class="b">包头企业</a><a href="">商家</a><a href="">问吧</a><a href="#">圈子</a></li>
<li><a href="#" class="b">分类信息</a><a href="#">二手</a><a href="#">房产</a><a href="#">交友</a></li>
<li><a href="#" class="b">包头风采</a><a href="">鹿城</a><a href="">旅游</a><a href="">地图</a></li>
<li class="noborder"><a href="#" class="b">包头专题</a><a href="">会员</a><a href="">论坛</a><a href="">家园</a></li>
</ul>
</div>
</body>
WY纵向循环切换焦点区域
门户近来比较流行的一种TAB切换,版式上左面是一块大的焦点区域，一般是放一张吸引人眼球的图片。右面则是现实与图片关联的标题。自动纵向顺序切换TAB内容，当然鼠标经过任何一个右边的标题，左边会跳到与之相关联的焦点区域。
IE和FF背景图片居中的偏移差异
今天在做公司的一个企业站，用的是一个左右有固定宽度阴影的图片做大背景。让中间的内容部分看起来很充实很有质感，这也是企业站常用的设计方法。记得在刚学网页用TABLE布局的时候就弄过这样的页面。过去基本不会考虑浏览器尺寸和兼容性的问题，所以几乎很快就做好了。在考虑浏览器兼容和分辨率大小的情况下，用XHMTL布局就发现了这样的差异：IE和FF对大背景图片居中的解释居然不同,其它浏览器则和IE的显示相同。在消除了hmtl、body、div等的默认属性后，我开始这样写：
body{background:#f3f3f3 url(../images/bg.gif) repeat-y center;}
按照这样的描述，背景图片是随分辨率和窗口的大小的改变后居中显示。可是我发现在IE中是正常的，FF下却明显的偏移了2px。开始我以为是IE和FF解释的容器宽度不同导致的，但无论我如何更改容器宽度，在FF下，容器的边和背景始终贴不到一起。添加属性overflow:hidden也不可以。于是我又修改了写法：
html{background:#f3f3f3 url(../images/bg.gif) repeat-y center;}
显示不正常，尝试添加属性overflow:hidden后，显示居然一致了。当然，你也知道添加了overflow:hidden就不会出滚动条了，所以这还不是解决办法。尝试写overflow-x:hidden;overflow-y:auto这样也不行。所以，问题就在宽度解释上。
我又尝试在body下套一个大容器来包住所有内容。
.page{background:#f3f3f3 url(../images/bg.gif) repeat-y center;}
当然这样依旧不正常，我只好给容器设置一个宽度，然后margin:0 auto使其居中显示。哈哈，终于成功了。
看来，写了宽度以后，各浏览器的解释才会有共同结论。但是，如果页面左右的效果超过了1004px，那就会出现难看的横向滚动条了。所以，本人总结以下两点：
- 页面宽度要为左右阴影预留足够宽度。就目前主流来讲，宽度不要超过1004（17纯平下的宽度1024px减去滚动条的宽度）。目前网页的宽度流行尺寸为950和960。所以页面外左右的效果大约各在20px－25px之间展示。
- 在背景上做文章，做可以平铺的背景就不存在这个问题了;或者在页面的背景色和页面外的图片背景过渡均匀也没不会带来麻烦。（可查看各大网站的BLOG模板背景效果）
仿Facebook自动圆角头像
Facebook最近改版了，突然发现在朋友的头像列表里都是圆角的图片。保存后看到的却是一张直角的图。而最近有朋友也翻译了一篇老外的关于PNG透明背景的文章。于是摘出来效果以供学习。查看了一下它的源文件，结构嵌套达10多层，怪吓人的哦。也看到了这种所谓的圆角效果，其原理就是在图片上用span绝对定位一个圆角效果的透明PNG图片，遮罩后恰恰是我们可以看到的圆角效果了。当然只要修改PNG图片，可是加各种印花效果了。当然不要忘记了老朋友IE6下PNG的不透明问题，如果浏览器低于IE7,则使用一个HTC来修正吧。
自动循环切换Tab选项卡
Tab切换的应用已经很广泛了，通过设置display:none和display:block来实现内容的隐藏和显示。而想实现TAB的自动循环切换的话，就需要写一段循环控制切换，ScrollTime是控制切换间隔时间的，单位是毫秒，使用时可以酌情设置，一般设置值大概是5000。
点击查看演示auto-change-tabs
CSS Sprites之宽度自适应菜单
CSS Sprites的应用已经非常广泛，初衷是为了减少对服务器的请求数，将图片拼合在一张图上，不同Class通过不同的坐标值来显示需要的图片块。下面是某大型网站的Menu,图片设置宽一点，为分类名的宽度预留足够的宽度。然后我们的不管分类名多少，宽度始终是自适应的。li左浮动显示居左的图，Span左浮动显示居右的图，所有我们始终都会看到完整的背景左右边。当然，一般的分类名都不会很长，所有我们只要预留大约10个字左右的宽度足矣。
点击查看CSS Sprites之宽度自适应菜单