今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query。具体可以查看浅谈响应式布局这篇文章，这里就不花费大量的篇幅介绍了，主要看一下这个导航条该怎么做。
另外需要提到的是，ie6-ie8是不支持CSS3的Media Query的，因此对于ie6-ie8我们需要特殊处理，就让他们保持默认样式，这对于布局及样式上都要考虑到这一点。
首先看一下布局这一块，html代码如下：
| 1234567891011121314151617181920212223242526 | <div class="navBar"><div class="nav"><ul id="menu"><li class="current"><a href="#">首页</a></li><li><a href="#">电影</a></li><li><a href="#">电视剧</a></li><li><a href="#">动漫</a></li><li><a href="#">综艺</a></li><li><a href="#">纪录片</a></li><li><a href="#">公开课</a></li></ul><p class="hot"><a href="#">钢铁侠3</a><a href="#">中国合伙人</a><a href="#">盛夏晚晴天</a><a href="#">陆贞传奇</a></p><!--判断浏览器是否是IE9,IE10或者是非IE浏览器--><!--[if (gt IE 8) | !(IE)]><!--><h1 class="title" id="title"><a href="#">风驰网</a><span class="btn" id="btn"></span></h1><!--<![endif]--></div>
|
