学习CSS制作网页菜单举一反三-(0)

时间:2012-12-29 08:41来源:未知作者:admin 点击: 次

分享到：

举一：运行代码框 !DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"headmeta http-equiv="Content-Type" conten

举一：

运行代码框

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css">  </style> <script type=text/javascript><![CDATA[//><!]]></script> </head> <body> <ul id="nav"> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品介绍</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务介绍</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二服务二服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">成功案例</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三案例三</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三案例三案例三</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">关于我们</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四111</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">在线演示</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示演示演示</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系我们</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>

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

反三：

变成水平方向

运行代码框

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css">  </style> <script type=text/javascript><![CDATA[//><!]]></script> </head> <body> <ul id="nav"> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品介绍</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务介绍</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二服务二服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">成功案例</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三案例三</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三案例三案例三</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">关于我们</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四111</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">在线演示</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示演示演示</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系我们</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>

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

弹簧式

运行代码框

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css">  </style> <script type=text/javascript><![CDATA[//><!]]></script> </head> <body> <ul id="nav"> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品介绍</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务介绍</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二服务二服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">成功案例</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三案例三</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三案例三案例三</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">关于我们</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四111</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">在线演示</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示演示演示演示</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系我们</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>

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

二级菜单为水平的

运行代码框

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css">  </style> <script type=text/javascript><![CDATA[//><!]]></script> </head> <body> <ul id="nav"> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品介绍</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务介绍</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二服</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二服</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">成功案例</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三案</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三案</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">关于我们</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四111</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">在线演示</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系我们</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> </ul> </li> </ul> </body> </html>

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

还有一种

运行代码框

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css">  </style> <script type=text/javascript><![CDATA[//><!]]></script> </head> <body> <ul id="nav"> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品介绍</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">产品一</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务介绍</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二服</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二服</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">服务二</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">成功案例</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三案</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">案例三案</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">关于我们</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">我们四111</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">在线演示</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">演示演示</a></li> </ul> </li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系我们</a> <ul> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> <li><a href=http://www.webjx.com/htmldata/2006-06-24/"#">联系联系</a></li> </ul> </li> </ul> </body> </html>

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

上一篇：CSS有关表格边框的语法汇总-(0)
下一篇：CSS实现星级评分III-(0)

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

BS项目中的

css实现气泡

精彩文章

热点文章

学习CSS制作网页菜单举一反三-(0)

热门标签

赞助商链接