2007-02-26

tabmenu 纵向实现

关键字: menu

参照以上样式做了个简易的纵向菜单

css 代码
 
  1. * {margin:0; padding:0;}
  2. body {font-size:12px; font-family:宋体; color:#666;}
  3. ul {list-style:none;}
  5. img {border:none;}
  7. /* Apply */
  8. .hackbox {clear:both;}
  11. .colaB {width:816px;background:#c3dbf9;}
  12. .colaBa {width:260px; float:left; background:#e1e9f8;}
  13. .colaBb {width:540px; float:rightright; background:#FFFFFF; border-right:16px solid #e1e9f8;}
  15. /* mainfull */
  16. #mainfull{width:816px; margin:0 auto;}
  18. #outsidebar {height: 30px;background: url("../images/logo.gif");border-bottom: 1px #FFF solid;}
  19. /* header */
  20. #header {height: 70px;background: url("../images/bar.gif");}
  21. /* body */
  22. #mainpage {width:816px; }
  28. .nav {width:260; background:url(../images/menu_bg.gif) repeat-x top left;}
  29. .nav h3 a{padding:7px 50px 5px 24px; font-size:14px; color:#FFF; display:block;}
  30. .nav h3 a:hover{ text-decoration:none;}
  31. .systemNav{ margin-top:10px;}
  32. .systemNav ul {padding:10px 20px;}
  33. .systemNav ul li{height:25px;padding-top:10px;}
  34. .systemNav ul li a{padding:7px 50px 5px 50px; height:25px; background:url(../images/new.gif) no-repeat center left;}
  35. .systemNav ul li a:hover{border:1px solid #3c6eef; text-decoration:none;}
  40. #content{ height:400px;}
  42. /* footer */
  43. #footer {
  44. height: 25px;
  45. background: #C3DBF9;
  46. border-top: 1px #F2F7FD solid;
  47. }

html代码1
 
  2. <body>
  3. <div id="mainfull">
  4. <div id="outsidebar">div>
  6. <div id="header">div>
  8. <div id="mainpage">
  9. <div class="colaB">
  10. <div class="colaBa">
  12. <div class="nav">
  13. <h3 ><a href="chara01.html" title="男主角" class="text666">考勤管理a>h3>
  15. div>
  17. <div class="systemNav">
  18. <ul>
  19. <li >
  20. <a href="#"><strong>当天考勤strong>a>
  21. li>
  22. <li >
  23. <a href="#"><strong>请假审批strong>a>
  24. li>
  25. <li >
  26. <a href="#"><strong>考勤统计strong>a>
  27. li>
  28. ul>
  29. div>
  31. <div class="nav">
  32. <h3 ><a href="chara01.html" title="男主角" class="text666">教学管理a>h3>
  33. div>
  37. <div class="nav">
  38. <h3 ><a href="chara02.html" title="女主角" class="text666">家校互通a>h3>
  39. div>
  42. <div class="nav">
  43. <h3 ><a href="chara03.html" title="反派角色" class="text666">系统管理a>h3>
  44. div>
  45. div>
  46. <div class="colaBb">
  47. <div id="content">div>
  48. div>
  49. <div class="hackbox">div>
  50. div>
  51. div>
  54. <div id="footer">div>
  56. div>
  57. body>
  58. html>

效果如下：

当布局位置不同时 存在不小的区别：

第一 主菜单的第一项的宽度难于控制；

第二 主菜单文字内容消失；

html代码2
 
  2. <body>
  3. <div id="mainfull">
  4. <div id="outsidebar">div>
  6. <div id="header">div>
  8. <div id="mainpage">
  9. <div class="colaB">
  10. <div class="colaBa">
  12. <div class="nav">
  13. <h3 ><a href="chara01.html" title="男主角" class="text666">考勤管理a>h3>
  15. <div class="systemNav">
  16. <ul>
  17. <li >
  18. <a href="#"><strong>当天考勤strong>a>
  19. li>
  20. <li >
  21. <a href="#"><strong>请假审批strong>a>
  22. li>
  23. <li >
  24. <a href="#"><strong>考勤统计strong>a>
  25. li>
  26. ul>
  27. div>
  28. div>
  31. <div class="nav">
  32. <h3 ><a href="chara01.html" title="男主角" class="text666">教学管理a>h3>
  33. div>
  37. <div class="nav">
  38. <h3 ><a href="chara02.html" title="女主角" class="text666">家校互通a>h3>
  39. div>
  42. <div class="nav">
  43. <h3 ><a href="chara03.html" title="反派角色" class="text666">系统管理a>h3>
  44. div>
  45. div>
  46. <div class="colaBb">
  47. <div id="content">div>
  48. div>
  49. <div class="hackbox">div>
  50. div>
  51. div>
  54. <div id="footer">div>
  56. div>
  57. body>
  58. html>

评论
nathan.wu 2008-01-24
这个是ie的bug关于li的
解决方法是
生成的
code应该是
</li><li>
<a></a>
</li><li>
liujx2005 2007-05-21
很好的，我大力支持
tiger.passion 2007-02-27
引用

colaB，colaBa，colaBb

布局用的。
其实代码没有什么变化，我就是把
代码

   1. #  <!--考勤管理子菜单-->    
   2. #                     <div class="systemNav">    
   3. #                     <ul>    
   4. #                         <li >    
   5. #                             <a href="#"><strong>当天考勤</strong></a>    
   6. #                         </li>    
   7. #                         <li >    
   8. #                             <a href="#"><strong>请假审批</strong></a>                        
   9. #                         </li>    
  10. #                         <li >    
  11. #                             <a href="#"><strong>考勤统计</strong></a>    
  12. #                         </li>    
  13. #                     </ul>    
  14. #                     </div>    
  15. #                 </div>



这个位置变化了下，嵌在主菜单里就有问题，与主菜单并列放着就没问题。
kj23 2007-02-27
字没有的原因无外乎，你的a float了之后不占文档流位置后，被其它元素遮盖了。

不要急，用排除法
downpour 2007-02-27
用Firebug调试一下，看看哪些CSS被应用了。

你的HTML代码稍微有点乱，colaB，colaBa，colaBb不清楚是用于做什么的。麻烦解释一下。
发表评论

您还没有登录，请登录后发表评论

tiger.passion
搜索本博客
我的相册
636a5d3f-1fce-3bb9-89d8-b13e5c6318d4-thumb
w3c01
共 46 张
存档
最新评论