tabmenu 纵向实现

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

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

html代码1
 
  1. <body>
  2. <div id="mainfull">
  3. <div id="outsidebar"><!---->div>
  4. <!---->
  5. <div id="header"><!---->div>
  6. <!---->
  7. <div id="mainpage">
  8. <div class="colaB">
  9. <div class="colaBa">
  10. <!---->
  11. <div class="nav">
  12. <h3 ><a href="chara01.html" title="男主角" class="text666">考勤管理<!---->a><!---->h3>
  13. <!---->div>
  14. <!---->
  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. <!---->
  29. <div class="nav">
  30. <h3 ><a href="chara01.html" title="男主角" class="text666">教学管理<!---->a><!---->h3>
  31. <!---->div>
  32. <!---->
  33. <div class="nav">
  34. <h3 ><a href="chara02.html" title="女主角" class="text666">家校互通<!---->a><!---->h3>
  35. <!---->div>
  36. <!---->
  37. <div class="nav">
  38. <h3 ><a href="chara03.html" title="反派角色" class="text666">系统管理<!---->a><!---->h3>
  39. <!---->div>
  40. <!---->div>
  41. <div class="colaBb">
  42. <div id="content"><!---->div>
  43. <!---->div>
  44. <div class="hackbox"><!---->div>
  45. <!---->div>
  46. <!---->div>
  47. <!---->
  48. <div id="footer"><!---->div>
  49. <!---->
  50. <!---->div>
  51. <!---->body>
  52. <!---->html>

效果如下:

tabmenu 纵向实现_第1张图片

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

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

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

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

tabmenu 纵向实现_第2张图片

你可能感兴趣的:(html,css,Firebug,IE)