免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
› 论坛 › 程序设计 › PHP › [CSS] 求：css导航菜单？
12下一页
最近访问板块 发新帖
查看: 2927 | 回复: 11
打印 上一主题 下一主题

[CSS] 求：css导航菜单？ [复制链接]

yxm

论坛徽章:
0
跳转到指定楼层
1楼 [收藏(0)] [报告]
发表于 2005-10-25 12:22 |只看该作者 |倒序浏览
css导航菜单怎么做？
怎么才能保证可以适宜不同的屏幕区域？如800*600，1024*768都能居中正确显示？
谢谢各位
HonestQiao

论坛徽章:
1
技术图书徽章 日期:2013-12-05 23:25:45
2楼 [报告]
发表于 2005-10-25 12:54 |只看该作者

[CSS] 求：css导航菜单？

你可以看看：
http://bbs.chinaunix.net/forum/viewtopic.php?t=629922&show_type=new

这个里面就有针对不同浏览器的处理。

而你也可以才用js来控制针对不同的分辨率的
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
ipaddr

论坛徽章:
0
3楼 [报告]
发表于 2005-10-25 12:58 |只看该作者

[CSS] 求：css导航菜单？

网上很多这样的代码.
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
yxm

论坛徽章:
0
4楼 [报告]
发表于 2005-10-25 16:34 |只看该作者

[CSS] 求：css导航菜单？

我找了一些代码，但是都不如意，主要的问题是，不能居中显示（尽管我加了一些东西）
如以下的东西，怎么才能让他居中显示，上楼请教我
——————————————————

<!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">;
<!--

*{margin=0;padding:0;border:0;}
body {
    font-family: arial, 宋体, serif;
    font-size:12px;
        text-align:center;
}


#nav {
     line-height: 24px;  list-style-type: none; background:#666;margin-left:auto;margin-right:auto;
}

#nav a {
    display: block; width: 80px; text-align:center;
}

#nav a:link  {
    color:#666; text-decoration:none;
}
#nav a:visited  {
    color:#666;text-decoration:none;
}
#nav a:hover  {
    color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
    float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
    background:#999;
}
#nav li ul {
    line-height: 27px;  list-style-type: none;text-align:left;
    left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
    float: left; width: 180px;
    background: #F6F6F6;
}


#nav li ul a{
    display: block; width: 156px;text-align:left;padding-left:24px;
}

#nav li ul a:link  {
    color:#666; text-decoration:none;
}
#nav li ul a:visited  {
    color:#666;text-decoration:none;
}
#nav li ul a:hover  {
    color:#F3F3F3;text-decoration:none;font-weight:normal;
    background:#C00;
}

#nav li:hover ul {
    left: auto;
}
#nav li.sfhover ul {
    left: auto;
}
#content {
    clear: left;
}


-->;
</style>;

<script type=text/javascript>;<!--//-->;<![CDATA[//>;<!--
function menuFix() {
    var sfEls = document.getElementById("nav".getElementsByTagName("li";
    for (var i=0; i<sfEls.length; i++) {
        sfEls.onmouseover=function() {
        this.className+=(this.className.length>;0? " ": "" + "sfhover";
        }
        sfEls.onMouseDown=function() {
        this.className+=(this.className.length>;0? " ": "" + "sfhover";
        }
        sfEls.onMouseUp=function() {
        this.className+=(this.className.length>;0? " ": "" + "sfhover";
        }
        sfEls.onmouseout=function() {
        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b",

"";
        }
    }
}
window.onload=menuFix;

//-->;<!]]>;</script>;

</head>;
<body>;


<ul id="nav">;
<li>;<a href="#">;产品介绍</a>;
    <ul>;
    <li>;<a href="#">;产品一</a>;</li>;
    <li>;<a href="#">;产品一</a>;</li>;
    <li>;<a href="#">;产品一</a>;</li>;
    <li>;<a href="#">;产品一</a>;</li>;
    <li>;<a href="#">;产品一</a>;</li>;
    <li>;<a href="#">;产品一</a>;</li>;
    </ul>;
</li>;
<li>;<a href="#">;服务介绍</a>;
    <ul>;
    <li>;<a href="#">;服务二</a>;</li>;
    <li>;<a href="#">;服务二</a>;</li>;
    <li>;<a href="#">;服务二</a>;</li>;
    <li>;<a href="#">;服务二服务二</a>;</li>;
    <li>;<a href="#">;服务二服务二服务二</a>;</li>;
    <li>;<a href="#">;服务二</a>;</li>;
    </ul>;
</li>;
<li>;<a href="#">;成功案例</a>;
    <ul>;
    <li>;<a href="#">;案例三</a>;</li>;
    <li>;<a href="#">;案例</a>;</li>;
    <li>;<a href="#">;案例三案例三</a>;</li>;
    <li>;<a href="#">;案例三案例三案例三</a>;</li>;
    </ul>;
</li>;
<li>;<a href="#">;关于我们</a>;
    <ul>;
    <li>;<a href="#">;我们四</a>;</li>;
    <li>;<a href="#">;我们四</a>;</li>;
    <li>;<a href="#">;我们四</a>;</li>;
    <li>;<a href="#">;我们四111</a>;</li>;
    </ul>;
</li>;

<li>;<a href="#">;在线演示</a>;
    <ul>;
    <li>;<a href="#">;演示</a>;</li>;
    <li>;<a href="#">;演示</a>;</li>;
    <li>;<a href="#">;演示</a>;</li>;
    <li>;<a href="#">;演示演示演示</a>;</li>;
    <li>;<a href="#">;演示演示演示</a>;</li>;
    <li>;<a href="#">;演示演示</a>;</li>;
    <li>;<a href="#">;演示演示演示</a>;</li>;
    <li>;<a href="#">;演示演示演示演示演示</a>;</li>;
    </ul>;
</li>;
<li>;<a href="#">;联系我们</a>;
    <ul>;
    <li>;<a href="#">;联系联系联系联系联系</a>;</li>;
    <li>;<a href="#">;联系联系联系</a>;</li>;
    <li>;<a href="#">;联系</a>;</li>;
    <li>;<a href="#">;联系联系</a>;</li>;
    <li>;<a href="#">;联系联系</a>;</li>;
    <li>;<a href="#">;联系联系联系</a>;</li>;
    <li>;<a href="#">;联系联系联系</a>;</li>;
    </ul>;
</li>;

</ul>;

</body>;
</html>;
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
HonestQiao

论坛徽章:
1
技术图书徽章 日期:2013-12-05 23:25:45
5楼 [报告]
发表于 2005-10-25 18:02 |只看该作者

[CSS] 求：css导航菜单？

  1. <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">;
  5. <head>;
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />;
  7. <title>;css菜单演示</title>;


  10. <style type="text/css">;
  11. <!--

  13. *{margin=0;padding:0;border:0;}
  14. body {
  15.    font-family: arial, 宋体, serif;
  16.    font-size:12px;
  17. text-align:center;
  18. }


  21. #nav {
  22.     line-height: 24px;  list-style-type: none; background:#666;margin-left:auto;margin-right:auto;
  23. }

  25. #nav a {
  26.    display: block; width: 80px; text-align:center;
  27. }

  29. #nav a:link  {
  30.    color:#666; text-decoration:none;
  31. }
  32. #nav a:visited  {
  33.    color:#666;text-decoration:none;
  34. }
  35. #nav a:hover  {
  36.    color:#FFF;text-decoration:none;font-weight:bold;
  37. }

  39. #nav li {
  40.    float: left; width: 80px; background:#CCC;
  41. }
  42. #nav li a:hover{
  43.    background:#999;
  44. }
  45. #nav li ul {
  46.    line-height: 27px;  list-style-type: none;text-align:left;
  47.    left: -999em; width: 180px; position: absolute;
  48. }
  49. #nav li ul li{
  50.    float: left; width: 180px;
  51.    background: #F6F6F6;
  52. }


  55. #nav li ul a{
  56.    display: block; width: 156px;text-align:left;padding-left:24px;
  57. }

  59. #nav li ul a:link  {
  60.    color:#666; text-decoration:none;
  61. }
  62. #nav li ul a:visited  {
  63.    color:#666;text-decoration:none;
  64. }
  65. #nav li ul a:hover  {
  66.    color:#F3F3F3;text-decoration:none;font-weight:normal;
  67.    background:#C00;
  68. }

  70. #nav li:hover ul {
  71.    left: auto;
  72. }
  73. #nav li.sfhover ul {
  74.    left: auto;
  75. }
  76. #content {
  77.    clear: left;
  78. }


  81. -->;
  82. </style>;

  84. <script type=text/javascript>;<!--//-->;<![CDATA[//>;<!--
  85. function menuFix() {
  86.    var sfEls = document.getElementById("nav").getElementsByTagName("li");
  87.    for (var i=0; i<sfEls.length; i++) {
  88.        sfEls[i].onmouseover=function() {
  89.        this.className+=(this.className.length>;0? " ": "") + "sfhover";
  90.        }
  91.        sfEls[i].onMouseDown=function() {
  92.        this.className+=(this.className.length>;0? " ": "") + "sfhover";
  93.        }
  94.        sfEls[i].onMouseUp=function() {
  95.        this.className+=(this.className.length>;0? " ": "") + "sfhover";
  96.        }
  97.        sfEls[i].onmouseout=function() {
  98.        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

  100. "");
  101.        }
  102.    }
  103. }

  105. window.onload=menuFix;

  107. //-->;<!]]>;</script>;

  109. </head>;
  110. <body>;

  112. <center>;
  113. <table name=tt id=tt align=center width=0 border=0>;
  114. <tr>;<td>;
  115. <ul id="nav">;
  116. <li>;<a href="#">;产品介绍</a>;
  117.    <ul>;
  118.    <li>;<a href="#">;产品一</a>;</li>;
  119.    <li>;<a href="#">;产品一</a>;</li>;
  120.    <li>;<a href="#">;产品一</a>;</li>;
  121.    <li>;<a href="#">;产品一</a>;</li>;
  122.    <li>;<a href="#">;产品一</a>;</li>;
  123.    <li>;<a href="#">;产品一</a>;</li>;
  124.    </ul>;
  125. </li>;
  126. <li>;<a href="#">;服务介绍</a>;
  127.    <ul>;
  128.    <li>;<a href="#">;服务二</a>;</li>;
  129.    <li>;<a href="#">;服务二</a>;</li>;
  130.    <li>;<a href="#">;服务二</a>;</li>;
  131.    <li>;<a href="#">;服务二服务二</a>;</li>;
  132.    <li>;<a href="#">;服务二服务二服务二</a>;</li>;
  133.    <li>;<a href="#">;服务二</a>;</li>;
  134.    </ul>;
  135. </li>;
  136. <li>;<a href="#">;成功案例</a>;
  137.    <ul>;
  138.    <li>;<a href="#">;案例三</a>;</li>;
  139.    <li>;<a href="#">;案例</a>;</li>;
  140.    <li>;<a href="#">;案例三案例三</a>;</li>;
  141.    <li>;<a href="#">;案例三案例三案例三</a>;</li>;
  142.    </ul>;
  143. </li>;
  144. <li>;<a href="#">;关于我们</a>;
  145.    <ul>;
  146.    <li>;<a href="#">;我们四</a>;</li>;
  147.    <li>;<a href="#">;我们四</a>;</li>;
  148.    <li>;<a href="#">;我们四</a>;</li>;
  149.    <li>;<a href="#">;我们四111</a>;</li>;
  150.    </ul>;
  151. </li>;

  153. <li>;<a href="#">;在线演示</a>;
  154.    <ul>;
  155.    <li>;<a href="#">;演示</a>;</li>;
  156.    <li>;<a href="#">;演示</a>;</li>;
  157.    <li>;<a href="#">;演示</a>;</li>;
  158.    <li>;<a href="#">;演示演示演示</a>;</li>;
  159.    <li>;<a href="#">;演示演示演示</a>;</li>;
  160.    <li>;<a href="#">;演示演示</a>;</li>;
  161.    <li>;<a href="#">;演示演示演示</a>;</li>;
  162.    <li>;<a href="#">;演示演示演示演示演示</a>;</li>;
  163.    </ul>;
  164. </li>;
  165. <li>;<a href="#">;联系我们</a>;
  166.    <ul>;
  167.    <li>;<a href="#">;联系联系联系联系联系</a>;</li>;
  168.    <li>;<a href="#">;联系联系联系</a>;</li>;
  169.    <li>;<a href="#">;联系</a>;</li>;
  170.    <li>;<a href="#">;联系联系</a>;</li>;
  171.    <li>;<a href="#">;联系联系</a>;</li>;
  172.    <li>;<a href="#">;联系联系联系</a>;</li>;
  173.    <li>;<a href="#">;联系联系联系</a>;</li>;
  174.    </ul>;
  175. </li>;

  177. </ul>;
  178. </td>;</tr>;</table>;
  179. </center>;
  180. </body>;
  181. </html>;
复制代码
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
yxm

论坛徽章:
0
6楼 [报告]
发表于 2005-10-25 22:36 |只看该作者

[CSS] 求：css导航菜单？

斑竹,你想说什么?
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
jhsea3do

论坛徽章:
0
7楼 [报告]
发表于 2005-10-25 22:51 |只看该作者

[CSS] 求：css导航菜单？

table layout is ugly!!!


楼主没有居中的原因是你没有设置nav容器的宽度

只需要加入如下代码在nav的css代码中

width: 500px;

我用了500px，其实你只要大于6个导航按钮的总宽度即可
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
jhsea3do

论坛徽章:
0
8楼 [报告]
发表于 2005-10-25 22:53 |只看该作者

[CSS] 求：css导航菜单？

另外纠正你一个错误

background:#666;

应该写为

background-color:#666;
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
yxm

论坛徽章:
0
9楼 [报告]
发表于 2005-10-25 23:59 |只看该作者

[CSS] 求：css导航菜单？

感谢以上两位,居中的问题已经解决,现在的问题是:二级菜单的位置和一级位置不对应,不知道怎么解决?
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
jhsea3do

论坛徽章:
0
10楼 [报告]
发表于 2005-10-26 22:01 |只看该作者

[CSS] 求：css导航菜单？

这个我查不出

可能是ie的float bug造成的，因为在我的fx下看起来是正常的
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号：11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们：huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP