如何使用css,布局横向导航栏

html-css06

如何使用css,布局横向导航栏,第1张

如果是导航菜单可以使用ul无需列表来制作

同时使用CSS中的float:left来控制li靠左浮动即可实现横向菜单

注意UL或UL的父级容器宽度必须大于所有li宽度的和

例如<style>ul {padding:0margin:0list-style:nonewidth:600pxheight:50pxline-height:50pxtext-align:center}ul li {width:100pxheight:50pxfloat:left}<style><ul><li>菜单项目1</li><li>菜单项目2</li><li>菜单项目3</li><li>菜单项目4</li><li>菜单项目5</li><li>菜单项目6</li><ul>

有两种思路。解决

第一种:通过判断当前的页面的分类ID和每个菜单的ID进行对比,哪个菜单的ID等于当前页面的分类ID。。那么给其添加一个CLASS让其样式发生变化。。这种方法需要PHP ASP .NET等WEB服务器脚本辅助实现。

第二种:就是通过纯CSS实现。。简单点说就是给每个菜单进点击进入的页面的body元素各添加一个class.然后通过CSS层叠样式表定义其页面击后的效果。示例如下

如果是产品介绍的页面那么body元素添加一个样式<body class=“product”>

介绍页面呢给body元素再添加另一个样式<body class='about'>

其他页面以此类推

然后在样式表中这样定义点击后的页面的样式

/*定义菜单的初始样式*/

.menu li a{display:blockwidth:80pxheight:30pxbackground:greenfloat:left}

/*定义当前页面对应的菜单样式*/

body.product .menu li a,body.about .menu li a{display:blockwidth:100%height:100%background:red}

这样你进入产品介绍 和 公司介绍页面之后对应的CSS生效对应的菜单背景颜色会变红。。点进去变红。其他菜单还是初始样式。。

其实第二种比较麻烦。因为分别定义body加class那部分。。或者你用服务器脚本动态生成lclass 。也行。。但相比第一种还是麻烦了许多。

如果对您有帮助。还望采纳。谢谢。

dreamweaver cs3以上版本,带有这样一个功能,插入->Spry->Spry菜单栏,自动生成一个导航菜单,JS和CSS自动保存,可设置三级菜单,如果CSS比较熟悉,可根据版面修改CSS到达你要的效果。