CSS3+Html5做一个导航栏的效果,如图

html-css013

CSS3+Html5做一个导航栏的效果,如图,第1张

不需要CSS3+HTML5,用AJAX+DIV+CSS就可以了。

利用AJAX取得未读数据的数量,把DIV的innerHTML设为该数量就行了,另外这是一个DIV(或则其他块元素)中嵌入的一个相对定位层。所以没必要去使用CSS3和HTML5,毕竟国内主要浏览器都不支持。现在支持CSS3和HTML5的浏览器就只有最新的浏览器(如IE9、opera、safari、FF等等)

css定义一条导航栏

首先建立一个DIV,为其命名为“nav”,在DIV中建立一个<ul>无序列表,导航共有几个栏目,就为列表添加几个<li>的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面。

然后设置CSS样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:

ul {width:宽度值;height:高度值; list-style:none;}

如果是横向导航,还需为里面的列表项<li>标签设置左浮动的样式,代码为:li {float:left}

每个栏目之间分隔的距离可通过margin(外边距)属性来设置。

导航条的更多样式及详细步骤可去这里参考http://jingyan.baidu.com/article/da1091fb05fe93027849d600.html