tabmenu 纵向实现

tiger.passion

浏览: 282431 次
性别:
来自: 上海

最近访客更多访客>>

wwwdai

bluoy

xuyijun008

namuhan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML/CSS

HTML CSS Firebug IE

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

css 代码

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

html代码1

<body>
<div id="mainfull">
<div id="outsidebar">div>
<div id="header">div>
<div id="mainpage">
<div class="colaB">
<div class="colaBa">
<div class="nav">
<h3 ><a href="chara01.html" title="男主角" class="text666">考勤管理a>h3>
div>
<div class="systemNav">
<ul>
<li >
<a href="#"><strong>当天考勤strong>a>
li>
<li >
<a href="#"><strong>请假审批strong>a>
li>
<li >
<a href="#"><strong>考勤统计strong>a>
li>
ul>
div>
<div class="nav">
<h3 ><a href="chara01.html" title="男主角" class="text666">教学管理a>h3>
div>
<div class="nav">
<h3 ><a href="chara02.html" title="女主角" class="text666">家校互通a>h3>
div>
<div class="nav">
<h3 ><a href="chara03.html" title="反派角色" class="text666">系统管理a>h3>
div>
div>
<div class="colaBb">
<div id="content">div>
div>
<div class="hackbox">div>
div>
div>
<div id="footer">div>
div>
body>
html>

效果如下：

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

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

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

html代码2

<body>
<div id="mainfull">
<div id="outsidebar">div>
<div id="header">div>
<div id="mainpage">
<div class="colaB">
<div class="colaBa">
<div class="nav">
<h3 ><a href="chara01.html" title="男主角" class="text666">考勤管理a>h3>
<div class="systemNav">
<ul>
<li >
<a href="#"><strong>当天考勤strong>a>
li>
<li >
<a href="#"><strong>请假审批strong>a>
li>
<li >
<a href="#"><strong>考勤统计strong>a>
li>
ul>
div>
div>
<div class="nav">
<h3 ><a href="chara01.html" title="男主角" class="text666">教学管理a>h3>
div>
<div class="nav">
<h3 ><a href="chara02.html" title="女主角" class="text666">家校互通a>h3>
div>
<div class="nav">
<h3 ><a href="chara03.html" title="反派角色" class="text666">系统管理a>h3>
div>
div>
<div class="colaBb">
<div id="content">div>
div>
<div class="hackbox">div>
div>
div>
<div id="footer">div>
div>
body>
html>

分享到：

一种趋势 | 重新认识javascript

2007-02-26 23:54
浏览 2856
评论(5)
查看更多

5 楼 nathan.wu 2008-01-24

这个是ie的bug关于li的
解决方法是
生成的
code应该是
</li><li>
<a></a>
</li><li>

4 楼 liujx2005 2007-05-21

很好的，我大力支持

3 楼 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>

这个位置变化了下，嵌在主菜单里就有问题，与主菜单并列放着就没问题。

2 楼 kj23 2007-02-27

字没有的原因无外乎，你的a float了之后不占文档流位置后，被其它元素遮盖了。

不要急，用排除法

1 楼 downpour 2007-02-27

用Firebug调试一下，看看哪些CSS被应用了。

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

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论