<style type="text/css">
.menu1{ border:1px solid #CCCCCC; height:40px;}
.menu1 ul { margin:0px; list-style:none; padding:0px;}
.menu1 ul li{ float:left; height:40px; line-height:40px;text-align:center; background:#F3F3F3; margin-right:2px;}
.menu1 ul li a{ display: inline-block; text-decoration:none ; font-size:12px; padding:0px 10px;}
.menu1 ul li a:hover{ background:#CC0000; color:#FFFFFF }
.menu2{ border:1px solid #CCCCCC; height:40px;}
.menu2 ul { margin:0px; list-style:none; padding:0px;}
.menu2 ul li{ float:left; height:40px; line-height:40px; width:150px; text-align:center; background:#F3F3F3; margin-right:2px;}
.menu2 ul li a{ display:block; text-decoration:none ; font-size:12px ;
.menu2 ul li a:hover{ background:#CC0000; color:#FFFFFF }
</style>
<p>菜单一不固定宽度</p>
<div class="menu1">
</div>
<p> </p>
<p>菜单二固定宽度</p>
<div class="menu2">
</div>
本文介绍了一种使用CSS实现的导航菜单设计方法,包括不固定宽度和固定宽度两种类型的菜单样式。通过具体的HTML和CSS代码示例展示了如何设置菜单项的布局、样式以及悬停效果。
409

被折叠的 条评论
为什么被折叠?



