[导入]Xhtml第11天:如何制作不用表格的菜单:

1.不用表格的菜单(纵向)
我们先来看菜单的最终效果：

[导入]Xhtml第11天:如何制作不用表格的菜单:

HTML代码

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>什么是网站标准</title>
<style type="text/css">
<!--
#menu {
margin: 15px 20px 0px 15px;  /*定义层的外边框距离*/
padding:15px;    /*定义层的内边框为15px*/
background: #dfdfdf;   /*定义背景颜色*/
color: #666;    /*定义字体颜色*/
border:#fff 2px solid;  /*定义边框为2px白色线条*/
width:160px;    /*定义内容的宽度为160px*/
}

#menu ul {
margin: 0px;
padding: 0px;
border: medium none; /*不显示边框*/
line-height: normal; 
list-style-type: none;

}

#menu li {border-top: #fff 1px solid; margin: 0px;}

#menu li a {
padding:5px 0px 5px 15px;
display: block; 
font-weight: bold; 
background: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; 
width: 100%; 
color: #444; 
text-decoration: none;
}

#menu li a:hover { background: url(images/icon_dot_lmenu2.gif) #c61c18 no-repeat 2px 8px;
color: #fff; }

-->
</style>

</head>

<body>
<div > 
<ul>
<li><a title="网站标准" href="<a href="http://www.w3cn.org/webstandards.html" target="_blank">http://www.w3cn.org/webstandards.html</a>">什么是网站标准</a></li>
<li><a title="标准的好处" href="<a href="http://www.w3cn.org/benefits.html" target="_blank">http://www.w3cn.org/benefits.html</a>">使用标准的好处</a></li>
<li><a title="怎样过渡" href="<a href="http://www.w3cn.org/howto.html" target="_blank">http://www.w3cn.org/howto.html</a>">怎样过渡</a></li>
<li><a title="相关教程" href="<a href="http://www.w3cn.org/tutorial.html" target="_blank">http://www.w3cn.org/tutorial.html</a>">相关教程</a></li>
<li><a title="工具" href="<a href="http://www.w3cn.org/tools.html" target="_blank">http://www.w3cn.org/tools.html</a>">工具</a></li>
<li><a title="资源及链接" href="<a href="http://www.w3cn.org/resources.html" target="_blank">http://www.w3cn.org/resources.html</a>">资源及链接</a></li>
</ul>
</div>

</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

什么是网站标准使用标准的好处怎样过渡相关教程工具资源及链接
通常方法我们至少嵌套2层表格来实现这样的菜单，间隔线采用在td中设置背景色并插入1px高的透明gif图片实现；背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码，你会看到只有如下几句：

<div >

HTML代码

<html>

#submenu ul { 
clear: left; 
margin: 0px; 
padding:0px; 
border: 0px; 
list-style-type: none; 
text-align: center; 
display:inline;
}

#submenu li { 
float: left; 
display: block; 
margin: 0px; 
padding: 0px; 
text-align: center}

#submenu li a { 
display: block; 
padding:2px 3px 2px 3px; 
background: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; 
font-weight: bold; 
width: 100%; 
color: #444; 
text-decoration: none; 
}

#submenu li a:hover { 
background: url(images/icon_dot_lmenu2.gif) #c61c18 no-repeat 2px 8px; 
color: #fff; }

#submenu ul li#one a { width: 60px} 
#submenu ul li#two a { width: 80px} 
#submenu ul li#three a { width: 80px} 
#submenu ul li#four a { width: 90px} 
#submenu ul li#five a { width: 80px} 
#submenu ul li#six a { width: 80px} 
#submenu ul li#seven a { width: 60px} 
#submenu ul li#eight a { width: 90px} 
#submenu ul li#nine a { width: 80px}

-->
</style>

</head>

<body>
<div > 
<ul>
<li >home</a></li>
<li >关于我们</a></li>
<li >网站标准</a></li>
<li >标准的好处</a></li>
<li >怎样过渡</a></li>
<li >相关教程</a></li>
<li >工具</a></li>
<li >资源及链接</a></li>
<li >常见问题</a></li>
</ul>
</div>
</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]