css中menu是什么

html-css07

css中menu是什么,第1张

把这个导航栏单独做一个html文件；如：menu.html

然后用iframe加载这个文件；

方法为：

<iframe src="menu.html">

</iframe>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">.menu{border:solid 1px bluewidth:140pxfont-size:16pxpadding:5pxmargin:0 auto}.menu a{display:blocktext-align:centercolor:redwidth:130pxheight:1.5empadding:4pxtext-decoration:noneposition:relative}.menu span{display:blockborder-style:solidborder-width:8pxoverflow:hiddenposition:absolutetop:4pxwidth:0pxheight:0pxoverflow:hidden}.menu a:link span{display:none}.menu a:hover span.left{display:blockborder-color:whiteborder-left-color:blackleft:8px}.menu a:hover span.right{display:blockborder-color:whiteborder-right-color:blackright:8px} http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 我改了一下，在IE7和FF3下测试通过，不知道是不是你要的效果，如果有出入的话我们可以再交流。

一般当前高亮都是后台程序判断实现的，不是css做的，要用css做也行，只是麻烦点，要给每个栏目的<body>加上ID，这样做造成的麻烦是弄后台程序的时候不能把<body>这行直接写入页头包含文件之中：

下面代码每个body都有自己的ID来识别当前是什么栏目，导航栏每个li也加了class：

------------首页html------------

<body id="home">

<div class="menu">

<ul>

<li class="home"><a>首页</a></li>

<li class="about"><a>介绍</a></li>

<li class="news"><a>新闻</a></li>

<li class="job"><a>招聘</a></li>

</ul>

</div>

</body>

------------介绍页html------------

<body id="about">

...

</body>

------------新闻页html------------

<body id="news">

...

</body>

===============

Css code：

===============

/*导航按钮的默认样式*/

.menu li a{color:#000}

/*当前栏目高亮样式*/

#home .menu .home a ,

#about .menu .about a ,

#news .menu .news a ,

#job .menu .job a{color:red}