您现在的位置： 网页制作教程网 >> 网页设计 >> 网页布局排版 >> 文章正文

2.不用表格的菜单(横向)

上面是纵向的菜单,如果要显示横向菜单，用li也可以吗？当然是可以的，下面给出代码，效果就在本页顶部:

页面代码

以下是引用片段：

<divid="submenu">

<ul>

<liid="one"><atitle="首页"href="http://www.w3cn.org/">Home</a></li>

<liid="two"><atitle="关于我们"href="http://www.w3cn.org/aboutus.html">关于我们</a></li>

<liid="three"><atitle="网站标准"href="http://www.w3cn.org/webstandards.html">网站标准</a></li>

<liid="four"><atitle="标准的好处"href="http://www.w3cn.org/benefits.html">标准的好处</a></li>

<liid="five"><atitle="怎样过渡"href="http://www.w3cn.org/howto.html">怎样过渡</a></li>

<liid="six"><atitle="相关教程"href="http://www.w3cn.org/tutorial.html">相关教程</a></li>

<liid="seven"><atitle="工具"href="http://www.w3cn.org/tools.html">工具</a></li>

<liid="eight"><atitle="资源及链接"href="http://www.w3cn.org/resources.html">资源及链接</a></li>

<liid="nine"><atitle="常见问题"href="http://www.w3cn.org/faq.html">常见问题</a></li>

</ul>

</div>

样式表代码

以下是引用片段：

#submenu{

MARGIN:0px8px0px8px;

PADDING:4px0px0px0px;

BORDER:#fff1pxsolid;

BACKGROUND:#dfdfdf;

COLOR:#666;

HEIGHT:25px;}

#submenuul{

CLEAR:left;

MARGIN:0px;

PADDING:0px;

BORDER:0px;

LIST-STYLE-TYPE:none;

TEXT-ALIGN:center;

DISPLAY:inline;

}

#submenuli{

FLOAT:left;

DISPLAY:block;

MARGIN:0px;

PADDING:0px;

TEXT-ALIGN:center}

#submenulia{

DISPLAY:block;

PADDING:2px3px2px3px;

BACKGROUND:url(images/icon_dot_lmenu.gif)transparentno-repeat2px8px;

FONT-WEIGHT:bold;

WIDTH:100%;

COLOR:#444;

TEXT-DECORATION:none;

}

#submenulia:hover{

BACKGROUND:url(images/icon_dot_lmenu2.gif)#C61C18no-repeat2px8px;

COLOR:#fff;}

#submenuulli#oneA{WIDTH:60px}

#submenuulli#twoA{WIDTH:80px}

#submenuulli#threeA{WIDTH:80px}

#submenuulli#fourA{WIDTH:90px}

#submenuulli#fiveA{WIDTH:80px}

#submenuulli#sixA{WIDTH:80px}

#submenuulli#sevenA{WIDTH:60px}

#submenuulli#eightA{WIDTH:90px}

#submenuulli#nineA{WIDTH:80px}

以上代码不逐一分析了。横向菜单的关键在于：定义<li>样式时的 "FLOAT: left;"语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔。好了，你也可以动手试试，用li实现各种各样的菜单样式。

上一页  [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] 下一页